/* Band-Seite (band.html) – baut auf style.css auf (Header, Sections, Footer).
   Wie style.css nur Form: Farben ausschließlich über die Rollen aus
   css/farben/*.css. Die Fotos sind Graustufen (tools/band-bilder.sh) und
   bekommen ihre Farbe erst über Schatten, Klebestreifen und Hover-Duoton.
   Bewusst wenig Bedienelemente: Fotos und Text stehen im Vordergrund. */

.band [hidden]{ display: none !important; }

/* längere Titel als auf der Startseite („Geschichte“):
   auf schmalen Bildschirmen kleiner, damit sie nicht überlaufen */
.band .section__title{ font-size: clamp(32px, 9vw, 104px); }

/* ===== Intro ===== */
.band-intro{ padding-top: clamp(48px, 7vw, 88px); }

.band-intro__lead{
  max-width: 30ch;
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.2;
  color: var(--text-heading);
}

/* ===== Bandvorstellung: angepinnte Abzüge, versetzt ===== */
.crew{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}
.member:nth-child(even){ margin-top: 32px; }

.member__stack{
  position: relative;
  margin-bottom: 18px;
}
/* weitere Fotos: ein zweiter Abzug schaut dahinter hervor */
.member__stack.has-more::before{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--surface);
  border: var(--bw) solid var(--line);
  transform: translate(7px, 3px) rotate(4deg);
}

.member__print{
  --o-self: var(--o);
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 8px 12px;
  font: inherit;
  text-align: left;
  color: inherit;
  background: var(--surface);
  border: var(--bw) solid var(--line);
  box-shadow: var(--o-self) var(--o-self) 0 var(--shadow-c);
  transform: rotate(-2deg);
  transition: transform .15s ease, box-shadow .15s ease;
}
.member:nth-child(even) .member__print{ transform: rotate(1.6deg); }
button.member__print{ cursor: pointer; }
@media (hover: hover){
  .member:nth-child(n) .member__print:hover{
    transform: translate(-2px, -2px);
    box-shadow: calc(var(--o-self) + 2px) calc(var(--o-self) + 2px) 0 var(--shadow-c);
  }
}

.member__photo{
  position: relative;
  display: block;
  border: 2px solid var(--line);
  background: var(--dark);
}
.member__photo img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 1260;
  object-fit: cover;
}
/* Hover: Duoton in der Akzentfarbe (Lichter färben sich, Schatten bleiben) */
.member__photo::after{
  content: "";
  position: absolute;
  inset: 0;
  background: var(--accent);
  mix-blend-mode: multiply;
  opacity: 0;
  transition: opacity .15s ease;
}
.member__print:hover .member__photo::after,
.member__print:focus-visible .member__photo::after{ opacity: .6; }

.member__name{
  display: block;
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1;
  text-transform: uppercase;
  color: var(--text-heading);
}
.member__role{
  display: block;
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.3;
  color: var(--muted);
}
.member__bio{
  padding: 0 4px;
  font-size: 15px;
  line-height: 1.5;
}
.member__bio p{ margin: 0 0 .6em; }

@media (max-width: 1100px){
  .crew{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .member:nth-child(even){ margin-top: 0; }
  .member:nth-child(3n+2){ margin-top: 32px; }
}
/* Handy: Abzug links, Text rechts – eine Zeile pro Person */
@media (max-width: 640px){
  .crew{ grid-template-columns: 1fr; gap: 40px; }
  .member,
  .member:nth-child(n){
    display: grid;
    grid-template-columns: 44% 1fr;
    gap: 22px;
    align-items: center;
    margin-top: 0;
  }
  .member__stack{ margin-bottom: 0; }
}

/* ===== Liedzeilen: vollflächiges Band wie hinter „Music“ =====
   links klein Titel + Jahr (wie im Booklet), rechts groß die Zeile */
.lyrics{
  padding: clamp(56px, 8vw, 104px) var(--gutter);
  color: var(--band-text);
  background: var(--band) var(--grain);
  border-block: var(--bw) solid var(--line);
}
.lyrics__inner{
  width: min(var(--container), 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(140px, 220px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
}
.lyrics__side{
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4px 24px 4px 0;
  border-right: 2px solid var(--band-text);
}

/* Alle Zeilen liegen im selben Rasterfeld übereinander: das Band ist immer so
   hoch wie die längste Zeile und ändert seine Größe beim Wechsel nie.
   Sichtbar ist nur .is-active; kürzere Zeilen stehen mittig. */
.lyrics__metas,
.lyrics__texts{
  display: grid;
  align-items: center;
}
/* Überblendung ohne Bewegung: erst blendet die alte Zeile aus,
   danach blendet die neue ein */
.lyric-meta,
.lyric-text{
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility 0s linear .9s;
}
.lyric-meta.is-active,
.lyric-text.is-active{
  opacity: 1;
  visibility: visible;
  transition: opacity .9s ease .9s, visibility 0s linear .9s;
}
/* die erste Zeile beim Laden ohne Verzögerung */
.lyrics:not(.is-ready) :is(.lyric-meta, .lyric-text){ transition: none; }

.lyric-meta__title{
  display: block;
  font-family: var(--font-display);
  font-size: 19px;
  line-height: 1.1;
  text-transform: uppercase;
}
.lyric-meta__year{
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}
.lyric-meta__year:empty{ display: none; }

.lyric-text__words{
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(28px, 4.2vw, 56px);
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}
.lyric-text.is-long .lyric-text__words{ font-size: clamp(22px, 3vw, 40px); }
.lyric-text__words::before{ content: "„"; }
.lyric-text__words::after{ content: "“"; }

/* schmal: Titel/Jahr als Zeile über der Liedzeile */
@media (max-width: 720px){
  .lyrics__inner{ grid-template-columns: 1fr; }
  .lyrics__side{
    display: block;
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 2px solid var(--band-text);
  }
}

/* ===== Geschichte: Text + eingeklebte Fotos ===== */
.band-story__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 380px);
  gap: clamp(36px, 6vw, 96px);
  align-items: start;
}
.band-story__text{ font-size: 18px; }

/* zwei Abzüge, überlappend eingeklebt */
.band-story__photos{ padding-top: 12px; }
.snapshot{
  position: relative;
  width: 82%;
  margin: 0;
  padding: 10px 10px 14px;
  background: var(--surface);
  border: var(--bw) solid var(--line);
  box-shadow: var(--o-lg) var(--o-lg) 0 var(--accent);
  transform: rotate(-3deg);
}
.snapshot + .snapshot{
  margin: -34% 0 0 auto;
  transform: rotate(4deg);
}
.snapshot img{
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--line);
  background: var(--dark);
}
/* Klebestreifen */
.snapshot::before{
  content: "";
  position: absolute;
  z-index: 1;
  top: -14px;
  left: 50%;
  width: 96px;
  height: 28px;
  background: var(--accent-hover);
  opacity: .9;
  transform: translateX(-50%) rotate(-4deg);
}
.snapshot + .snapshot::before{ transform: translateX(-50%) rotate(5deg); }

@media (max-width: 900px){
  .band-story__grid{ grid-template-columns: 1fr; }
  .band-story__photos{
    display: flex;
    gap: 6%;
    max-width: 560px;
  }
  .snapshot,
  .snapshot + .snapshot{ width: 47%; margin: 0; }
  .snapshot + .snapshot{ margin-top: 28px; }
}