/* Natural High · Die Artists-Seite
   ---------------------------------------------------------------------------
   Eine Liste von Namen, die sich öffnet. Im Ruhezustand nur Schrift und
   feine Linien – kein Kasten, keine Kachel. Erst beim Aufklappen kommt
   Bild und Inhalt.

   Der Rhythmus ist derselbe wie bei den Fragen auf der Startseite: 0fr
   auf 1fr, dieselbe Kurve, dieselbe Dauer. Die Seite soll sich überall
   gleich anfühlen.                                                       */

.artists-liste{
  width:100%;
  margin:0 auto;
  text-align:left;
}

.artists-leer{
  margin:0; padding:2rem 0;
  text-align:center; color:var(--fg-dim); font-size:.95rem;
}

/* ---- Eine Zeile ---- */
.artist{
  border-bottom:1px solid var(--line);
}
.artist:last-of-type{border-bottom:0}

.artist summary{
  list-style:none; cursor:pointer;
  display:block; position:relative;
  padding:1.35rem 2.4rem 1.35rem 0;
  transition:opacity .4s ease;
}
.artist summary::-webkit-details-marker{display:none}

/* Das Plus. Zwei Striche, von denen einer beim Öffnen verschwindet –
   ruhiger als ein Zeichen, das sich dreht. */
.artist summary::before,
.artist summary::after{
  content:''; position:absolute; right:.4rem;
  background:var(--fg-dim);
  transition:transform .5s cubic-bezier(.22,.61,.36,1),
             opacity .35s ease, background .4s ease;
}
.artist summary::before{
  top:50%; margin-top:-.5px;
  width:.78rem; height:1px;
}
.artist summary::after{
  top:50%; margin-top:-.39rem; right:.78rem;
  width:1px; height:.78rem;
}
.artist[open] summary::after{transform:rotate(90deg); opacity:0}
.artist summary:hover::before,
.artist summary:hover::after{background:var(--fg)}

.artist-name{
  display:block;
  font-size:clamp(1.15rem,4.2vw,1.4rem);
  font-weight:300; line-height:1.25;
  color:var(--fg);
  letter-spacing:.01em;
  transition:color .4s ease;
}
.artist summary:hover .artist-name{color:#fff}

.artist-stueck{
  display:block; margin-top:.25rem;
  font-size:.88rem; color:var(--fg-dim); font-style:italic;
}
.artist-wer{
  display:block; margin-top:.3rem;
  font-size:.72rem; letter-spacing:.11em; text-transform:uppercase;
  color:#5b6670;
}

/* ---- Was aufklappt ----
   Die Höhe steht vorher nicht fest. grid-template-rows von 0fr auf 1fr
   ist die einzige Art, sie weich zu bewegen, ohne sie zu messen. */
.artist-huelle{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .55s cubic-bezier(.22,.61,.36,1);
}
.artist[open] .artist-huelle{grid-template-rows:1fr}
.artist-huelle > div{overflow:hidden}

.artist-inhalt{
  padding:.2rem 0 1.9rem;
}

/* Der Inhalt kommt einen Hauch später als die Höhe – dadurch wirkt das
   Aufklappen wie ein Vorhang und nicht wie ein Sprung. */
.artist[open] .artist-inhalt > *{
  animation:artist-auf .7s cubic-bezier(.22,.61,.36,1) both;
}
.artist[open] .artist-inhalt > *:nth-child(2){animation-delay:.07s}
.artist[open] .artist-inhalt > *:nth-child(3){animation-delay:.13s}
.artist[open] .artist-inhalt > *:nth-child(4){animation-delay:.19s}
@keyframes artist-auf{
  from{opacity:0; transform:translateY(6px)}
  to  {opacity:1; transform:none}
}

/* ---- Das Bild ---- */
.artist-bild{
  margin:0 0 1.4rem;
  border-radius:14px; overflow:hidden;
  background:var(--bg-2);
  aspect-ratio:16 / 9;
}
.artist-bild img{
  display:block; width:100%; height:100%;
  object-fit:cover;
  /* Etwas zurückgenommen, damit es sich in die Seite legt statt
     herauszuspringen. Beim Zeigen kommt die volle Farbe. */
  filter:saturate(.72) brightness(.86);
  transform:scale(1.02);
  transition:filter .8s ease, transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.artist-bild:hover img{filter:none; transform:scale(1)}

/* ---- Der Text ---- */
.artist-text{margin:0 0 1.3rem}
.artist-text p{
  margin:0 0 .85rem;
  font-size:.95rem; line-height:1.7; color:var(--fg-dim);
}
.artist-text p:last-child{margin-bottom:0}

/* ---- Weitere Stücke ---- */
.artist-stuecke{margin:0 0 1.3rem}
.artist-stuecke h3{
  margin:0 0 .5rem;
  font-size:.68rem; letter-spacing:.13em; text-transform:uppercase;
  font-weight:400; color:#5b6670;
}
.artist-stuecke ul{list-style:none; margin:0; padding:0}
.artist-stuecke li{
  padding:.42rem 0;
  border-top:1px solid rgba(255,255,255,.045);
  font-size:.92rem; color:var(--fg-dim);
}
.artist-stuecke li:first-child{border-top:0}
.artist-stuecke a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .35s ease, border-color .35s ease;
}
.artist-stuecke a:hover{color:var(--fg); border-bottom-color:var(--line)}

/* ---- Die Wege nach draußen ---- */
.artist-wege{
  display:flex; flex-wrap:wrap; gap:.35rem 1.4rem;
}
/* Keine Pillen. Nur Schrift, hell, mit einer Linie darunter, die beim
   Zeigen deutlich wird. Chris am 21.08.: "normalen Weiß einfach bei uns
   oder sogar bisschen ins Graue rein." */
.artist-wege a{
  padding:.1rem 0;
  font-size:.82rem; letter-spacing:.01em;
  color:#c3c8cd; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.12);
  transition:color .35s ease, border-color .35s ease;
}
.artist-wege a:hover{color:#fff; border-bottom-color:rgba(255,255,255,.4)}

/* ---- Die Einladung an Künstler ----
   Steht unter der Liste, nicht darüber: Wer hierherkommt, will erst
   sehen, wer dabei ist. Das Angebot liest, wer weitergelesen hat. */
/* Kein Kasten. Der Rahmen machte aus einer Einladung eine Anzeige -
   und die Seite hatte dann zwei Sprachen: offene Liste oben, Werbeblock
   unten. Jetzt trennt nur eine Linie. */
.artists-einladung{
  width:100%; margin:3.6rem auto 0;
  padding:2.4rem 0 0;
  border-top:1px solid var(--line);
  text-align:left;
}
.artists-einladung h2{
  margin:0 0 .9rem;
  font-size:clamp(1.15rem,4vw,1.35rem); font-weight:300; color:var(--fg);
  line-height:1.3;
}
.artists-einladung p{
  margin:0 0 .85rem;
  font-size:.94rem; line-height:1.7; color:var(--fg-dim);
}
.artists-einladung ul{
  margin:0 0 1.2rem; padding:0; list-style:none;
}
.artists-einladung li{
  position:relative; padding:.42rem 0 .42rem 1.15rem;
  font-size:.94rem; line-height:1.65; color:var(--fg-dim);
}
.artists-einladung li::before{
  content:''; position:absolute; left:0; top:1.05rem;
  width:.26rem; height:.26rem; border-radius:50%;
  background:#4b545d;
}
.artists-einladung .einladung-los{
  display:inline-block; margin-top:.4rem;
  padding:.1rem 0;
  background:none; color:var(--fg);
  text-decoration:none;
  font-size:1rem; letter-spacing:.01em;
  border-bottom:1px solid rgba(255,255,255,.22);
  transition:border-color .4s ease;
}
.artists-einladung .einladung-los:hover{border-bottom-color:#fff}

@media (max-width: 480px){
  .artists-einladung{padding:2rem 0 0}
}

@media (prefers-reduced-motion: reduce){
  .artist-huelle{transition:none}
  .artist[open] .artist-inhalt > *{animation:none}
  .artist-bild img{transition:none}
}

/* ---- Die leise Zeile zur Kuenstler-Seite ----
   Kein Knopf, kein Kasten. Wer Musik macht, sucht danach; alle anderen
   sollen darueber hinweglesen koennen. */
.artists-hinweis{
  margin:3rem 0 0;
  padding-top:2rem;
  border-top:1px solid var(--line);
  text-align:center;
}
.artists-hinweis a{
  color:#6b757e; text-decoration:none;
  font-size:.86rem; letter-spacing:.02em;
  border-bottom:1px solid transparent;
  transition:color .4s ease, border-color .4s ease;
}
.artists-hinweis a:hover{color:var(--fg); border-bottom-color:rgba(255,255,255,.25)}

/* Links im Fließtext. Ohne diese Regel stehen sie im Browser-Blau mitten
   in der Seite - genau das war auf der ersten Fassung der Künstler-Seite
   zu sehen. Hell, mit feiner Linie, wie überall sonst bei uns. */
.artists-einladung a:not(.einladung-los),
.artist-text a{
  color:#c3c8cd; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.18);
  transition:color .35s ease, border-color .35s ease;
}
.artists-einladung a:not(.einladung-los):hover,
.artist-text a:hover{color:#fff; border-bottom-color:rgba(255,255,255,.45)}

/* Die Zeile unter der Überschrift sagt, was diese Seite IST - und was sie
   nicht ist. Sie darf leise sein, aber sie muss lesbar bleiben: eine
   Klarstellung, die niemand liest, ist keine. */
.klarstellung{
  text-transform:none !important;
  letter-spacing:.01em !important;
  font-size:.8rem !important;
  color:#5b6670 !important;
  max-width:38ch; margin-left:auto; margin-right:auto;
  line-height:1.6;
}

/* "Weitere folgen." - damit die Liste offen wirkt statt fertig. Sie steht
   direkt unter dem letzten Namen und gehoert noch zur Liste, nicht zum
   Abschluss darunter. */
.artists-weiter{
  margin:1.3rem 0 0;
  font-size:.78rem; letter-spacing:.02em;
  color:#4b545d; text-align:left;
}