/* ===========================================================================
   pp-pfeile.css — PFEILE_20260917
   Die drei Pfeile an jeder Antwort.

   Zurueckhaltend, bis man sie braucht: sie sitzen an der Antwort, drangen
   sich aber nicht vor. Beruehrt man einen, leuchtet er auf und quittiert
   kurz — man soll sehen, dass es angekommen ist, ohne dass ein Dialog
   aufgeht (POCKETPILES_EDITOR_FLOW.md: "ohne Rueckfrage").
   =========================================================================== */

.pp-pfeile {
  display: flex; gap: 7px; align-items: center;
  margin: 7px 0 2px; padding: 0;
  opacity: .55;
  transition: opacity .25s ease;
}
.pp-pfeile:hover, .pp-pfeile:focus-within { opacity: 1; }

.pp-pfeil {
  position: relative;
  width: 30px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; cursor: pointer;
  background: rgba(241,230,207,.055);
  border: 1px solid rgba(214,162,94,.24);
  color: #d6a25e;
  font: 400 15px/1 system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, background .2s ease, border-color .2s ease;
}
.pp-pfeil:hover, .pp-pfeil:focus-visible {
  background: rgba(214,162,94,.14);
  border-color: rgba(214,162,94,.48);
}
/* Kurzer Druckpunkt — die einzige Animation, die am Finger haengt. */
.pp-pfeil:active { transform: scale(.88); }

/* Die Quittung: steigt kurz ueber dem Pfeil auf und geht wieder. */
.pp-quittung {
  position: absolute; left: 50%; bottom: 100%;
  transform: translate(-50%, 4px);
  margin-bottom: 5px; padding: 3px 8px; border-radius: 7px;
  background: #1f1a14; border: 1px solid rgba(214,162,94,.32);
  color: #e8dfd0; white-space: nowrap;
  font: 500 10.5px/1.3 system-ui, sans-serif;
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.pp-quittung.an { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .pp-pfeil, .pp-quittung, .pp-pfeile { transition-duration: .01ms !important; }
}

.pp-pfeil svg{width:15px;height:15px;fill:currentColor;pointer-events:none}
@media(max-width:430px){.pp-pfeile{gap:5px}.pp-pfeil{width:28px;height:28px;border-radius:8px}}