/* ........................... Buttons ........................... */
button, .button {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    border: none;
    padding: var(--padding-base);
    font-size: var(--font-size-large);
    cursor: pointer;
    border-radius: var(--border-radius-small);
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

button:hover, .button:hover {
    background-color: var(--color-primary);
    box-shadow: var(--shadow) /* Leichter Schatten für mehr Tiefe */
}

button:focus, .button:focus {
    outline: none;
    box-shadow: var(--shadow) /* Leichter Schatten für mehr Tiefe */
}

button:disabled, .button:disabled {
    background-color: var(--color-secondary);
    cursor: not-allowed;
    box-shadow: none; /* Kein Schatten für deaktivierte Buttons */
}

/* ........................... Like Button for Products (e.g., Sponsoring) ........................... */
.like-button {
    background-color: transparent;
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    padding: var(--padding-base);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, box-shadow 0.3s ease;
}

.like-button:hover {
    background-color: var(--color-primary);
    color: var(--color-tertiary);
    box-shadow: var(--shadow) /* Leichter Schatten für mehr Tiefe */
}

.like-button:focus {
    outline: none;
    box-shadow: var(--shadow) /* Leichter Schatten für mehr Tiefe */
}

.likes {
    display: inline-block;
    margin-left: var(--margin-small);
    font-size: var(--font-size-large);
    color: var(--text-color);
}

/* ........................... Absende Button (Formular) ........................... */
button[type="submit"] {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

button[type="submit"]:hover {
    background-color: var(--color-hover);
    box-shadow: var(--shadow) /* Leichter Schatten für mehr Tiefe */
}