/* Natural High · Der Atem-Ton im Kino
   ---------------------------------------------------------------------------
   Eine Zeile unter dem Spieler, im selben Ton wie er. Sie soll nicht wie ein
   zweites Werkzeug aussehen, sondern wie ein Teil desselben.

   Der Strich darüber trennt Musik von Atem, ohne einen Kasten zu bauen. */

/* ⚠️ flex:1 0 100 % - eine eigene Zeile im Streifen.
   Die Buehne ist flex mit Umbruch. Ohne feste Breite stellte sich die Zeile
   neben den Klapp-Griff und schob alles andere um. */
.atemton{
  flex:1 0 100%;
  display:flex; flex-direction:column; gap:.85rem;
  /* Der Strich liegt UNTER der Zeile - sie steht über der Musik und trennt
     sich von ihr nach unten.

     ⚠️ KEIN order:-1 MEHR. Das schob die Zeile vor den Klapp-Griff des
     Kinos, und der stand danach an der falschen Stelle. Sie wird ohnehin
     direkt hinter dem Griff eingehängt - die Reihenfolge im Markup reicht,
     und was man nicht doppelt bestimmt, kann nicht auseinanderlaufen. */
  /* Chris am 21.08.: "schön frei", "atmend schön Padding geil machen".
     Sie ist das Wichtigste in diesem Feld und stand am engsten. Jetzt hat
     sie oben und unten Luft, und das Kino rückt darunter weg. */
  margin:.2rem 0 1.15rem; padding:.15rem 0 1.05rem;
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* Der Schalter trägt das Wort - so ist auf einen Blick klar, worum es geht. */
.atemton-an{
  display:inline-flex; align-items:center; gap:.42rem;
  background:none; border:0; padding:.3rem .1rem; width:auto;
  font:inherit; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:#5b6670; cursor:pointer;
  transition:color .4s ease;
}
.atemton-an svg{
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.2;
}
.atemton-an:hover{color:var(--fg-dim)}

/* ---- Aus ist aus --------------------------------------------------------
   Chris am 21.08.: "das Atem-Icon im Kino auslassen wenn's aus ist, nicht
   mehr blau leuchten - und blau leuchtend wenn's an ist."

   Vorher kam und ging es im Azur, um zum Drücken einzuladen. Es lädt aber
   auch ohne das ein: Es steht in einer Zeile, die "Atem" heißt. Und ein
   Zeichen, das leuchtet, obwohl nichts läuft, sagt etwas Falsches über den
   Zustand - das ist schlimmer als eine verpasste Einladung. */
}
/* ⭐ AZUR, WENN ER LAEUFT.
   Chris am 21.08.: "das Icon leuchtet, wenn ac, so geil azure leucht blau."

   Dasselbe Blau, mit dem der Umschwung in der Reise beginnt (#6cc6ff) - es
   ist der Ton der Marke fuer "es geht los". Und es glimmt, statt zu
   strahlen: Ein Zeichen, das leuchtet, waehrend jemand die Augen schliesst,
   waere ein Widerspruch. */
.atemton-an[aria-pressed="true"]{
  color:#6cc6ff;
  text-shadow:0 0 14px rgba(108,198,255,.35);
}
.atemton-an[aria-pressed="true"] svg{
  filter:drop-shadow(0 0 6px rgba(108,198,255,.55));
}
/* Der innere Kreis atmet mit, sobald der Ton läuft - dieselbe Uhr wie der
   Ring im Kopf, weil beide an --atem hängen. */
.atemton-an[aria-pressed="true"] svg circle:last-child{
  animation:atemton-puls var(--atem,9.9s) ease-in-out infinite;
  transform-origin:center;
}
@keyframes atemton-puls{
  0%,100%{transform:scale(.72); opacity:.6}
  43%    {transform:scale(1.15); opacity:1}
}

.atemton-takt{
  margin:0; font-size:.7rem; color:#5b6670; letter-spacing:.04em;
  white-space:nowrap;
}
.atemton-takt b{color:var(--fg-dim); font-weight:400}

/* Innerhalb der Klappe stehen sie nebeneinander, mit Luft. */
/* Der abschneidende Kasten selbst traegt nichts - kein Polster, kein Rand.
   Die Luft steckt eine Ebene tiefer. */
.atemton-fein-reihe{
  display:flex; align-items:center; gap:.95rem; flex-wrap:wrap;
  padding:.8rem 0 .2rem;
}
.atemton-pmreihe{display:inline-flex; gap:.3rem}

/* ---- Die zwei Arten, das Tempo zu stellen -------------------------------
   Immer nur eine ist da. Sie tauschen den Platz, statt nebeneinander zu
   stehen - zwei Reihen ± gleichzeitig wären nicht zu unterscheiden. */
.atemton-einzeln{display:none; gap:.9rem}
.atemton.frei .atemton-beide{display:none}
.atemton.frei .atemton-einzeln{display:inline-flex}

.atemton-paar{display:inline-flex; align-items:center; gap:.3rem}
.atemton-paar-wort{
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:#4b545d; margin-right:.1rem;
}

.atemton-modus{
  width:auto; padding:.2rem; background:none; border:0; cursor:pointer;
  color:#39424b; transition:color .4s ease;
}
.atemton-modus svg{
  width:15px; height:15px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.3; stroke-linecap:round;
}
.atemton-modus:hover{color:var(--fg-dim)}
/* Getrennt: die zwei Striche rücken auseinander - das Zeichen sagt, was
   der Zustand ist, ohne ein Wort. */
.atemton-modus[aria-pressed="true"]{color:var(--fg-dim)}
.atemton-modus[aria-pressed="true"] svg path{
  d:path('M4 7h16M4 17h16');
}
.atemton-pm{
  width:22px; height:22px; padding:0; flex:0 0 auto;
  display:grid; place-items:center;
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08);
  border-radius:6px;
  font:inherit; font-size:.8rem; line-height:1; color:var(--fg-dim);
  cursor:pointer;
  transition:background .3s ease, color .3s ease;
}
.atemton-pm:hover{background:rgba(255,255,255,.11); color:var(--fg)}

.atemton-glocke{
  width:auto; padding:.2rem; background:none; border:0; cursor:pointer;
  color:#39424b; transition:color .4s ease;
}
.atemton-glocke svg{
  width:15px; height:15px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.2;
  stroke-linecap:round; stroke-linejoin:round;
}
.atemton-glocke:hover{color:var(--fg-dim)}
.atemton-glocke[aria-pressed="true"]{color:var(--fg-dim)}

/* Die obere Reihe: nur das, was jeder braucht. */
.atemton-reihe{
  display:flex; align-items:center; gap:.95rem; flex-wrap:wrap;
}

/* ---- Die Feinheiten ------------------------------------------------------
   Chris am 21.08.: "hide erstmal komplett + - im Kino, so dass es der
   normale geile Flow bleibt."

   Sie klappen auf, statt einfach da zu sein. `grid-template-rows` von 0fr
   auf 1fr, damit die Höhe weich wird, ohne dass sie vorher bekannt sein
   muss - dasselbe Verfahren wie bei den Fragen auf der Startseite. */
.atemton-fein{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .5s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
  opacity:0;
}
.atemton.fein-auf .atemton-fein{grid-template-rows:1fr; opacity:1}
/* ⚠️ Genau EIN Kind, und das schneidet ab. Mit mehreren Kindern bekommt das
   Raster mehrere Zeilen und die Regel greift auf keine davon - gemessen 57px
   statt 0. */
.atemton-fein > .atemton-fein-innen{overflow:hidden; min-height:0}
/* Die drei Punkte: ein Zeichen, das nichts verspricht und alles anbietet. */
.atemton-mehr{
  width:auto; padding:.2rem .3rem; margin-left:auto;
  background:none; border:0; cursor:pointer;
  color:#4b545d; transition:color .4s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.atemton-mehr svg{
  width:15px; height:15px; display:block; fill:currentColor; stroke:none;
}
.atemton-mehr:hover{color:var(--fg-dim)}
.atemton-mehr[aria-expanded="true"]{color:var(--fg-dim); transform:rotate(90deg)}

/* Die untere: nur, wie laut man ihn hört. Über die volle Breite und mit
   Luft darüber - er ist eine eigene Sache, keine achte Schaltfläche. */
.atemton-regler{
  display:flex; align-items:center;
  padding:.15rem 0 .1rem;
}
.atemton-laut{
  flex:1 1 auto; width:100%;
  appearance:none; -webkit-appearance:none;
  height:3px; border-radius:3px; cursor:pointer;
  /* Links vom Griff gefüllt, rechts leer - man sieht den Stand, ohne eine
     Zahl lesen zu müssen. */
  background:linear-gradient(90deg,
    var(--fg-dim) 0 var(--stand,30%), rgba(255,255,255,.10) var(--stand,30%) 100%);
}
.atemton-laut::-webkit-slider-thumb{
  -webkit-appearance:none; width:11px; height:11px; border-radius:50%;
  background:var(--fg); border:0; cursor:pointer;
  box-shadow:0 0 0 4px rgba(11,13,16,.9);
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.atemton-laut:hover::-webkit-slider-thumb{transform:scale(1.25)}
.atemton-laut::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%;
  background:var(--fg); border:0; cursor:pointer;
}

/* Eingeklappt verschwindet sie mit dem Rest. */
.kino-buehne.eingeklappt .atemton{
  opacity:0; pointer-events:none; height:0; margin:0; padding:0; border:0;
  overflow:hidden;
}

@media (prefers-reduced-motion: reduce){
  .atemton-an[aria-pressed="true"] svg circle:last-child{animation:none}
}

/* Zurück auf den Takt der Seite. Er steht nur da, wenn der Atem davon
   abweicht - ein Knopf, der beim ersten Blick schon nichts bewirkt, ist
   einer zu viel. */
.atemton-sync{
  width:auto; padding:.2rem; background:none; border:0; cursor:pointer;
  color:#4b545d; transition:color .4s ease;
}
.atemton-sync[hidden]{display:none !important}
.atemton-sync svg{
  width:14px; height:14px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
}
.atemton-sync:hover{color:var(--fg)}