/* Natural High · der Naturklang
   Ein Zeichen oben links, das eine kleine Auswahl aufklappt.
   Still im Ruhezustand, deutlich genug, um gefunden zu werden. */

.ton-huelle{position:relative; pointer-events:auto; margin-right:auto}

/* Die Knöpfe der Seite tragen Farbblasen — hier sollen sie nicht sein. */
.ton-knopf::before, .ton-knopf::after,
.ton-alle-aus::before, .ton-alle-aus::after{content:none}
.ton-knopf, .ton-alle-aus{
  background:none; box-shadow:none; text-shadow:none; border-radius:0;
  font-weight:400; transform:none;
}

.ton-knopf{
  background:none; border:0;
  /* Die Fläche zum Antippen ist größer als das Zeichen. */
  padding:.35rem .3rem;
  margin:-.35rem -.3rem;
  cursor:pointer; line-height:0;
  color:var(--fg-dim);
  transition:color .6s ease;
  width:auto;
}
.ton-knopf:hover{color:var(--fg)}
.ton-knopf.an{color:var(--fg)}
.ton-knopf svg{
  width:1.65rem; height:1.65rem; display:block;
  fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; overflow:visible;
}
.ton-knopf .ton-punkt{fill:currentColor; stroke:none}
@media (max-width: 520px){
  .ton-knopf svg{width:1.5rem; height:1.5rem}
}

/* Still: die Wellen stehen, sind aber gut zu sehen. */
.ton-welle{opacity:.55; transition:opacity .8s ease}
.ton-knopf:hover .ton-welle{opacity:.85}

/* Läuft etwas: die Wellen kommen nacheinander, im Takt des Atems. */
.ton-knopf.an .ton-welle{animation:ton-welle 4.4s ease-in-out infinite}
.ton-knopf.an .w1{animation-delay:0s}
.ton-knopf.an .w2{animation-delay:.5s}
.ton-knopf.an .w3{animation-delay:1s}
@keyframes ton-welle{
  0%,100%{opacity:.35}
  40%    {opacity:1}
}

/* ---- Die Auswahl ---- */
.ton-feld{
  position:absolute; top:calc(100% + .9rem); left:-.3rem;
  z-index:8; width:min(15rem, 74vw);
  background:rgba(11,13,16,.92);
  border:1px solid var(--line); border-radius:16px;
  padding:.8rem;
  display:flex; flex-direction:column; gap:.6rem;
  text-transform:none; letter-spacing:normal;
  animation:ton-feld-auf .5s cubic-bezier(.22,.61,.36,1) both;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
/* Ohne diese Zeile bliebe das Feld offen: display gewinnt gegen das
   hidden-Attribut. Derselbe Fehler wie damals bei den drei Zuständen
   der Session. */
.ton-feld[hidden]{display:none}

@keyframes ton-feld-auf{
  from{opacity:0; transform:translateY(-6px)}
  to  {opacity:1; transform:none}
}

.ton-kachel{display:flex; flex-direction:column; gap:.4rem}

.ton-bild{
  position:relative; width:100%; aspect-ratio:16/7;
  border:1px solid var(--line); border-radius:11px;
  overflow:hidden; cursor:pointer; padding:0;
  background:var(--bg-2);
  transition:border-color .5s ease;
}
.ton-bild::before{
  content:''; position:absolute; inset:0;
  background:var(--bild) center/cover no-repeat;
  /* Im Ruhezustand fast schwarz — die Bilder sollen nicht schreien. */
  opacity:.3; filter:grayscale(.55);
  transition:opacity .7s ease, filter .7s ease;
}
.ton-bild::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, rgba(11,13,16,.8) 100%);
}
.ton-bild span{
  position:absolute; left:.6rem; bottom:.42rem; z-index:2;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--fg-dim); transition:color .5s ease;
}
.ton-bild:hover::before{opacity:.5; filter:grayscale(.3)}
.ton-bild.an{border-color:#3a444f}
.ton-bild.an::before{opacity:.78; filter:none}
.ton-bild.an span{color:var(--fg)}

/* Ein feiner Punkt zeigt, dass die Spur läuft. */
.ton-bild.an::after{
  background:linear-gradient(180deg, transparent 30%, rgba(11,13,16,.8) 100%),
             radial-gradient(circle at calc(100% - .7rem) .7rem,
               rgba(236,232,225,.9) 0 2.5px, transparent 3px);
}

.ton-regler{
  width:100%; height:2px; margin:0; padding:0;
  -webkit-appearance:none; appearance:none;
  background:var(--line); border-radius:2px; cursor:pointer;
}
.ton-regler::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:11px; height:11px; border-radius:50%;
  background:var(--fg-dim); border:0; cursor:pointer;
  transition:background .4s ease;
}
.ton-regler::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%;
  background:var(--fg-dim); border:0; cursor:pointer;
}
.ton-regler:hover::-webkit-slider-thumb{background:var(--fg)}

.ton-alle-aus{
  background:none !important; border:0; padding:.35rem 0 .1rem;
  color:#5b6670; cursor:pointer; width:100%;
  font:inherit; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  transition:color .5s ease;
}
.ton-alle-aus:hover{color:var(--fg-dim)}

@media (prefers-reduced-motion: reduce){
  .ton-knopf.an .ton-welle{animation:none; opacity:.9}
  .ton-feld{animation:none}
}