/* ======================================================
   Musikarin – Custom Styles
   Ergänzungen zum Tailwind-Theme
   ====================================================== */

/* Smooth Scroll Offset für Ankerlinks (wegen sticky nav) */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 6rem; }

/* Mobile-only: Platz unten für Sticky-Action-Bar (~68px hoch) */
@media (max-width: 767px) {
  body { padding-bottom: 4.25rem; }
}

body {
  font-feature-settings: "kern", "liga", "calt";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------
   Navigation – Scroll State
   ------------------------------------------------------ */
#nav {
  background: rgba(250, 249, 246, 0);
  backdrop-filter: blur(0);
  -webkit-backdrop-filter: blur(0);
}
#nav.scrolled {
  background: rgba(250, 249, 246, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(130, 117, 114, 0.08);
}

/* Nav über dunklem Hero-Foto: helle Cream-Töne aus der Brand-Palette
   (statt reinem Weiß), damit der Look in der Markenfarbe bleibt.
   Sobald gescrollt wird, übernimmt #nav.scrolled (cream + dunkler Text). */
#nav a,
#nav button,
#nav .material-symbols-outlined {
  transition: color 200ms ease, border-color 200ms ease;
}
#nav.on-hero:not(.scrolled) .text-on-surface {
  color: #faf9f6; /* background — gleicher Cream wie der Seitenhintergrund */
  font-weight: 600;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
}
#nav.on-hero:not(.scrolled) .text-on-surface-variant {
  color: #f1e0ce; /* primary-fixed — warmer Cream-Akzent */
  font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
#nav.on-hero:not(.scrolled) .text-primary {
  color: #e7d6c5; /* primary-container — Mic-Icon bleibt im Brand-Beige */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
#nav.on-hero:not(.scrolled) [class*="border-primary"] {
  border-color: #f1e0ce;
  border-bottom-width: 2px;
}
#nav.on-hero:not(.scrolled) #mobile-menu-toggle .material-symbols-outlined {
  color: #faf9f6;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}
#nav.on-hero:not(.scrolled) a:hover {
  color: #faf9f6;
}
/* Pill-Button bleibt unverändert, nur ein zarter Schatten auf dem Foto */
#nav.on-hero:not(.scrolled) .bg-primary {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}
/* Logo-Bild über dunklem Hero — drop-shadow, damit das warme Brand-Braun
   sich vom Foto absetzt. Im scrolled-Zustand wieder ohne Schatten. */
#nav img {
  transition: filter 200ms ease;
}
#nav.on-hero:not(.scrolled) img {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

/* ------------------------------------------------------
   Hero – dekorativer Platzhalter-Verlauf
   ------------------------------------------------------ */
.hero-placeholder {
  background:
    radial-gradient(circle at 20% 30%, rgba(231, 214, 197, 0.6) 0%, transparent 55%),
    radial-gradient(circle at 80% 70%, rgba(242, 222, 217, 0.5) 0%, transparent 55%),
    linear-gradient(135deg, #efeeeb 0%, #faf9f6 60%, #e7d6c5 100%);
}

.portrait-placeholder {
  background:
    radial-gradient(circle at 50% 30%, rgba(231, 214, 197, 0.8) 0%, transparent 60%),
    linear-gradient(180deg, #efeeeb 0%, #e7d6c5 100%);
}

.editorial-mask {
  clip-path: polygon(0 0, 100% 0, 100% 92%, 0 100%);
}

/* ------------------------------------------------------
   Setlist Accordion
   ------------------------------------------------------ */
.setlist-item {
  border-radius: 0.75rem;
  background: #ffffff;
  border: 1px solid rgba(210, 195, 192, 0.5);
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.setlist-item:hover {
  box-shadow: 0 4px 20px rgba(130, 117, 114, 0.08);
}
.setlist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.5rem 1.75rem;
  cursor: pointer;
  text-align: left;
  background: transparent;
  border: 0;
  font-family: inherit;
  transition: background 0.2s ease;
}
.setlist-header:hover { background: rgba(231, 214, 197, 0.2); }
.setlist-header .chevron { transition: transform 0.3s ease; }
.setlist-item.open .setlist-header .chevron { transform: rotate(180deg); }
.setlist-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.3s ease;
  padding: 0 1.75rem;
}
.setlist-item.open .setlist-body {
  max-height: 1000px;
  padding: 0 1.75rem 1.75rem;
}
.setlist-songs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.5rem 1.5rem;
}
.setlist-song {
  padding: 0.5rem 0;
  border-bottom: 1px dashed rgba(210, 195, 192, 0.5);
}
.setlist-song:last-child { border-bottom: 0; }
.setlist-song .titel { font-weight: 500; color: #1a1c1a; }
.setlist-song .kuenstler { font-size: 0.8rem; color: #4e4542; }

/* ------------------------------------------------------
   Media Cards (Hörproben & Videos)
   ------------------------------------------------------ */
.media-card {
  background: #ffffff;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(210, 195, 192, 0.4);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.media-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(130, 117, 114, 0.12);
}
.media-card .cover {
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #e7d6c5 0%, #efeeeb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(105, 92, 79, 0.5);
  position: relative;
}
.media-card .cover .play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.1);
  transition: background 0.3s ease;
  cursor: pointer;
  border: 0;
  color: #ffffff;
}
.media-card:hover .cover .play-btn { background: rgba(0, 0, 0, 0.35); }
.media-card .cover .play-btn .material-symbols-outlined {
  font-size: 72px;
  opacity: 0.9;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
}
.media-card .body { padding: 1.25rem 1.5rem 1.5rem; }
.media-card audio { width: 100%; margin-top: 0.75rem; }

/* ------------------------------------------------------
   Formular – States
   ------------------------------------------------------ */
#kontakt-form input:invalid:not(:placeholder-shown),
#kontakt-form select:invalid:not([value=""]) {
  border-color: #ba1a1a;
}
#kontakt-form.loading .submit-label { display: none; }
#kontakt-form.loading .submit-loading { display: inline; }


/* ------------------------------------------------------
   FAQ (native <details>)
   ------------------------------------------------------ */
.faq-item {
  background: #ffffff;
  border: 1px solid rgba(210, 195, 192, 0.5);
  border-radius: 0.75rem;
  overflow: hidden;
  transition: box-shadow 0.3s ease;
}
.faq-item:hover { box-shadow: 0 4px 20px rgba(130, 117, 114, 0.08); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 1.25rem 1.5rem;
  font-family: "Noto Serif", serif;
  font-size: 1.125rem;
  color: #1a1c1a;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  transition: background 0.2s ease;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "expand_more";
  font-family: "Material Symbols Outlined";
  font-size: 24px;
  color: #695c4f;
  transition: transform 0.3s ease;
  flex-shrink: 0;
}
.faq-item[open] > summary { background: rgba(231, 214, 197, 0.2); }
.faq-item[open] > summary::after { transform: rotate(180deg); }
.faq-item .faq-body {
  padding: 0 1.5rem 1.5rem;
  color: #4e4542;
  line-height: 1.7;
}

/* ------------------------------------------------------
   Utility
   ------------------------------------------------------ */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}