/* ════════════════════════════════════════════════════════
   CLUB 218 · BUTTON-DESIGN-SYSTEM · buttons-v1.css
   07.09.2026
   ────────────────────────────────────────────────────────
   Verbindliches System fuer alle Buttons. Vorher hatte jede
   Seite eigene Werte — mal 8px Radius, mal 16, mal 999,
   unterschiedliche Paddings, Schriften und Uebergaenge.

   VIER KLASSEN, mehr nicht:
     .btn-primary    Hauptaktion  · Pink-Lila-Verlauf
     .btn-secondary  Nebenaktion  · transparent mit Pink-Rand
     .btn-ghost      unauffaellig · nur duenner Rahmen
     .btn-danger     Loeschen     · Rot-Lila-Verlauf

   FESTE REGELN (nicht abweichen):
     border-radius  : 12px
     padding        : 0.85rem 1.8rem
     font-family    : 'Inter'
     font-weight    : 700 (primary/danger) · 600 (secondary) · 500 (ghost)
     letter-spacing : 0.05em bei Grossbuchstaben
     transition     : 0.3s

   Groessen-Modifier: .btn-sm · .btn-lg · .btn-block
   Diese aendern NUR Padding und Schriftgroesse, nie den Radius.
   ════════════════════════════════════════════════════════ */

.btn-primary,
.btn-secondary,
.btn-ghost,
.btn-danger {
  /* Gemeinsame Basis — hier liegen die unverhandelbaren Werte */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.85rem 1.8rem;
  border-radius: 12px;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Primary · Hauptaktion ───────────────────────────── */
.btn-primary {
  background: linear-gradient(135deg, #FF006E 0%, #9B59FF 100%);
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(255, 0, 110, 0.35);
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 0, 110, 0.5);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 6px 18px rgba(255, 0, 110, 0.4);
}

/* ── Secondary · Nebenaktion ─────────────────────────── */
.btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #E8DFD3;
  border: 1px solid rgba(255, 0, 110, 0.3);
  font-weight: 600;
}
.btn-secondary:hover:not(:disabled) {
  background: rgba(255, 0, 110, 0.1);
  border-color: #FF006E;
  transform: translateY(-1px);
}
.btn-secondary:active:not(:disabled) {
  transform: translateY(0);
}

/* ── Ghost · unauffaellig ────────────────────────────── */
.btn-ghost {
  background: transparent;
  color: #E8DFD3;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-weight: 500;
}
.btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

/* ── Danger · Loeschen und Abbrechen ─────────────────── */
.btn-danger {
  background: linear-gradient(135deg, #EA4335 0%, #9B59FF 100%);
  color: #fff;
  border: none;
  font-weight: 700;
  box-shadow: 0 8px 24px rgba(234, 67, 53, 0.3);
}
.btn-danger:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(234, 67, 53, 0.45);
}

/* ── Zustaende ───────────────────────────────────────── */
.btn-primary:disabled,
.btn-secondary:disabled,
.btn-ghost:disabled,
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

/* Tastatur-Bedienung muss sichtbar bleiben */
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-ghost:focus-visible,
.btn-danger:focus-visible {
  outline: 2px solid #FF006E;
  outline-offset: 3px;
}

/* ── Groessen · aendern NUR Padding und Schriftgroesse ── */
.btn-sm {
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
}
.btn-lg {
  padding: 1.05rem 2.4rem;
  font-size: 1.05rem;
}
.btn-block {
  display: flex;
  width: 100%;
}

/* ── Mobil ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-danger {
    padding: 0.8rem 1.4rem;
    font-size: 0.9rem;
  }
}

/* Wer Bewegung reduziert haben will, bekommt keine */
@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .btn-danger {
    transition: none;
  }
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-ghost:hover,
  .btn-danger:hover {
    transform: none;
  }
}

/* ════════════════════════════════════════════════════════
   TEIL 2 · Angleichung der bestehenden Admin-Klassen
   07.09.2026 · nach dem Rundgang
   ────────────────────────────────────────────────────────
   Die vier Klassen oben sind das System. Gewachsen ist im Admin
   aber deutlich mehr: .btn allein kommt ueber 500-mal vor, dazu
   .btn-small, .btn-mini, .btn-back und ein gutes Dutzend weiterer.
   Die Inventur ergab bei den Radien 6px, 7px, 8px, 10px und 999px.

   Diese Klassen bleiben im HTML stehen. Angeglichen werden Radius,
   Schrift und Uebergang — dadurch musste kein einziges Admin-Template
   angefasst werden.

   .btn bekommt bewusst KEINE Farbe zugewiesen: die Klasse steht
   fast immer zusammen mit einem Modifier (class="btn btn-secondary").
   Eine Farbe hier wuerde den Modifier ueberschreiben.

   FARBEN, DIE BLEIBEN (das ist kein Versehen):
     gruen  · bestaetigt, gespeichert, aktiv
     rot    · loeschen, Warnung
     gelb   · ausstehend
     tuerkis· .btn-checkin — Einlass-Signal an der Tuer
     Google-Blau/Gruen in admin-google · das ist Google-Branding
   ════════════════════════════════════════════════════════ */

.btn,
.btn-small,
.btn-sm,
.btn-mini,
.btn-back,
.btn-action,
.btn-outline,
.btn-save,
.btn-cancel,
.btn-send,
.btn-run,
.btn-confirm,
.btn-success,
.btn-warning,
.btn-info,
.btn-gold,
.btn-pink,
.btn-checkin {
  border-radius: 12px !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  letter-spacing: 0.03em;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Groessen-Modifier duerfen den Radius nicht zuruecksetzen */
.btn-small, .btn-mini { font-size: 0.82rem; }

/* Farbkorrektur · diese lagen ausserhalb der Palette und tragen
   keine Statusbedeutung. Gold und Pink-Tuerkis waren reine Deko. */
.btn-gold,
.btn-pink {
  background: linear-gradient(135deg, #FF006E 0%, #9B59FF 100%) !important;
  color: #fff !important;
  border: none !important;
}
.btn-gold:hover:not(:disabled),
.btn-pink:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(255, 0, 110, 0.5);
}

.btn:focus-visible,
.btn-small:focus-visible,
.btn-mini:focus-visible {
  outline: 2px solid #FF006E;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn-small, .btn-sm, .btn-mini, .btn-back, .btn-action,
  .btn-outline, .btn-save, .btn-cancel, .btn-send, .btn-run,
  .btn-confirm, .btn-success, .btn-warning, .btn-info,
  .btn-gold, .btn-pink, .btn-checkin {
    transition: none !important;
  }
  .btn-gold:hover, .btn-pink:hover { transform: none; }
}