/* ============================================================
   Globale Styles. Das eigentliche Layout passiert per Inline-
   Style in app.js (1:1 zum Design-Prototyp). Hier nur das,
   was global gelten muss.
   ============================================================ */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #fbf6ec;
  font-family: "Nunito Sans", sans-serif;
  color: #3a3530;
  -webkit-font-smoothing: antialiased;
}

/* Fokus-Zustand der Formularfelder (Koralle) */
input:focus,
textarea:focus,
select:focus {
  border-color: #e8765a !important;
}

::placeholder {
  color: #b4ab9c;
}

button {
  font-family: inherit;
}

a {
  color: #c2542f;
}

/* dezenter Lade-/Übergangszustand */
.gp-fade {
  animation: gpFade 0.25s ease;
}

@keyframes gpFade {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}