/* =====================================================================
   tippen.css — Tipp-Rückmeldung App-Leiste, Play-Knöpfe (26.09.2026)
   Gehört zu js/tippen.js. Befund: iOS zeigte beim Antippen nichts an,
   „Mehr“ war nur 35 px hoch, der Ladezustand des Streams war unsichtbar.
   ===================================================================== */

/* Eigene Rückmeldung statt der fast schwarzen Standard-Markierung von iOS */
.tabbar a, .tabbar button, .rs-btn, .rs-btn2, .rs-btn3, [data-start-play], .player__btn {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Knöpfe: gedrückt = kleiner + heller (greift auf iOS über .is-pressed, :active als Rückfall) */
.rs-btn.is-pressed, .rs-btn:active { transform: scale(.96) !important; background: #fff; }
.rs-btn2.is-pressed, .rs-btn3.is-pressed { transform: scale(.96); }
.rs-btn2, .rs-btn3 { transition: transform .12s ease, background .15s ease, color .15s ease; }
[data-start-play].is-pressed { box-shadow: 0 0 0 3px var(--ru-ink), 0 0 0 5px var(--ru-cyan); }

/* Startseiten-Play: lädt = Kante in Cyan, pulsiert */
.rs-start[data-zustand="laedt"] [data-start-play] { box-shadow: 0 0 0 2px var(--ru-cyan); animation: rs-tipp-kante 1.2s ease-in-out infinite; }
@keyframes rs-tipp-kante { 0%, 100% { box-shadow: 0 0 0 2px var(--ru-cyan); } 50% { box-shadow: 0 0 0 5px rgba(0, 229, 255, .35); } }

/* Touch-Geräte: iOS lässt :hover nach dem Tipp „kleben“ — dann sähe der alte Tab aktiv aus */
@media (hover: none) {
  .rs-btn:hover { transform: none; }
}

@media (max-width: 820px) {
  /* Volle Kachel als Trefferfläche. „Mehr“ war durch height:auto aus sunset.css nur 35 px hoch. */
  .tabbar > a, .tabbar > button, .tabbar > .nav-toggle.tabbar__more {
    position: relative; height: 100% !important; min-height: 48px; min-width: 48px; width: 100%;
    margin: 0; padding: 0; border-radius: var(--ru-r-1);
    transition: color .12s ease, background-color .12s ease;
  }
  .tabbar > a > *, .tabbar > .tabbar__more > * { transition: transform .12s ease; }

  @media (hover: none) {
    .tabbar a:hover:not(.is-active) { color: rgba(245, 239, 230, .65); }
  }

  /* Gedrückt: Fläche hellt auf, Inhalt wird kleiner */
  .tabbar > a.is-pressed, .tabbar > a:active, .tabbar > a.is-pressed:hover,
  .tabbar > .tabbar__more.is-pressed, .tabbar > .tabbar__more:active {
    color: var(--ru-paper); background-color: rgba(245, 239, 230, .08);
  }
  .tabbar > a.is-pressed > *, .tabbar > a:active > *,
  .tabbar > .tabbar__more.is-pressed > *, .tabbar > .tabbar__more:active > * { transform: scale(.94); }

  /* Aktiver Tab: Cyan-Kante oben; unterwegs (Seite lädt): Kante läuft */
  .tabbar > a::before, .tabbar > .tabbar__more::before {
    content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; border-radius: 1px;
    background: var(--ru-cyan); transform: scaleX(0); transition: transform .18s ease;
  }
  .tabbar > a.is-active::before, .tabbar > .tabbar__more.is-active::before { transform: scaleX(1); }
  .tabbar > a.is-pending::before { animation: rs-tipp-lauf .9s ease-in-out infinite; }
  @keyframes rs-tipp-lauf { 0% { transform: scaleX(.15); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 51% { transform-origin: right; } 100% { transform: scaleX(.15); transform-origin: right; } }

  /* Play in der Leiste: gedrückt = kleiner + Cyan-Ring */
  .tabbar__play.is-pressed .tabbar__playbtn, .tabbar__play:active .tabbar__playbtn {
    transform: scale(.94); box-shadow: 0 0 0 6px var(--ru-ink), 0 0 0 8px var(--ru-cyan) !important;
  }

  /* Play lädt: Pegel statt Dreieck, Ring pulsiert in Cyan */
  .tabbar__laedt { display: none; align-items: center; gap: 4px; height: 28px; }
  .tabbar__laedt i { display: block; width: 5px; height: 100%; border-radius: 1px; background: currentColor; transform: scaleY(.3); animation: ru-load 1s ease-in-out infinite; }
  .tabbar__laedt i:nth-child(2) { animation-delay: .15s; }
  .tabbar__laedt i:nth-child(3) { animation-delay: .3s; }
  body[data-rs-player="loading"] .tabbar__laedt { display: flex; }
  body[data-rs-player="loading"] .tabbar__playbtn svg { display: none !important; }
  /* Ring als eigenes Element: der Schatten des Knopfs steht in resignal.css mit !important und liesse sich nicht animieren */
  .tabbar__playbtn { position: relative; }
  .tabbar__playbtn::after {
    content: ""; position: absolute; inset: -9px; border: 2px solid var(--ru-cyan); border-radius: 8px;
    opacity: 0; pointer-events: none;
  }
  body[data-rs-player="loading"] .tabbar__playbtn::after { opacity: 1; animation: rs-tipp-ring 1.2s ease-in-out infinite; }
  @keyframes rs-tipp-ring { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(1.06); } }

  /* Mini-Player: während des Verbindens „Lädt …“ + laufender Pegel statt „Pause“ */
  body[data-rs-player="loading"] .player__fq::after { content: "Lädt …"; white-space: nowrap; animation: rs-tipp-blink 1.2s ease-in-out infinite; }
  @keyframes rs-tipp-blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
  html[lang="en"] body[data-rs-player="loading"] .player__fq::after { content: "Loading …"; }
  html[lang="fr"] body[data-rs-player="loading"] .player__fq::after { content: "Chargement …"; }
  body[data-rs-player="loading"] .player__fq { opacity: 1; color: var(--ru-ink); }
}

/* Weniger Bewegung: nichts pulsiert, Zustände bleiben als feste Zeichen sichtbar */
@media (prefers-reduced-motion: reduce) {
  .tabbar > a.is-pressed > *, .tabbar > a:active > *, .tabbar > .tabbar__more.is-pressed > *, .tabbar > .tabbar__more:active > *,
  .tabbar__play.is-pressed .tabbar__playbtn, .tabbar__play:active .tabbar__playbtn,
  .rs-btn.is-pressed, .rs-btn:active, .rs-btn2.is-pressed, .rs-btn3.is-pressed { transform: none !important; }
  .tabbar > a.is-pending::before { transform: scaleX(1); opacity: .55; }
  .tabbar__laedt i { transform: scaleY(.6); }
  body[data-rs-player="loading"] .tabbar__playbtn::after { transform: none; opacity: 1; }
}
html[data-bewegung="reduziert"] .tabbar > a.is-pending::before { transform: scaleX(1); opacity: .55; }
html[data-bewegung="reduziert"] .tabbar__laedt i { transform: scaleY(.6); }