/* /assets/css/main.css */

/* Import von Tailwind CSS */
@import url('https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css');

/* Import von Google Fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800;900&display=swap');

/* Grundlegende Stile */
body {
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1.6;
    /* Futuristischer Hintergrund: Sanfter Verlauf mit subtiler Textur */
    background-image: url('https://www.transparenttextures.com/patterns/cubes.png'); /* Ein subtiler, futuristischer Würfel-Pattern */
    background-color: #0c0f1f; /* Sehr dunkles, tiefes Blau-Violett */
    color: #E0E0E0; /* Helles Grau für Text */
}

/* Allgemeine Container-Stile */
.container {
    max-width: 1200px;
}

/* Navigationslinks */
.nav-link {
    @apply text-gray-200 hover:text-blue-300 transition-colors duration-300 text-lg font-semibold;
}

.nav-link-mobile {
    @apply text-gray-100 hover:text-blue-300 transition-colors duration-300 text-xl font-semibold py-2;
}

/* Buttons */
.btn-primary {
    @apply inline-block font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-opacity-50;
    background-color: #ffe81f; /* Star Wars Gelb */
    color: #1a273b; /* Dunkles Blau-Grau als Textfarbe */
    border: 2px solid #ccb200; /* Dunklerer Gelb-Ton für den Rahmen */
    box-shadow: 0 5px 15px rgba(255, 232, 31, 0.3); /* Gelber Glow-Effekt */
}
.btn-primary:hover {
    background-color: #fffa50; /* Helleres Gelb beim Hover */
    border-color: #ffe81f;
    box-shadow: 0 8px 20px rgba(255, 232, 31, 0.5);
}
.btn-primary:focus {
    @apply ring-blue-500;
}

.btn-secondary {
    @apply inline-block font-bold py-3 px-8 rounded-full shadow-lg transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-4 focus:ring-opacity-50;
    background-color: rgba(51, 77, 102, 0.6); /* Semi-transparentes Dunkelblau-Grau */
    color: #E0E0E0;
    border: 2px solid rgba(74, 106, 138, 0.8);
    backdrop-filter: blur(5px); /* Gläserner Effekt */
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 5px 15px rgba(51, 77, 102, 0.3); /* Blauer Glow-Effekt */
}
.btn-secondary:hover {
    background-color: rgba(74, 106, 138, 0.8); /* Helleres Blau-Grau beim Hover */
    border-color: #63b3ed;
    box-shadow: 0 8px 20px rgba(74, 106, 138, 0.5);
}
.btn-secondary:focus {
    @apply ring-gray-500;
}

.btn-primary-small {
    @apply inline-block font-bold py-2 px-5 rounded-full shadow-md transition-colors duration-300;
    background-color: #ffe81f; /* Star Wars Gelb */
    color: #1a273b; /* Dunkles Blau-Grau als Textfarbe */
    border: 2px solid #ccb200; /* Dunklerer Gelb-Ton für den Rahmen */
    box-shadow: 0 3px 10px rgba(255, 232, 31, 0.2);
}
.btn-primary-small:hover {
    background-color: #fffa50; /* Helleres Gelb beim Hover */
    border-color: #ffe81f;
    box-shadow: 0 5px 12px rgba(255, 232, 31, 0.4);
}


/* Social Media Buttons */
.social-btn {
    @apply flex items-center justify-center py-4 px-8 rounded-full text-white font-bold text-xl shadow-lg transition-all duration-300 transform hover:scale-105;
    backdrop-filter: blur(8px); /* Gläserner Effekt */
    -webkit-backdrop-filter: blur(8px);
}

.discord-btn {
    background-color: rgba(88, 101, 242, 0.7); /* Discord Blau mit Transparenz */
    border: 1px solid rgba(114, 137, 218, 0.8);
    box-shadow: 0 4px 12px rgba(88, 101, 242, 0.4);
}
.discord-btn:hover {
    background-color: rgba(88, 101, 242, 0.9);
    box-shadow: 0 6px 16px rgba(88, 101, 242, 0.6);
}
.discord-btn:focus {
    @apply ring-indigo-500;
}

.tiktok-btn {
    background-color: rgba(0, 0, 0, 0.7); /* Schwarz mit Transparenz */
    border: 1px solid rgba(50, 50, 50, 0.8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.tiktok-btn:hover {
    background-color: rgba(0, 0, 0, 0.9);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6);
}
.tiktok-btn:focus {
    @apply ring-gray-700;
}

/* Animationen */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

.animate-slide-up {
    animation: slideUp 0.8s ease-out forwards;
    /* Verzögerung für gestaffelte Animationen */
    animation-delay: 0.2s;
    animation-fill-mode: backwards; /* Sorgt dafür, dass Elemente vor der Animation unsichtbar sind */
}

/* Responsive Anpassungen */
@media (min-width: 768px) {
    .animate-slide-up {
        animation-delay: 0.4s; /* Längere Verzögerung auf größeren Bildschirmen */
    }
}

/* Zusätzliche Anpassungen für Tabellen */
table {
    border-collapse: collapse;
}

th, td {
    text-align: left;
}

/* Hover-Effekte für Tabellenzeilen */
tbody tr:hover {
    background-color: rgba(74, 106, 138, 0.3); /* Leichter, transparenter Hover-Effekt */
}

/* Allgemeine Sektionsstile für abgerundete und moderne Optik */
.section-card {
    @apply p-8 rounded-2xl shadow-lg mb-12; /* Rounded-2xl für stärkere Abrundung */
    background-color: rgba(26, 39, 59, 0.7); /* Semi-transparentes Dunkelblau-Grau für Container */
    border: 1px solid rgba(51, 77, 102, 0.8); /* Rahmen wie bei Raumschiff-Panels */
    backdrop-filter: blur(10px); /* Gläserner Effekt */
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(51, 77, 102, 0.5); /* Tieferer Schatten mit blauem Glow */
}

/* Überschriften im Star Wars Stil */
h1 {
    color: #ffe81f; /* Star Wars Gelb */
    text-shadow: 0 0 10px #ffe81f, 0 0 20px #ffe81f, 0 0 30px rgba(255, 232, 31, 0.5);
}
h2 {
    color: #90cdf4; /* Heller Blau-Ton für H2 */
    text-shadow: 0 0 5px rgba(144, 205, 244, 0.5);
}
h3 {
    color: #a0aec0; /* Helles Grau für H3 */
}

/* Spezifische Anpassungen für Karten (z.B. Oberkommando, Ränge, Einheiten) */
.card-base {
    @apply p-6 rounded-xl shadow-md text-center transform transition-all duration-300 hover:scale-105 hover:shadow-xl;
    background-color: rgba(51, 77, 102, 0.6); /* Semi-transparentes Dunkleres Blau-Grau */
    border: 1px solid rgba(74, 106, 138, 0.8);
    backdrop-filter: blur(8px); /* Gläserner Effekt */
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), 0 0 15px rgba(74, 106, 138, 0.4);
}
.card-base img {
    @apply rounded-full border-4 border-blue-500 mx-auto mb-4;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.7); /* Blauer Glow für Bilder */
}

/* Spezielle Anpassungen für den Header und Footer */
header, footer {
    background-color: rgba(15, 28, 43, 0.8); /* Noch dunkleres Blau-Grau für Header/Footer mit Transparenz */
    border-bottom: 1px solid rgba(51, 77, 102, 0.8);
    backdrop-filter: blur(12px); /* Stärkerer Gläserner Effekt für Header/Footer */
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
footer {
    border-top: 1px solid rgba(51, 77, 102, 0.8);
}

/* Formularfelder im Admin-Bereich anpassen */
.form-group input[type="text"],
.form-group input[type="date"],
.form-group textarea {
    @apply shadow appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline;
    background-color: rgba(255, 255, 255, 0.1); /* Leicht transparentes Weiß */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Hellerer, subtiler Rahmen */
    color: #E0E0E0; /* Heller Text */
    transition: all 0.3s ease;
}
.form-group input[type="text"]:focus,
.form-group input[type="date"]:focus,
.form-group textarea:focus {
    background-color: rgba(255, 255, 255, 0.15); /* Etwas weniger transparent beim Fokus */
    border-color: #63b3ed; /* Blauer Fokus-Rand */
    box-shadow: 0 0 0 3px rgba(99, 179, 237, 0.5); /* Blauer Fokus-Glow */
}