/* Ticketshop Feuerwehr Pulling – Basis-Styles.
   Das Layout steckt (originalgetreu aus dem Design) als Inline-Styles im HTML.
   Hier nur Reset, Zustands-Helfer, Keyframes und Hover, die inline nicht gehen. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #1b2529;
  background: #f4f2ee;
  -webkit-font-smoothing: antialiased;
}
a { color: #c1121c; }
a:hover { color: #8f0f16; }

/* sichtbarer Fokus für Tastatur/Barrierefreiheit */
input:focus-visible, button:focus-visible, a:focus-visible {
  outline: 3px solid #ffd500;
  outline-offset: 2px;
}

/* Zustands-Umschaltung: JS setzt/entfernt das hidden-Attribut */
[hidden] { display: none !important; }

/* Fehlerhafte Eingabefelder */
.input-error { border-color: #c1121c !important; }

/* Hover-Zustände (im Design als style-hover, hier als echtes CSS) */
.btn-cta:hover     { background: #a50f18 !important; }
.btn-paypal:hover  { background: #f0b72e !important; }
.btn-reset:hover   { background: #c1121c !important; color: #fff !important; }
.stepper-btn:hover { background: #e9e6df !important; }

@keyframes spin   { to { transform: rotate(360deg); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }