/* Hero-Bereich auf der Startseite */
.hero {
  text-align: center;
  padding: 2.5rem 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0.5rem;
  background: linear-gradient(135deg, var(--md-primary-fg-color), var(--md-accent-fg-color));
  color: var(--md-primary-bg-color);
}

.hero h1 {
  color: inherit;
  margin-bottom: 0.6rem;
}

.hero p {
  font-size: 1.1rem;
  max-width: 38rem;
  margin: 0 auto 1.5rem;
  opacity: 0.92;
}

.hero .md-button {
  margin: 0.2rem;
}

.hero .md-button--primary {
  background-color: var(--md-primary-bg-color);
  color: var(--md-primary-fg-color);
  border-color: var(--md-primary-bg-color);
}

.hero .md-button:not(.md-button--primary) {
  border-color: var(--md-primary-bg-color);
  color: var(--md-primary-bg-color);
}

/* Produktkarten: Bilder etwas abheben */
.grid.cards img {
  border-radius: 0.35rem;
  margin-bottom: 0.5rem;
}