/* Berlin Excursion — brand utility classes
   This file is served as-is from /public and is never processed by Tailwind or PostCSS.
   It is loaded via a <link> tag in index.html so these classes are always available. */

.animate-in { animation-duration: 0.2s; animation-fill-mode: both; }
.fade-in { animation-name: fadeIn; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.rainbow-text            { color: hsl(var(--primary)); }
.rainbow-animated        { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.rainbow-animated-text   { color: hsl(var(--primary)); }
.rainbow-border-top      { border-top: 2px solid hsl(var(--primary)); }
.rainbow-underline       { text-decoration: underline; text-decoration-color: hsl(var(--primary)); }
.rainbow-strip           { background: hsl(var(--primary) / 0.08); }
.rainbow-animated-border { border: 1px solid hsl(var(--border)); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--radius-button, 0.375rem);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: filter 120ms ease, transform 80ms ease;
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 2px; }

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 1px 4px hsl(var(--primary) / 0.3);
}
.btn-primary:hover { filter: brightness(1.1); }

.btn-outline {
  background: transparent;
  color: hsl(var(--foreground));
  border-color: hsl(var(--border));
}
.btn-outline:hover { background: hsl(var(--muted)); }

.btn-ghost {
  background: transparent;
  color: hsl(var(--muted-foreground));
}
.btn-ghost:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

.btn-sm { padding: 0.3rem 0.75rem; font-size: 0.75rem; }

/* ── Zahlungspartner-Badges (Markenfarben – nicht im Tailwind-Palette) ── */
.pay-badge-white    { background-color: #FFFFFF; }
.pay-badge-wise     { background-color: #9FE870; }
.pay-badge-amex     { background-color: #2E77BC; }
.pay-badge-klarna   { background-color: #FFB3C7; }
.pay-badge-applepay { background-color: #000000; }