/* ============================================================
   Buttons — Pill-Buttons in 4 Varianten
   Konsumenten: alle Seiten, Heroes, CTA-Banner, Forms

   Varianten:
   .btn-primary      Gruen auf Bone — Default-CTA
   .btn-rot          Rot auf Cream — Highlight-CTA (Heroes, Vorstand)
   .btn-ghost        Transparent + Border — Sekundaer auf hellem BG
   .btn-ghost-light  Glasmorphism + Border — auf Foto-Overlays
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.6em;
  border: none;
  border-radius: 999px;
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

@media (hover: hover) {
  .btn:hover { transform: translateY(-1px); }
}

.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--color-gruen);
  color: var(--color-bone);
}
.btn-primary:hover { background: var(--color-gruen-dark); color: #fff; }

.btn-rot {
  background: var(--color-rot);
  color: var(--color-cream);
}
.btn-rot:hover { background: var(--color-rot-dark); }

.btn-ghost {
  background: transparent;
  color: var(--color-anthrazit);
  border: 1px solid currentColor;
}
.btn-ghost:hover { background: var(--color-anthrazit); color: var(--color-sand); }

.btn-ghost-light {
  background: rgba(28, 44, 44, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--color-cream);
  border: 1px solid rgba(245, 241, 230, 0.55);
}
.btn-ghost-light:hover {
  background: var(--color-cream);
  color: var(--color-anthrazit);
  border-color: var(--color-cream);
}

/* Mobile — kompaktere Buttons */
@media (max-width: 720px) {
  .btn { padding: 0.7em 1.2em; font-size: 0.85rem; }
}