/* =========================================================
   BUTTON.CSS

   Eigene Button-Gestaltung
   Farben werden zentral aus farben.css bezogen.
   ========================================================= */

/* =========================================================
   ANCHOR BUTTON-LEISTE
   ========================================================= */

.button-leiste {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

/* =========================================================
   ANCHOR ALLGEMEINE BUTTON-GRUNDREGEL
   ========================================================= */

.button-leiste button {
  border: none;
  padding: 8px 16px;
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  border-radius: 5px;
}

/* =========================================================
   ANCHOR BUTTON-LINKS
   ========================================================= */

.button-leiste button a {
  color: inherit;
  text-decoration: none;
}

.button-leiste button a:hover {
  color: inherit;
  text-decoration: none;
}

/* =========================================================
   ANCHOR BUTTON KONTAKT
   ========================================================= */

.button-kontakt {
  background-color: var(--color-LightYellow);
  color: var(--color-schwarz);
}

.button-kontakt:hover {
  background-color: var(--color-gold);
}

/* =========================================================
   ANCHOR BUTTON IMPRESSUM
   ========================================================= */

.button-impressum {
  background-color: var(--color-limegreen);
  color: var(--color-schwarz);
}

.button-impressum:hover {
  background-color: var(--color-gruen);
  color: var(--color-white);
}

/* =========================================================
   ANCHOR BUTTON DATENSCHUTZ
   ========================================================= */

.button-datenschutz {
  background-color: var(--color-azure);
  color: var(--color-schwarz);
}

.button-datenschutz:hover {
  background-color: var(--color-hellblau);
  color: var(--color-white);
}

/* =========================================================
   ANCHOR RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {
  .button-leiste {
    width: 100%;
  }

  .button-leiste button {
    width: auto;
  }
}