/* BEYONDV - Knöpfe der Website im Spiel-Register (docs/DESIGN.md "Zwei Register", 07.10.2026 abends).
   Nur Werte aus tokens.css. Kein Licht, kein Glanz, kein Puls. Das Kontrollzentrum hat eigene Knöpfe (kontrolle.css).

     .btn                 Zweitknopf (Standard): runde Pille, leise Fläche, Rahmen --stroke2, Hover Fläche --card2
     .btn-secondary       dasselbe ausdrücklich
     .btn-primary         Hauptknopf: Feldoliv flächig (auch .btn.primary) - höchstens einer je Ansicht
     .btn-lg              groß, 56 px, Titelschrift in Großbuchstaben (Hauptweg auf Website und im Launcher)
     .ghost .danger .small .block .icon-only   Abwandlungen wie bisher

   Bewegung (Emil Kowalski): Hover hebt den Knopf 1 px an, ein weicher Schatten mit Versatz blendet ein (eigene Ebene,
   nur opacity - der Schatten selbst wird nie animiert), das Symbol macht einen kleinen Hüpfer. Drücken: scale(.96) in
   100 ms; Loslassen federt in 260 ms leicht über die Ruhelage zurück (--ease-spring). Heben und Drücken laufen über die
   getrennten Eigenschaften translate und scale - so federt NUR das Loslassen, nicht das Überfahren.
   Hover nur bei echter Maus (am Handy bliebe er nach dem Tippen hängen). Weniger Bewegung: nur Farbwechsel. */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-height: 44px;
  padding: 0 20px;
  border-radius: var(--r-btn);
  border: 1px solid var(--stroke2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  translate: 0 0;
  scale: 1;
  transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out),
    color var(--fast) var(--ease-out), translate var(--fast) var(--ease-out), scale var(--release) var(--ease-spring);
}
/* Schatten beim Heben: eigene Ebene, es blendet nur die Deckkraft */
.btn::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: var(--shadow-lift); opacity: 0; transition: opacity var(--fast) var(--ease-out);
}
.btn:active {
  scale: 0.96;
  translate: 0 0;
  transition: background-color var(--fast) var(--ease-out), border-color var(--fast) var(--ease-out),
    color var(--fast) var(--ease-out), translate var(--press) var(--ease-out), scale var(--press) var(--ease-out);
}
.btn:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; box-shadow: 0 0 0 2px var(--bg); } /* Doppelring wie überall (tokens.css) */
.btn[disabled], .btn.disabled { opacity: 0.45; pointer-events: none; }
.btn .ic { --size: 18px; flex: none; color: var(--icon); transition: color var(--fast) var(--ease-out); }
.btn .chev { margin-left: var(--s1); color: var(--icon); transition: color var(--fast) var(--ease-out), translate var(--fast) var(--ease-out); }
@keyframes bv-hop {
  0% { transform: none; }
  35% { transform: translateY(-3px) rotate(-8deg); }
  70% { transform: translateY(0) rotate(4deg); }
  100% { transform: none; }
}
@media (hover: hover) {
  .btn:hover { background-color: var(--card2); border-color: var(--stroke3); color: var(--text); translate: 0 -1px; }
  .btn:hover::after { opacity: 1; }
  .btn:hover .ic, .btn:hover .chev { color: var(--text); }
  .btn:hover > .ic:first-child { animation: bv-hop var(--hop) var(--ease-out); }
  .btn:hover .chev { translate: 2px 0; }
  .btn.ghost:hover::after { opacity: 0; }
}

/* Hauptknopf: Feldoliv flächig, ohne Licht aus der Mitte */
.btn-primary, .btn.primary {
  border-color: transparent;
  background: var(--a);
  color: var(--on-a);
  font-weight: 600;
}
.btn-primary .ic, .btn.primary .ic { color: var(--on-a); }
@media (hover: hover) {
  .btn-primary:hover, .btn.primary:hover { background: var(--a-hover); border-color: transparent; color: var(--on-a); }
  .btn-primary:hover .ic, .btn.primary:hover .ic { color: var(--on-a); }
}
.btn-primary:active, .btn.primary:active { background: var(--a-press); }


/* Groß: Titelschrift (Barlow Condensed), Großbuchstaben */
.btn-lg {
  min-height: 56px;
  padding: 0 30px 0 24px;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: var(--track-caps);
  text-transform: uppercase;
}
.btn-lg .ic { --size: 22px; }

/* Abwandlungen */
.btn.ghost { border-color: transparent; background: transparent; }
@media (hover: hover) { .btn.ghost:hover { background: var(--card2); border-color: transparent; translate: 0 0; } }
.btn.danger { border-color: color-mix(in srgb, var(--blood) 45%, transparent); color: #f6d3cd; background: color-mix(in srgb, var(--blood) 10%, transparent); }
.btn.danger .ic { color: var(--danger-text); }
@media (hover: hover) { .btn.danger:hover { border-color: var(--blood); background: color-mix(in srgb, var(--blood) 20%, transparent); color: #fbeae6; } }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 13.5px; }
.btn.block { width: 100%; }
.btn.icon-only { width: 44px; padding: 0; }
.btn.icon-only.small { width: 36px; }
@media (pointer: coarse) { .btn.small { min-height: 44px; } .btn.icon-only.small { width: 44px; } }

/* Weniger Bewegung: Farben wechseln weiter weich, nichts bewegt sich */
:root[data-motion='off'] .btn, :root[data-motion='off'] .btn .ic, :root[data-motion='off'] .btn .chev { transition-property: background-color, border-color, color; }
:root[data-motion='off'] .btn:active, :root[data-motion='off'] .btn:hover { scale: 1; translate: 0 0; }
:root[data-motion='off'] .btn:hover .ic, :root[data-motion='off'] .btn:hover .chev { animation: none; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn .ic, .btn .chev { transition-property: background-color, border-color, color; }
  .btn:active, .btn:hover { scale: 1; translate: 0 0; }
  .btn:hover .ic, .btn:hover .chev { animation: none; translate: 0 0; }
}