/**
 * ============================================================================
 * Datei: assets/css/custom.css
 * Projekt: Torrausch Fussball PBEM
 * Erstellt von: Wasserlasser
 * Datum: 2025-10-12
 * Letzte Änderung: 2025-10-16
 * Version: 2.0
 * ============================================================================
 * 
 * BESCHREIBUNG:
 * Custom Styling für die MLS Seite des Torrausch Fussball PBEM Projekts.
 * Diese Datei enthält alle spezifischen Styles für das MLS-Design und kann
 * für andere Ligen angepasst werden, indem die CSS-Variablen im Farbschema
 * geändert werden.
 * 
 * WICHTIG:
 * - Diese Datei basiert auf Bootstrap 5.x
 * - Alle Farben sind über CSS-Variablen anpassbar (siehe FARBSCHEMA)
 * - Responsive Breakpoints folgen Bootstrap-Standard (576px, 768px, 992px, 1200px)
 * - Icons verwenden Bootstrap Icons (bi-*)
 * 
 * ANPASSUNG FÜR ANDERE LIGEN:
 * Um das Design für eine andere Liga anzupassen, müssen nur die Werte
 * im Abschnitt "FARBSCHEMA" geändert werden. Alle anderen Styles
 * übernehmen automatisch die neuen Farben.
 * 
 * ============================================================================
 * INHALTSVERZEICHNIS
 * ============================================================================
 * 
 * 1.  FARBSCHEMA - CSS Variablen für Farben
 * 2.  ALLGEMEINE STYLES - Body, Layout, Basisformatierung
 * 3.  NAVIGATION - Navbar, Menüs, Dropdowns
 * 4.  HERO SECTION - Header-Bereich mit Gradient
 * 5.  NEWS ARTIKEL - Artikel-Cards, News-Display
 * 6.  CARDS & SIDEBARS - Allgemeine Card-Styles
 * 7.  BUTTONS - Button-Styles und Hover-Effekte
 * 8.  FOOTER - Footer-Bereich
 * 9.  UTILITY CLASSES - Hilfsklassen für Farben, Borders etc.
 * 10. SPIELPLAN - Spielplan-Tabellen und Formatierung
 * 11. LOGIN/USER - Login-Forms, User-Dropdown, Auth-Komponenten
 * 12. KALENDER - Timeline-Effekte, Event-Display
 * 13. STATISTIKEN/REKORDE - Tabellen, Rankings, Rekord-Listen
 * 14. ZEITUNG - Zeitungsartikel, Pagination
 * 15. ARCHIV - Archiv-Einträge, Saison-Übersicht
 * 16. POKAL - Pokal-Gruppen, K.O.-Runden, Turnier-Display
 * 17. TEAM LIGANEWS - Team-spezifische News-Ansicht
 * 18. GEMEINSAME KOMPONENTEN - Wiederverwendbare Basis-Styles
 * 19. RESPONSIVE - Media Queries für verschiedene Bildschirmgrößen
 * 20. PRINT STYLES - Druckoptimierte Darstellung
 * 
 * ============================================================================
 */

/* =============================================================================
   1. FARBSCHEMA - CSS VARIABLEN
   ============================================================================= 
   
   Hier die Farben für jede Liga anpassen!
   Alle Farben werden als CSS-Variablen definiert und können zentral
   geändert werden. Dies ermöglicht einfache Anpassungen für verschiedene Ligen.
   
   Verwendung: var(--primary-color) im CSS
   ============================================================================= */
:root {
    /* Hauptfarben - Für MLS */
    --primary-color: #c8102e;        /* MLS Rot - Hauptfarbe der Liga */
    --primary-dark: #a00d25;         /* Dunkleres Rot - für Hover-Effekte */
    --primary-light: #e6143a;        /* Helleres Rot - für Akzente */
    
    --secondary-color: #005da6;      /* MLS Blau - Sekundärfarbe */
    --secondary-dark: #004a85;       /* Dunkleres Blau - für Hover */
    --secondary-light: #0072ce;      /* Helleres Blau - für Akzente */
    
    /* Akzentfarben - Für besondere Hervorhebungen */
    --accent-color: #fdb913;         /* MLS Gold/Gelb - Highlight-Farbe */
    --success-color: #198754;        /* Grün - Erfolg, Bestätigung */
    --info-color: #0dcaf0;           /* Cyan - Informationen */
    --warning-color: #ffc107;        /* Gelb - Warnungen */
    --danger-color: #dc3545;         /* Rot - Fehler, Löschungen */
    
    /* Grautöne - Für Hintergründe und Borders */
    --gray-100: #f8f9fa;             /* Sehr helles Grau */
    --gray-200: #e9ecef;             /* Helles Grau */
    --gray-300: #dee2e6;             /* Mittel-helles Grau */
    --gray-600: #6c757d;             /* Mittel-dunkles Grau */
    --gray-900: #212529;             /* Sehr dunkles Grau */
    
    /* Text - Textfarben */
    --text-color: #212529;           /* Haupttextfarbe */
    --text-muted: #6c757d;           /* Gedämpfte Textfarbe für Meta-Infos */
    
    /* Hintergründe - Allgemeine Hintergrundfarben */
    --body-bg: #ffffff;              /* Hintergrund der Seite */
    --card-bg: #ffffff;              /* Hintergrund von Cards */
}

/* =============================================================================
   2. ALLGEMEINE STYLES
   ============================================================================= 
   
   Grundlegende Styles für Body, Layout und Basisformatierung.
   Diese Styles sorgen für ein konsistentes Erscheinungsbild auf der gesamten Seite.
   ============================================================================= */
body {
    min-height: 100vh;               /* Mindesthöhe = volle Viewport-Höhe */
    display: flex;                   /* Flexbox für Sticky Footer */
    flex-direction: column;          /* Vertikale Anordnung */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text-color);
    background-color: var(--body-bg);
}

main {
    flex: 1;                         /* Main-Bereich nimmt verfügbaren Platz ein */
}

/* =============================================================================
   3. NAVIGATION
   ============================================================================= 
   
   Styles für die Hauptnavigation (Navbar), Menüs und Dropdowns.
   Enthält Logo-Darstellung, Link-Styles und Hover-Effekte.
   ============================================================================= */
.navbar {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Liga-Logo in der Navigation */
.navbar-brand img.league-logo {
    height: 50px;
    width: auto;
    max-width: 50px;
    object-fit: contain;             /* Logo behält Proportionen */
}

/* Navigation Links */
.navbar .nav-link {
    color: rgba(255,255,255,0.9) !important;
    transition: color 0.2s;
}

.navbar .nav-link:hover,
.navbar .nav-link.active {
    color: var(--accent-color) !important;
}

/* Dropdown Menüs */
.navbar .dropdown-menu {
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* User Dropdown im Navbar */
.navbar .dropdown-item {
    padding: 0.6rem 1.2rem;
    transition: all 0.2s ease;
}

.navbar .dropdown-item:hover {
    background-color: var(--primary-color);
    color: white;
    padding-left: 1.5rem;            /* Slide-Effekt beim Hover */
}

.navbar .dropdown-item i {
    width: 20px;
    margin-right: 8px;
}

.navbar .dropdown-item.text-danger:hover {
    background-color: #dc3545;       /* Logout-Button spezielle Farbe */
    color: white;
}

/* Navbar User Icon */
.navbar-dark .navbar-nav .nav-link i.bi-person-circle {
    font-size: 1.2rem;
    vertical-align: middle;
    margin-right: 4px;
}

/* =============================================================================
   GRUPPIERTE NAVIGATION - DROPDOWN HEADER
   ============================================================================= 
   
   Styles für die neuen gruppierten Dropdowns mit farbigen Headern.
   Diese Styles ergänzen die bestehende Navigation.
   
   HINZUFÜGEN: Diese Styles zur bestehenden Navigation in Abschnitt 3 hinzufügen
   ============================================================================= */

/* Dropdown-Header (Kategorie-Überschriften) */
.navbar .dropdown-header {
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0.75rem 1.5rem;
    margin: 0;
    border-radius: 0;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* Dropdown-Header mit Gradient-Hintergrund */
.navbar .dropdown-header.bg-primary-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* Dropdown Items - mehr Padding für bessere Übersicht */
.navbar .dropdown-menu .dropdown-item {
    padding: 0.6rem 1.5rem;
    transition: all 0.2s ease;
}

/* Dropdown Items Hover */
.navbar .dropdown-menu .dropdown-item:hover {
    background-color: rgba(var(--primary-color), 0.1);
    color: var(--primary-color);
    padding-left: 2rem;
}

/* Aktiver Dropdown Item */
.navbar .dropdown-menu .dropdown-item.active {
    background-color: var(--primary-color);
    color: white;
}

/* Icons in Dropdown Items */
.navbar .dropdown-menu .dropdown-item i {
    width: 20px;
    margin-right: 8px;
    text-align: center;
}

/* External Link Icon (kleiner) */
.navbar .dropdown-menu .dropdown-item i.ms-1 {
    width: auto;
    margin-right: 0;
    margin-left: 4px;
    opacity: 0.6;
}

/* Dropdown Menu - etwas breiter für bessere Lesbarkeit */
.navbar .dropdown-menu {
    min-width: 220px;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Dropdown Divider */
.navbar .dropdown-divider {
    margin: 0.5rem 0;
    border-top-color: var(--gray-300);
}

/* User-Dropdown spezielles Styling */
.navbar .dropdown-menu-end .dropdown-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white !important;
}

/* Logout-Button im User-Dropdown */
.navbar .dropdown-menu .dropdown-item.text-danger:hover {
    background-color: #dc3545;
    color: white !important;
}

/* ============================================================================= 
   RESPONSIVE ANPASSUNGEN FÜR GRUPPIERTE NAVIGATION
   ============================================================================= */

/* Tablet und kleiner (max-width: 768px) */
@media (max-width: 768px) {
    /* Dropdown-Header kompakter */
    .navbar .dropdown-header {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
    
    /* Dropdown Items kompakter */
    .navbar .dropdown-menu .dropdown-item {
        padding: 0.5rem 1rem;
        font-size: 0.9rem;
    }
    
    /* Dropdown Menu schmaler */
    .navbar .dropdown-menu {
        min-width: 200px;
    }
}

/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
    /* Dropdown nimmt volle Breite ein */
    .navbar .dropdown-menu {
        width: 100%;
        min-width: 100%;
    }
    
    /* Dropdown-Header volle Breite */
    .navbar .dropdown-header {
        padding: 0.5rem 1rem;
    }
}

/* =============================================================================
   4. HERO SECTION
   ============================================================================= 
   
   Der prominente Header-Bereich oben auf den Seiten mit Gradient-Hintergrund.
   Wird für Seitentitel und wichtige Informationen verwendet.
   ============================================================================= */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    color: white;
    padding: 3rem 0;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

.hero-section h1 {
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.hero-section .lead {
    text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}

/* =============================================================================
   5. NEWS ARTIKEL
   ============================================================================= 
   
   Styles für News-Artikel und Artikel-Cards.
   Beinhaltet Card-Layout, Header, Meta-Informationen, Logos und Text-Formatierung.
   ============================================================================= */
.news-article {
    margin-bottom: 2rem;
}

.news-article .card {
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.news-article .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.news-article .card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
    padding: 1rem 1.5rem;
    color: white;
}

.news-article .card-header h2,
.news-article .card-header h3,
.news-article .card-header h4 {
    margin-bottom: 0;
    color: white;
    font-weight: 600;
}

.news-article .card-body {
    padding: 1.5rem;
}

/* News Logo/Wappen - Basis-Style für alle Artikel-Logos */
.news-logo {
    width: 100px;
    height: 100px;
    object-fit: contain;
    float: left;
    margin: 0 1.5rem 1rem 0;
    border-radius: 50%;
    background: transparent;
    padding: 0;
}

/* Fallback Logo (Icon) wenn kein Bild vorhanden */
.news-logo-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    font-size: 3rem;
    border-radius: 50%;
}

/* News Meta Info - Datum, Autor, etc. */
.news-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.news-meta i {
    margin-right: 0.25rem;
}

/* News Text Formatierung */
.news-text {
    line-height: 1.8;
}

.news-text p {
    margin-bottom: 1rem;
}

/* Überschriften in News-Texten */
.news-text h3 {
    color: var(--primary-color);
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.news-text h4 {
    color: var(--secondary-color);
    font-size: 1.25rem;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

.news-text h5 {
    color: var(--text-color);
    font-size: 1.1rem;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

/* HR Trennlinie in News */
.news-text hr {
    margin: 2rem 0;
    border: 0;
    border-top: 3px solid var(--primary-color);
    opacity: 1;
    clear: both;
}

/* Blockquotes - Zitate in Artikeln */
.news-text blockquote {
    border-left: 4px solid var(--primary-color);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--text-muted);
}

/* Bilder in News */
.news-text img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 1rem 0;
}

/* Text-Formatierung */
.news-text strong,
.news-text b {
    font-weight: 600;
}

.news-text a {
    color: var(--primary-color);
    text-decoration: underline;
}

.news-text a:hover {
    color: var(--primary-dark);
}

/* =============================================================================
   6. CARDS & SIDEBARS
   ============================================================================= 
   
   Allgemeine Card-Styles für die gesamte Seite.
   Cards werden für verschiedene Inhalts-Container verwendet.
   ============================================================================= */
.card {
    border: 1px solid var(--gray-200);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Card Header mit Farbvarianten */
.card-header.bg-primary {

    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
}

.card-header.bg-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%) !important;
}

.card-header.bg-success {
    background: linear-gradient(135deg, var(--success-color) 0%, #146c43 100%) !important;
}

/* Hover-Shadow Effect für interaktive Cards */
.hover-shadow {
    transition: transform 0.2s, box-shadow 0.2s;
}

.hover-shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* User Info Card */
.card .bi-person-circle {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
}

/* Card Shadow Varianten */
.card.shadow-sm {
    box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.075) !important;
}

.card.shadow-lg {
    animation: slideDown 0.4s ease-out;
}

/* Card-Footer Links */
.card-footer .btn {
    transition: all 0.2s ease;
}

.card-footer .btn:hover {
    transform: translateX(3px);
}

/* =============================================================================
   7. BUTTONS
   ============================================================================= 
   
   Button-Styles für alle Aktions-Buttons auf der Seite.
   Enthält Farbvarianten, Größen und Hover-Effekte.
   ============================================================================= */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border: none;
    transition: all 0.2s;
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    border: none;
}

.btn-secondary:hover {
    background: var(--secondary-dark);
}

/* Button Größen */
.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1.1rem;
    font-weight: 500;
}

/* Button Icons */
.btn i {
    margin-right: 6px;
}

/* Focus Styles für Accessibility */
.btn:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}
/* =============================================================================
   8. FOOTER
   ============================================================================= 
   
   Footer-Bereich am Ende jeder Seite.
   Enthält Links, Copyright-Informationen und weitere Meta-Daten.
   ============================================================================= */
footer {
    background-color: var(--gray-100);
    padding: 2rem 0;
    margin-top: 3rem;
    border-top: 3px solid var(--primary-color);
}

footer h5, footer h6 {
    color: var(--primary-color);
}

footer a {
    color: var(--text-color);
    transition: color 0.2s;
}

footer a:hover {
    color: var(--primary-color);
}

/* =============================================================================
   9. UTILITY CLASSES
   ============================================================================= 
   
   Hilfsklassen für schnelle Styling-Anpassungen.
   Farben, Borders und Background-Varianten.
   ============================================================================= */
.text-primary {
    color: var(--primary-color) !important;
}

.text-secondary {
    color: var(--secondary-color) !important;
}

.text-accent {
    color: var(--accent-color) !important;
}

.bg-primary-gradient {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

.border-primary {
    border-color: var(--primary-color) !important;
}

.border-secondary {
    border-color: var(--secondary-color) !important;
}

/* =============================================================================
   KOMPAKTE LIGA-LINKS - Ergänzung für custom.css
   ============================================================================= 

   Diese Styles sorgen für kompakte, platzsparende Liga-Kacheln.
   ============================================================================= */

/* Kompakte Liga-Link Kacheln */
.liga-link-compact {
    transition: all 0.2s ease;
    min-height: 80px;
}

.liga-link-compact:hover {
    transform: translateY(-2px);
    border-color: var(--primary-color) !important;
}

.liga-link-compact .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.liga-link-compact i {
    transition: transform 0.2s ease;
}

.liga-link-compact:hover i {
    transform: scale(1.1);
}

/* Responsive: Auf sehr kleinen Screens noch kompakter */
@media (max-width: 576px) {
    .liga-link-compact {
        min-height: 70px;
    }
    
    .liga-link-compact i {
        font-size: 1.25rem !important;
    }
    
    .liga-link-compact .small {
        font-size: 0.8rem !important;
    }
}

/* =============================================================================
   10. SPIELPLAN
   ============================================================================= 
   
   Styles für Spielplan-Tabellen und Match-Darstellung.
   Enthält Spieltag-Nummern, Team-Spalten, Ergebnisse und Trennlinien.
   ============================================================================= */

/* Spielplan-Tabelle Basis */
.spielplan-table {
    border-collapse: separate !important;
    border-spacing: 0;
}

/* Alternierende Spieltag-Hintergrundfarben für bessere Lesbarkeit */
.spieltag-even {
    background-color: #f8f9fa !important;
}

.spieltag-odd {
    background-color: #ffffff !important;
}

/* Eigenes Team hebt sich trotzdem ab */
.spieltag-even.table-warning,
.spieltag-odd.table-warning {
    background-color: #fff3cd !important;
}

/* Trennzeile zwischen Spieltagen */
.spieltag-separator {
    height: 12px;
    background: transparent !important;
}

.spieltag-separator:hover {
    background: transparent !important;
    cursor: default !important;
}

/* Visueller Divider zwischen Spieltagen */
.spieltag-divider {
    height: 6px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #0d6efd 10%, 
        #0d6efd 90%, 
        transparent 100%
    );
    margin: 3px 0;
    border-radius: 3px;
}

/* Spieltag-Nummer Spalte */
.spieltag-number {
    background-color: #e9ecef !important;
    border-right: 3px solid #0d6efd !important;
    width: 85px;
    min-width: 85px;
    vertical-align: middle !important;
}

/* Spieltag Badge Design */
.spieltag-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 8px;
}

.spieltag-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: #6c757d;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.spieltag-num {
    font-size: 1.8rem;
    font-weight: bold;
    color: #0d6efd;
    line-height: 1;
}

/* Match Team Spalten */
.match-team-home {
    width: 38%;
    padding: 12px 15px !important;
}

.match-team-away {
    width: 38%;
    padding: 12px 15px !important;
}

/* Ergebnis Spalte */
.match-result {
    width: 24%;
    padding: 12px !important;
    font-size: 1.1rem;
}

.result-score {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.result-separator {
    color: #6c757d;
    font-weight: normal;
}

.result-pending {
    font-size: 1rem;
}

/* Hover-Effekt für Spiel-Zeilen */
.spielplan-table tbody tr:hover:not(.spieltag-separator) {
    background-color: #e7f1ff !important;
    cursor: default;
}

.spielplan-table tbody tr.table-warning:hover {
    background-color: #ffe69c !important;
}

/* Bessere Abstände innerhalb der Spieltage */
.spielplan-table tbody tr td {
    border-top: 1px solid #e9ecef;
}

/* Erster Spieltag braucht keinen oberen Border */
.spielplan-table tbody tr:first-child td {
    border-top: none;
}

/* ZAT-Header Text (im Card-Header) */
.card-header.bg-secondary h3,
.card-header.bg-success h3 {
    color: white;
}

/* =============================================================================
   11. LOGIN/USER KOMPONENTEN
   ============================================================================= 
   
   Styles für Login-Formulare, User-Bereiche und Authentifizierungs-Elemente.
   ============================================================================= */

/* Login Form Styling */
.form-control-lg {
    padding: 0.75rem 1rem;
    font-size: 1.1rem;
}

.form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.25rem rgba(200, 16, 46, 0.25);
}

/* Remember Me Checkbox */
.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-label {
    cursor: pointer;
    user-select: none;
}

.form-check-input:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Alert Styling für Login */
.alert-dismissible {
    padding-right: 3rem;
}

.alert-dismissible .btn-close {
    padding: 0.75rem;
}

/* User Info Alert */
.alert-info {
    background-color: #e7f3ff;
    border-color: #bee5eb;
    color: #004085;
}

.alert-info i {
    margin-right: 6px;
}

/* Login Card Animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =============================================================================
   12. KALENDER - TIMELINE EFFEKTE
   ============================================================================= 
   
   Styles für Kalender-Ansicht und Timeline-basierte Event-Darstellung.
   ============================================================================= */

/* Timeline Cards */
.timeline-card {
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.timeline-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Verbesserte Listen-Items */
.list-group-item-action {
    transition: all 0.2s;
}

.list-group-item-action:hover {
    transform: translateX(5px);
}

/* =============================================================================
   13. STATISTIKEN / REKORDE
   ============================================================================= 
   
   Styles für Statistik-Tabellen, Rankings und Rekord-Listen.
   Enthält Tabellen-Formatierung, Hover-Effekte und Hervorhebungen.
   ============================================================================= */

/* Rekord-Tabellen Styling */
.table thead th {
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6;
}

/* Alternative: Gradient für Tabellen-Header */
.table thead.table-dark th {
    background: linear-gradient(135deg, #343a40 0%, #495057 100%);
    color: #fff;
}

/* Falls in <thead> Links stehen */
.table thead.table-dark th a {
    color: inherit;
    text-decoration: none;
}

.table thead.table-dark th a:hover {
    text-decoration: underline;
}

/* Zebra-Streifen für bessere Lesbarkeit */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Hover-Effekt für Tabellen */
.table-hover tbody tr:hover {
    background-color: rgba(13, 110, 253, 0.05);
}

/* Eigenes Team hervorheben (table-warning) */
.table .table-warning {
    background-color: #fff3cd !important;
    font-weight: 500;
}

.table .table-warning:hover {
    background-color: #ffec9e !important;
}

/* Rekord-Werte rechtsbündig und fett */
.table td.text-end,
.table th.text-end {
    font-weight: 600;
}

/* Saison-Spalte bei "Alle Saisons" */
.table td[rowspan] {
    vertical-align: middle;
    background-color: #f8f9fa;
    font-weight: 600;
}

/* Kleinere Tabellen für Rekorde */
.table-sm td,
.table-sm th {
    padding: 0.5rem;
    font-size: 0.9rem;
}

/* Rekord-Überschriften (h3/h6) */
h3.h6 {
    color: #495057;
    font-weight: 600;
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e9ecef;
}

/* Card-Abstände bei Rekorden */
.card.mb-3 {
    transition: box-shadow 0.2s ease;
}

.card.mb-3:hover {
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1) !important;
}

/* Platz-Spalte zentriert und grau */
.table .text-center {
    color: #6c757d;
}

/* Statistik-Tabellen - kompakter */
.stats-table {
    margin-bottom: 2rem;
}

.stats-table h3 {
    font-size: 1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.75rem;
}

/* Leere Rekorde - dezenter */
.table tbody tr td em {
    color: #adb5bd;
    font-style: italic;
}

/* =============================================================================
   14. ZEITUNG / ZEITUNGSARTIKEL
   ============================================================================= 
   
   Styles für die Zeitungs-Sektion mit Artikeln, Pagination und Filterung.
   ============================================================================= */

/* Artikel-Card */
.article-card {
    border-left: 4px solid var(--primary-color);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease;
}

.article-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}

.article-card .card-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

/* Artikel-Text Styling */
.article-text {
    line-height: 1.8;
    font-size: 1rem;
}

.article-text p {
    margin-bottom: 1rem;
}

.article-text h1,
.article-text h2,
.article-text h3,
.article-text h4 {
    color: var(--primary-color);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    font-weight: 600;
}

.article-text blockquote {
    border-left: 4px solid var(--accent-color);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
    color: #6c757d;
}

/* News-Logo im Artikel */
.article-card .news-logo {
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 1.5rem 1rem 0;
    background: transparent;
    border-radius: 50%;
    object-fit: contain;
}

/* Clearfix für floating news-logo */
.article-card .card-body::after {
    content: "";
    display: table;
    clear: both;
}

/* TK-Bonus Alerts */
.article-card .alert {
    border-radius: 0.25rem;
    padding: 0.75rem 1rem;
}

.article-card .alert-success {
    background-color: #d1e7dd;
    border-color: #badbcc;
    color: #0f5132;
}

.article-card .alert-warning {
    background-color: #fff3cd;
    border-color: #ffecb5;
    color: #664d03;
}

/* TK-Bonus Icons */
.article-card .alert i.bi-star {
    font-size: 1.1rem;
    vertical-align: middle;
}

/* Meta-Informationen */
.article-card .card-body small {
    font-size: 0.875rem;
}

.article-meta .row {
    align-items: center;
}

.article-meta .col-md-6 small {
    display: inline-block;
}

/* Pagination Styling */
.pagination {
    margin-bottom: 1rem;
}

.pagination .page-link {
    color: var(--primary-color);
    border-color: #dee2e6;
    padding: 0.5rem 0.75rem;
}

.pagination .page-link:hover {
    background-color: var(--gray-100);
    border-color: var(--primary-color);
    color: var(--primary-dark);
}

.pagination .page-item.active .page-link {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
}

/* Pagination - Zusätzliche Styles für Team-View */
nav[aria-label="Artikel-Navigation"] .text-muted {
    font-size: 0.9rem;
}

/* Artikel pro Seite Auswahl */
.btn-group .btn-outline-secondary {
    border-color: #dee2e6;
    color: #495057;
}

.btn-group .btn-outline-secondary:hover:not(.disabled):not(.active) {
    background-color: var(--gray-100);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.btn-group .btn-outline-secondary.active {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.btn-group .btn-outline-secondary.disabled {
    background-color: var(--gray-200);
    border-color: #dee2e6;
    color: #6c757d;
}

/* Button Group - Artikel pro Seite */
.btn-group .btn-outline-primary {
    transition: all 0.2s ease;
}

.btn-group .btn-outline-primary:not(.active):hover {
    background-color: rgba(13, 110, 253, 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Leere Zeitung */
.card .bi-inbox {
    opacity: 0.3;
}

/* Alert Info für "Keine Artikel" */
.alert-info .bi-info-circle {
    font-size: 1.2rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}
/* =============================================================================
   15. ARCHIV
   ============================================================================= 
   
   Styles für die Archiv-Sektion mit älteren Saisonen und historischen Daten.
   Enthält Archiv-Einträge, Logos und Saison-Übersichten.
   ============================================================================= */

/* Archiv Eintrag */
.archive-entry {
    padding: 0.5rem 0;
}

/* Archiv Logo */
.archive-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 50%;
    background: transparent;
    padding: 5px;
}

/* Fallback Logo (wenn kein Bild) */
.archive-logo-fallback {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    font-size: 2.5rem;
    border-radius: 50%;
}

/* Archive Entry Hover */
.archive-entry:hover .archive-logo {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

/* Button Groups */
.archive-entry .btn-group {
    flex-wrap: wrap;
    gap: 0.25rem;
}

/* Trennlinien */
.archive-entry hr {
    border-top: 1px solid var(--gray-300);
    opacity: 0.5;
}

/* =============================================================================
   16. POKAL
   ============================================================================= 
   
   Styles für Pokal-Wettbewerbe, Gruppen, K.O.-Runden und Turnier-Darstellung.
   ============================================================================= */

/* Pokal-Gruppen Cards */
.card .card-header h5 {
    font-size: 1rem;
    font-weight: 600;
}

/* Gruppen-Tabellen */
.card .table-sm {
    font-size: 0.9rem;
}

.card .table-sm th {
    background-color: #f8f9fa;
    font-weight: 600;
    font-size: 0.85rem;
}

/* K.O.-Runden Tabelle */
.table .text-muted {
    font-size: 0.85rem;
}

/* Spielplan - ZAT-Überschriften */
.table-secondary th {
    font-weight: 600;
}

.table-secondary .badge {
    font-size: 0.75rem;
    padding: 0.35em 0.65em;
}

/* Spielplan - Spieltag-Nummer */
.table td.bg-light {
    background-color: #f8f9fa !important;
    border-right: 3px solid #0d6efd;
}

/* Spielplan - Trennlinie zwischen Spieltagen */
.table tr.border-top.border-2 {
    border-top-color: #0d6efd !important;
}

/* K.O.-Platz Icon */
.bi-arrow-down-circle-fill {
    font-size: 1.1rem;
}

/* Gewinner-Icon */
.bi-check-circle-fill {
    font-size: 1rem;
    margin-right: 0.25rem;
}

/* NMR (No Move Received) - Rote Zahlen */
.text-danger {
    font-weight: 600;
}

/* Pokal-Trophäe Icon */
.bi-trophy-fill,
.bi-trophy {
    font-size: 1.2rem;
}

/* Form-Selects im Pokal */
.form-select {
    cursor: pointer;
}

.form-select:focus {
    border-color: #0d6efd;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Alert-Boxen im Pokal */
.alert .bi {
    font-size: 1.1rem;
    margin-right: 0.5rem;
}

/* Setzen-Button neben Rundenname */
.card-header .btn-success {
    font-size: 0.875rem;
}

/* Spacing für Icons */
.bi {
    margin-right: 0.25rem;
}

/* K.O.-Runden - TK in Klammern */
.table td span.text-muted {
    font-size: 0.85rem;
    white-space: nowrap;
}

/* =============================================================================
   TIMELINE STYLING
   ============================================================================= 
   
   Vertikale Timeline mit Verbindungslinien und Markern.
   Aktueller Trainer wird grün hervorgehoben.
   ============================================================================= */

/* Timeline Container */
.timeline {
    position: relative;
    padding: 0;
}

/* Timeline Item (Ein Trainer-Eintrag) */
.timeline-item {
    position: relative;
    padding-left: 50px;      /* Platz für Marker + Linie */
    padding-bottom: 30px;    /* Abstand zum nächsten Item */
}

/* Letztes Item braucht keinen unteren Abstand */
.timeline-item:last-child {
    padding-bottom: 0;
}

/* =============================================================================
   VERBINDUNGSLINIE ZWISCHEN ITEMS
   ============================================================================= */
/* Vertikale Linie zwischen Trainern */
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px;              /* Zentriert unter Marker */
    top: 30px;               /* Startet unter Marker */
    bottom: -10px;           /* Geht bis zum nächsten Item */
    width: 2px;              /* Dünne Linie */
    background: #dee2e6;     /* Graue Linie (Standard) */
}

/* Aktueller Trainer: Grüne Linie */
.timeline-item.timeline-current:not(:last-child)::before {
    background: #198754;
}

/* =============================================================================
   TIMELINE MARKER (KREISE)
   ============================================================================= */
/* Kreisförmiger Marker mit Icon */
.timeline-marker {
    position: absolute;
    left: 0;
    top: 5px;
    width: 30px;
    height: 30px;
    background: white;
    border: 2px solid #dee2e6;
    border-radius: 50%;      /* Kreis */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    z-index: 1;              /* Über der Linie */
}

/* Aktueller Trainer: Grüner Marker */
.timeline-current .timeline-marker {
    border-color: #198754;   /* Grüner Rand */
    background: #d1e7dd;     /* Hellgrüner Hintergrund */
}

/* =============================================================================
   TIMELINE CONTENT (TEXT-BOX RECHTS VOM MARKER)
   ============================================================================= */
.timeline-content {
    background: #f8f9fa;     /* Hellgrauer Hintergrund */
    padding: 15px;
    border-radius: 8px;
    border-left: 3px solid #dee2e6;  /* Graue linke Kante */
}

/* Aktueller Trainer: Grüne Content-Box */
.timeline-current .timeline-content {
    border-left-color: #198754;  /* Grüne Kante */
    background: #d1e7dd;         /* Hellgrüner Hintergrund */
}

/* =============================================================================
   HOVER-EFFEKT
   ============================================================================= */
/* Sanfter Hover-Effekt auf Items */
.timeline-item:hover .timeline-content {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transform: translateX(2px);
    transition: all 0.2s ease;
}

/* =============================================================================
   18. GEMEINSAME KOMPONENTEN
   ============================================================================= 
   
   Wiederverwendbare Basis-Styles, die von mehreren Bereichen genutzt werden.
   Diese Styles reduzieren Code-Duplikation und sorgen für Konsistenz.
   ============================================================================= */

/* Clearfix für floating Elemente (News-Logos, etc.) */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Tabellen-Links - Einheitliches Styling für alle Tabellen */
.table a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.table a:hover {
    color: #0d6efd;
    text-decoration: none;
}

/* =============================================================================
   19. RESPONSIVE - MEDIA QUERIES
   ============================================================================= 
   
   Anpassungen für verschiedene Bildschirmgrößen.
   Breakpoints: 576px (Mobile), 768px (Tablet), 992px (Desktop), 1200px (Large)
   ============================================================================= */

/* Tablet und kleiner (max-width: 768px) */
@media (max-width: 768px) {
    /* Navigation */
    .navbar-brand {
        font-size: 1.2rem;
    }
    
    .navbar-brand img.league-logo {
        height: 40px;
        max-width: 40px;
    }
    
    /* Hero Section */
    .hero-section {
        padding: 2rem 0;
    }
    
    .hero-section h1 {
        font-size: 2rem;
    }
    
    /* News/Artikel Logos */
    .news-logo,
    .article-card .news-logo {
        width: 80px;
        height: 80px;
        margin: 0 1rem 0.5rem 0;
    }
    
    .archive-logo,
    .archive-logo-fallback {
        width: 60px;
        height: 60px;
        font-size: 2rem;
    }
    
    /* Login Forms */
    .form-control-lg {
        font-size: 1rem;
        padding: 0.65rem 0.85rem;
    }
    
    .btn-lg {
        font-size: 1rem;
        padding: 0.65rem 1.25rem;
    }
    
    .card-body.p-4 {
        padding: 1.5rem !important;
    }
    
    /* Kalender */
    .timeline-card .card-header h5 {
        font-size: 1rem;
    }
    
    .timeline-card .badge {
        font-size: 0.7rem;
    }
    
    /* Statistiken */
    .table-sm {
        font-size: 0.85rem;
    }
    
    .table-sm td,
    .table-sm th {
        padding: 0.35rem;
    }
    
    /* Zeitung/Artikel */
    .article-card .card-header h5 {
        font-size: 1rem;
    }
    
    .article-text {
        font-size: 0.95rem;
    }
    
    .pagination .page-link {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
    
    /* Archiv */
    .archive-entry h5 {
        font-size: 1rem;
    }
    
    .archive-entry p {
        font-size: 0.9rem;
    }
    
    .btn-group-sm .btn {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }
    
    /* Pokal - Gruppen nebeneinander auf Tablet zu 1 Spalte */
    .row > [class*="col-"] {
        margin-bottom: 1rem;
    }
    
    /* ZAT-Auswahl Form */
    .row.g-3 > .col-md-2 {
        margin-top: 0.5rem;
    }
    
    /* Spielplan-Tabelle scrollbar */
    .table-responsive {
        overflow-x: auto;
    }
    
    /* Spielplan */
    .spieltag-number {
        width: 65px;
        min-width: 65px;
        border-right: 2px solid #0d6efd !important;
    }
    
    .spieltag-badge {
        padding: 6px 4px;
    }
    
    .spieltag-label {
        font-size: 0.6rem;
    }
    
    .spieltag-num {
        font-size: 1.4rem;
    }
    
    .match-team-home,
    .match-team-away {
        font-size: 0.9rem;
        padding: 10px 12px !important;
    }
    
    .match-result {
        font-size: 1rem;
        padding: 10px !important;
    }
    
    .spieltag-divider {
        height: 4px;
    }
}

/* Mobile (max-width: 576px) */
@media (max-width: 576px) {
    /* Spielplan */
    .spieltag-label {
        display: none; /* "Spieltag" Text verstecken */
    }
    
    .spieltag-num {
        font-size: 1.5rem;
    }
    
    .spieltag-number {
        width: 55px;
        min-width: 55px;
    }
    
    /* Archiv */
    .archive-logo,
    .archive-logo-fallback {
        width: 50px;
        height: 50px;
        font-size: 1.5rem;
    }
    
    .btn-group {
        flex-direction: column;
        width: 100%;
    }
    
    .btn-group .btn {
        width: 100%;
        margin-bottom: 0.25rem;
        border-radius: 0.25rem !important;
    }
    
    /* Zeitung/Artikel */
    .article-card {
        border-left-width: 3px;
    }
    
    .article-card .news-logo {
        float: none;
        display: block;
        margin: 0 auto 1rem auto;
    }
    
    /* Pagination - Mobile kompakter */
    nav[aria-label="Artikel-Navigation"] .pagination .page-item:not(.active):not(:first-child):not(:last-child) {
        display: none;
    }
    
    nav[aria-label="Artikel-Navigation"] .pagination .page-item.disabled {
        display: none;
    }
}

/* =============================================================================
   20. PRINT STYLES
   ============================================================================= 
   
   Optimierte Darstellung für den Druck.
   Entfernt Navigation, Footer und interaktive Elemente.
   ============================================================================= */
@media print {
    .navbar,
    footer,
    .btn,
    .card-header .btn {
        display: none !important;
    }
    
    .card {
        border: 1px solid #000;
        box-shadow: none;
    }
    
    .news-text h3 {
        color: #000 !important;
    }
}

/* =============================================================================
   ENDE DER DATEI
   ============================================================================= 
   
   Letzte Änderung: 2025-10-16
   Version: 2.0
   
   Bei Fragen oder Problemen wende dich an: Wasserlasser
   
   ============================================================================= */