/* Globale Stile und Schriftart-Definition */
body {
    font-family: 'Inter', sans-serif;
    color: #ffffff;
}

/* Definition der Gold-Farbe als CSS-Variable */
:root {
    --gold-color: #D4AF37;
}

/* Hilfsklasse für goldene Schrift, falls Tailwind nicht verwendet wird */
.text-gold {
    color: var(--gold-color);
}

/* Styling für die Link-Buttons */
.link-button {
    display: flex;
    flex-direction: column; /* Icon und Text untereinander anordnen */
    gap: 0.5rem; /* Abstand zwischen Icon und Text */
    align-items: center;
    width: 100%;
    padding: 1rem;
    background-color: rgba(255, 255, 255, 0.05); /* Leichter transparenter Hintergrund */
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 0.75rem; /* 12px */
    font-weight: 700; /* bold */
    text-decoration: none;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px); /* Glassmorphism-Effekt */
    -webkit-backdrop-filter: blur(5px);
}

.link-button:hover {
    background-color: rgba(212, 175, 55, 0.2); /* Gold-Ton mit Transparenz */
    border-color: var(--gold-color);
    transform: scale(1.03); /* Leichter Zoom-Effekt */
}

/* Tailwind-Klassen als Direktiven (falls du später mit einem Build-Prozess arbeitest) */
@tailwind base;
@tailwind components;
@tailwind utilities;