/* ==========================
   🌑 Allgemeines Styling (Dark Mode)
   ========================== */
body {
    background-color: #121212;
    color: #ffffff;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

/* Navigation */
nav {
    background-color: #1f1f1f;
    padding: 10px;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 10px;
}

nav ul li a {
    color: #ffffff;
    text-decoration: none;
}

/* ==========================
   🔺 Navbar & Animation
   ========================== */
.show {
    display: block !important;
}

/* Einheitliches Design für beide Dreiecke */
.dropdown-toggle::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    background: none;
    box-shadow: none;
}

/* Navbar ausblenden */
.hidden-navbar {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
}

/* Kleine Ersatzleiste */
.small-navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    z-index: 1050;
}

/* ==========================
   ⏳ Uhrzeit & Datum
   ========================== */
.time-display {
    font-size: calc(15vw + 20px);
    font-weight: bold;
    line-height: 1.1;
}

.date-display {
    font-size: calc(7vw + 10px);
    font-weight: normal;
    line-height: 1.2;
}

/* ==========================
   🔘 Button Styling
   ========================== */
.btn-dark, .custom-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    font-size: 1.2rem;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #212529;
    border: 1px solid #aaa;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

/* Hover-Effekt für alle Buttons */
.btn-dark:hover, .custom-btn:hover {
    background: #343a40;
    border-color: #ffffff;
}

/* ==========================
   📋 Tabellen & Strukturen
   ========================== */
.table, .table-borderless {
    background-color: transparent !important;
}

.table td, .table th {
    background-color: transparent !important;
    border: none !important;
}

/* ==========================
   🏆 Alpha-Warnung (Blink-Effekt)
   ========================== */
.alpha-warning {
    color: red;
    font-weight: bold;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ==========================
   🔳 Button Grid (Responsive)
   ========================== */
/* Grid-Container für die Buttons */
.button-grid {
    width: 100%;
    max-width: none;
    padding-bottom: 20px; /* Kleiner Abstand zum unteren Rand */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Dynamische Spalten */
    gap: 10px; /* Abstand zwischen Buttons */
    align-self: flex-end; /* Sorgt dafür, dass das Grid unten bleibt */
}

/* Die Buttons sollen die gesamte Zellenbreite einnehmen */
.button-grid .custom-btn {
    width: 100%;
    box-sizing: border-box;
}

/* Kategorie-Label über den Buttons – es nimmt die ganze Zeile ein */
.category-label {
    grid-column: 1 / -1;
    text-align: center;
    margin-bottom: 10px;
    font-weight: bold;
}

/* ==========================
   Boxing Amateur spezifisches Styling
   ========================== */

/* Container */
.container-fluid {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Platz zwischen Uhrzeit/Datum und Buttons */
    align-items: center;
    min-height: 100vh; /* Ganze Bildschirmhöhe nutzen */
    padding: 20px; /* Verhindert, dass Buttons direkt am Rand kleben */
}

/* Tabelle mittig ausrichten */
.table {
    margin: 0 auto;
}

/* Vertikale Ausrichtung der Tabellenzellen */
.align-middle td {
    vertical-align: middle;
}

/* Einheitliche Breite für Buttons (aktualisiert) */
.button-equal-width {
    max-width: 120px; /* Begrenzte maximale Breite */
    width: 100%; /* Passt sich automatisch an */
    padding: 10px; /* Weniger Innenabstand */
    font-size: 1rem; /* Kleinere Schrift für bessere Lesbarkeit */
}

/* Zentrierung für den Button-Container */
#buttonsContainer {
    text-align: center;
}

/* Gemeinsames Button-Styling für alle Seiten */
.custom-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
    font-size: 1.2rem;
    text-align: center;
    text-decoration: none;
    color: #fff;
    background: #212529;
    border: 1px solid #aaa;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    width: 200px; /* Einheitliche Breite für alle Buttons */
}

/* Hover-Effekt */
.custom-btn:hover {
    background: #343a40;
    border-color: #ffffff;
}

/* FAQ-Item Style */
.faq-item {
    background-color: #343a40; /* Dunkler Hintergrund für jede Frage */
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.faq-item h5 {
    color: #f8f9fa; /* Weißer Text für Fragen */
    font-size: 1.2rem;
}

.faq-item p {
    color: #ccc; /* Hellgrauer Text für Antworten */
}

/* News Artikel */
.news-item {
    margin-bottom: 30px;
    background-color: #343a40;
    padding: 20px;
    border-radius: 5px;
}

.news-title {
    font-size: 1.5rem;
    font-weight: bold;
}

.news-date {
    font-size: 0.9rem;
    color: #bbb;
}

.news-preview {
    font-size: 1rem;
    color: #ddd;
}

.news-full-text {
    font-size: 1rem;
    color: #bbb;
    margin-top: 10px;
}

.news-full-text a {
    color: #17a2b8;
    text-decoration: none;
}

.news-full-text a:hover {
    text-decoration: underline;
}

/* Responsive Layout für News */
@media (max-width: 768px) {
    .news-item {
        margin-bottom: 20px;
    }

    .news-title {
        font-size: 1.2rem;
    }

    .news-preview {
        font-size: 0.9rem;
    }

    .news-full-text {
        font-size: 0.9rem;
    }
}

/* ==========================
   📱 Optimierung für kleine Bildschirme (z. B. Samsung A33)
   ========================== */
@media (max-width: 576px) { /* Smartphones */
    .btn-lg, .custom-btn {
        font-size: 1rem; /* Kleinere Schrift für bessere Lesbarkeit */
        padding: 12px; /* Weniger Padding für kompaktere Buttons */
        width: 100%; /* Button über gesamte Breite */
        max-width: 90%; /* Verhindert zu breite Buttons */
    }

    .table-responsive {
        overflow-x: auto; /* Falls nötig, horizontales Scrollen erlauben */
    }

    .table td {
        display: block; /* Jede Zelle untereinander */
        width: 100%; /* Volle Breite */
    }

    .container-fluid {
        padding: 10px; /* Weniger Außenabstand für mehr Platz */
    }

    /* Falls die Buttons noch nicht gut passen */
    .button-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Anpassbare Button-Größe */
    }
}

/* ==========================
   🛠 Fix für zu breite Buttons (Samsung A33 & kleine Bildschirme)
   ========================== */
@media (max-width: 768px) { /* Tablets */
    .button-equal-width {
        max-width: 110px; /* Noch etwas kleiner auf Tablets */
    }
}

@media (max-width: 576px) { /* Smartphones */
    .button-equal-width {
        max-width: 100px; /* Noch schmaler für kleine Smartphones */
        font-size: 0.9rem; /* Schriftgröße weiter reduzieren */
        padding: 8px; /* Kompaktere Buttons */
    }
}

@media (max-width: 400px) { /* Sehr kleine Smartphones */
    .button-equal-width {
        max-width: 90px; /* Letzte Reduzierung für kleinste Geräte */
        font-size: 0.85rem;
        padding: 6px;
    }
}

/* ==========================
   📱 Weitere Optimierungen für kleine Bildschirme
   ========================== */
@media (max-width: 400px) { /* Sehr kleine Smartphones */
    .btn-lg, .custom-btn {
        font-size: 0.9rem;
        padding: 10px;
    }
}

@media (max-width: 768px) { /* Tablets & kleinere Geräte */
    .button-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    }
}

@media (max-width: 576px) { /* Smartphones */
    .button-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 Spalten für noch kleinere Geräte */
    }

    .btn-lg, .custom-btn {
        font-size: 1rem; 
        padding: 12px;
        width: 100%;
        max-width: 90%;
    }
}

@media (max-width: 400px) { /* Sehr kleine Smartphones */
    .button-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 Spalte, falls der Platz nicht reicht */
    }

    .btn-lg, .custom-btn {
        font-size: 0.9rem;
        padding: 10px;
    }
}

@media (max-width: 576px) {
    /* Für die Button-Tabelle: normale Tabellenzellen beibehalten */
    #buttonsContainer table td {
         display: table-cell;
         width: auto;
    }
}