/* ========================================
   RESPONSIVE CSS FOR SIXPACK LIGA
   ========================================
   
   📱 RESPONSIVE BREAKPOINT STRUCTURE:
   
   🖥️  DESKTOP (769px and above):
   - Full-width banner with image map navigation
   - Horizontal club names grid (gap: 3px)
   - Horizontal league navigation bar
   - Large tables with full padding (10px 4px)
   - Historical data in full table format
   - Font size: 1.1em for tables
   
   📱 TABLET (480px - 768px):
   - Same banner but responsive scaling
   - Tighter club names grid (gap: 2px)
   - Stacked league navigation (flex-direction: column)
   - Medium table padding (8px 3px)
   - Historical data still in table format
   - Font size: 1.05em for tables
   
   📱 MOBILE (480px and below):
   - Mobile header with hamburger menu
   - Tightest club names grid (gap: 1px)
   - Fully vertical league navigation
   - Compact table padding (6px 2px)
   - Historical data in card format (hidden table)
   - Font size: 0.95em for tables
   
   KEY CUSTOMIZABLE VALUES:
   
   📏 LAYOUT WIDTHS:
   - max-width: 900px        → Main content maximum width (prevents too wide tables)
   - max-width: 1200px       → Clubs/League nav maximum width
   
   📊 TABLE SPACING:
   - padding: 10px 4px       → Table cell padding (vertical, horizontal)
   - line-height: 1.1        → Table row height (lower = more compact)
   - font-size: 1.1em        → Table text size
   
   🎨 COLORS:
   - #69828f                 → Main Sixpack Liga brand color
   - rgba(255,255,255,0.1)   → Semi-transparent white backgrounds
   
   
   
    🖥️ DESKTOP (769px and above):
  - SECTION 1: Base Styles (ALL screen sizes)
  - SECTION 4: Header Responsive Styles (ALL screen sizes)
  - SECTION 5: Clubs Section (ALL screen sizes)
  - SECTION 6: Main Content Layout (ALL screen sizes)
  - SECTION 9: Table Styles (ALL screen sizes)
  - SECTION 12: Historical Data Section (ALL screen sizes)

  📱 TABLET (480px - 768px):
  - All desktop sections PLUS:
  - SECTION 2: Desktop/Tablet Responsive Adjustments (768px and below)
  - SECTION 7: Tablet Specific Responsive Styles (768px and below)
  - SECTION 10: Tablet Table Responsive Styles (768px and below)
  - SECTION 13: Historical Data Tablet Responsive Styles (768px and below)

  📱 MOBILE (480px and below):
  - All desktop and tablet sections PLUS:
  - SECTION 3: Mobile Responsive Adjustments (480px and below)
  - SECTION 8: Mobile Specific Responsive Styles (480px and below)
  - SECTION 11: Mobile Table Responsive Styles (480px and below)
  - SECTION 14: Historical Data Mobile Responsive Styles (480px and below)

  🖨️ PRINT:
  - SECTION 15: Print Styles (print media only)

   ======================================== */

/* ========================================
   SECTION 1: BASE STYLES (ALL SCREEN SIZES)
   Applied to: ALL devices (desktop, tablet, mobile)
   ======================================== */

/* Reset and base styles - Ensures consistent box model */
* {
    box-sizing: border-box; /* Includes padding/border in width calculations */
}

html {
    background: #69828f !important; /* Force brand background on root element */
}

body {
    margin: 0;                      /* Removes default browser margins */
    padding: 0;                     /* Removes default browser padding */
    font-family: Arial, sans-serif; /* Sets consistent font family */
    line-height: 1.1;              /* Controls line spacing for readability */
    background: #69828f !important; /* CONSOLIDATED: Force brand background on body with !important */
}

/* Container for centering content - Controls maximum width of page content */
.container {
    max-width: 1024px;  /* Maximum width before content stops expanding */
    margin: 0 auto;     /* Centers the container horizontally */
    padding: 0 15px;    /* Adds horizontal padding for edge spacing */
}

/* Basic responsive utilities - Controls visibility on different devices */
.hidden-mobile {
    display: block;     /* Shows element on desktop/tablet */
}

.hidden-desktop {
    display: none;      /* Hides element on desktop/tablet */
}

/* ========================================
   SECTION 2: DESKTOP/TABLET RESPONSIVE ADJUSTMENTS  
   Applied to: TABLET devices (768px and below)
   ======================================== */

@media screen and (max-width: 768px) {
    .container {
        padding: 0 10px;        /* Reduced side padding for tablet */
    }
}

/* ========================================
   SECTION 3: MOBILE RESPONSIVE ADJUSTMENTS
   Applied to: MOBILE devices (480px and below)
   ======================================== */

@media screen and (max-width: 480px) {
    .container {
        padding: 0 5px;         /* Minimal side padding for mobile */
    }
    
    /* Show/hide elements based on screen size */
    .hidden-mobile {
        display: none;          /* Hide desktop elements on mobile */
    }
    
    .hidden-desktop {
        display: block;         /* Show mobile elements on mobile */
    }
    
    /* Mobile typography adjustments */
    body {
        font-size: 14px;        /* Smaller base font for mobile */
    }
    
    h1, h2, h3 {
        font-size: 1.2em;       /* Smaller headings for mobile */
        margin: 10px 0;         /* Reduced heading margins */
    }
}

/* ========================================
   SECTION 4: HEADER RESPONSIVE STYLES (ALL SCREEN SIZES)
   Applied to: ALL devices with responsive behavior
   ======================================== */

/* Main header container - Controls header background and layout */
.header-container {
    background: #69828f;    /* Sixpack Liga brand color */
    margin: 0 auto;         /* Centers header horizontally */
    max-width: 1024px;      /* Limits header width on large screens */
    padding: 0;             /* No padding around header */
}

/* Desktop header styles - Controls desktop banner display */
.header-desktop {
    text-align: center;     /* Centers the banner image */
}

.header-desktop img {
    max-width: 100%;        /* Makes banner responsive - never exceeds container */
    height: auto;           /* Maintains aspect ratio when scaling */
}

/* Mobile Header Styles - Alternative header for mobile devices */
.header-mobile {
    background: #69828f;    /* Same brand color as desktop */
    padding: 10px;          /* Adds spacing around mobile header content */
}

/* Mobile header top bar - Contains title and hamburger menu */
.mobile-header-top {
    /* display: flex;              /* Arranges items horizontally */
    justify-content: space-between; /* Pushes title left, menu button right */
    align-items: center;        /* Vertically centers items */
    padding: 5px 0;           /* Adds vertical spacing */
}

.mobile-header-top h1 {
    color: white;           /* White text for visibility on brand background */
    font-size: 2em;      /* Sets mobile title size */
    margin: 0;              /* Removes default heading margins */
}

.mobile-header-title h1 .subtitle {
    font-size: 0.5em;      /* Even smaller subtitle text */
    font-weight: normal;    /* Normal weight for subtitle */
    font-style: italic;     /* Italic subtitle */
    display: inline;        /* Keep subtitle inline with title */
}

/* Mobile header title container - Groups logo and title */
.mobile-header-title {
    display: flex;              /* Arranges logo and title horizontally */
    align-items: center;        /* Vertically centers logo and title */
    gap: 8px;                  /* Space between logo and title */
    justify-content: center;    /* Center-align the header content */
}

/* Mobile Sixpack logo - positioned left of title */
.mobile-logo {
    height: 6em;              /* Same height as title text (1.5em) */
    width: auto;                /* Maintains aspect ratio */
    object-fit: contain;        /* Ensures logo scales properly */
}

/* Swipe navigation styles */
.lmo-main-container, .lmoInner {
    position: relative;         /* Enable positioning for swipe indicators */
}

/* Visual hint for swipe capability on mobile */
@media (max-width: 768px) {
    /* Show swipe hint only on pages with st parameter */
    body .lmo-main-container::before {
        content: "Swipe";
        position: absolute;
        top: -30px;
        right: 15px;
        font-size: 0.9em;
        color: rgba(255, 255, 255, 0.8);
        z-index: 100;
        pointer-events: none;
        opacity: 1;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    }
    
    /* Alternative selectors for different LMO container structures */
   /* .lmoInner::before {
        content: "Swipe";
        position: absolute;
        top: -30px;
        right: 15px;
        font-size: 0.9em;
        color: rgba(255, 255, 255, 0.8);
        z-index: 100;
        pointer-events: none;
        opacity: 1;
        font-weight: bold;
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    } */
}

/* Hamburger menu toggle button - Controls mobile menu trigger */
.mobile-menu-toggle {
    background: none;       /* Transparent background */
    border: 2px solid white; /* White border for visibility */
    color: white;           /* White text/icon */
    font-size: 1.5em;      /* Size of hamburger icon */
    padding: 5px 10px;      /* Button padding for touch targets */
    cursor: pointer;        /* Shows it's clickable */
    border-radius: 3px;     /* Slightly rounded corners */
}

/* Mobile navigation menu - Hidden by default, shown when toggled */
.mobile-nav {
    display: none;          /* Hidden by default */
    padding-top: 10px;      /* Spacing above navigation */
}

.mobile-nav.active {
    display: block;         /* Shows when .active class is added by JavaScript */
}

/* Mobile navigation list styling */
.mobile-nav ul {
    list-style: none;       /* Removes bullet points */
    padding: 0;             /* Removes default list padding */
    margin: 0;              /* Removes default list margins */
}

.mobile-nav li {
    margin-bottom: 5px;     /* Spacing between navigation items */
}

/* Mobile navigation links - Controls appearance of menu items */
.mobile-nav a {
    display: block;                 /* Makes links full-width clickable */
    padding: 12px 15px;             /* Touch-friendly padding */
    color: white;                   /* White text for visibility */
    text-decoration: none;          /* Removes underlines */
    background: rgba(255,255,255,0.1); /* Semi-transparent background */
    border-radius: 3px;             /* Rounded corners */
    transition: background 0.3s;     /* Smooth hover animation */
}

.mobile-nav a:hover {
    background: rgba(255,255,255,0.2); /* Lighter background on hover */
}

/* ========================================
   SECTION 5: CLUBS SECTION (ALL SCREEN SIZES)
   Applied to: ALL devices - Club names banner above header
   ======================================== */

/* Main clubs section container - Appears above header banner */
.clubs-section {
    background: linear-gradient(135deg, #5a6c7a 0%, #69828f 100%); /* Gradient background */
    padding: 10px 0;                    /* Vertical spacing around clubs */
    border-bottom: 1px solid rgba(255,255,255,0.1); /* Subtle separator line */
}

/* Clubs container - Controls width and centering of club names */
.clubs-container {
    max-width: 1200px;      /* Maximum width before stopping expansion */
    margin: 0 auto;         /* Centers container horizontally */
    padding: 0 20px;        /* Horizontal padding for edge spacing */
}

/* Clubs grid layout - Controls arrangement of club names */
.clubs-grid {
    display: flex;          /* Arranges clubs in a row */
    flex-wrap: wrap;        /* Allows wrapping to next line on small screens */
    justify-content: center; /* Centers clubs horizontally */
    align-items: center;    /* Vertically aligns clubs */
    gap: 3px;              /* Space between club names (very tight) */
}

/* Individual club name styling - Controls appearance of each club badge */
.club-name {
    color: white;                       /* White text for visibility */
    font-size: 0.8em;                  /* Club name text size */
    font-weight: 500;                   /* Medium font weight */
    text-align: center;                 /* Centers text within badge */
    padding: 2px 6px;                   /* Small padding around text */
    background: rgba(255,255,255,0.1);  /* Semi-transparent background */
    border-radius: 8px;                 /* Rounded corners */
    transition: all 0.3s ease;          /* Smooth hover animation */
    cursor: default;                    /* Normal cursor (not clickable) */
    white-space: nowrap;                /* Prevents text wrapping */
}

.club-name:hover {
    background: rgba(255,255,255,0.2);  /* Lighter background on hover */
    transform: translateY(-1px);        /* Slight upward movement on hover */
}

/* League Navigation Bar */
.league-nav-bar {
    background: linear-gradient(135deg, #4a5c6a 0%, #69828f 100%);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 100;
}

.league-nav-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.league-links {
    display: flex; 
    gap: 0;
    flex-wrap: nowrap;
}

.league-link {
    display: block;
    padding: 5px 5px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 0.9em;
    transition: all 0.3s ease;
    position: relative;
    border-right: 1px solid rgba(255,255,255,0.2);
}

.league-link:last-child {
    border-right: none;
}

.league-link:hover {
    background: rgba(255,255,255,0.1);
    transform: translateY(-2px);
}

/* League specific colors - both hover and active states */
.league-link.schwarz {
    background: rgba(0,0,0,0.2);
    color: #fff;
}

.league-link.schwarz:hover,
.league-link.schwarz.active {
    background: rgba(0,0,0,0.6);
    color: #fff;
}

.league-link.rot {
    background: rgba(220,53,69,0.2);
    color: #fff;
}

.league-link.rot:hover,
.league-link.rot.active {
    background: rgba(220,53,69,0.6);
    color: #fff;
}

.league-link.gold {
    background: rgba(255,193,7,0.2);
    color: #333;
}

.league-link.gold:hover,
.league-link.gold.active {
    background: rgba(255,193,7,0.6);
    color: #333;
}

.league-link.titan {
    background: rgba(108,117,125,0.2);
    color: #fff;
}

.league-link.titan:hover,
.league-link.titan.active {
    background: rgba(108,117,125,0.6);
    color: #fff;
}

.league-link.platin {
    background: rgba(229,229,229,0.2);
    color: #333;
}

.league-link.platin:hover,
.league-link.platin.active {
    background: rgba(229,229,229,0.6);
    color: #333;
}

.league-link.pokal {
    background: rgba(40,167,69,0.2);
    color: #fff;
}

.league-link.pokal:hover,
.league-link.pokal.active {
    background: rgba(40,167,69,0.6);
    color: #fff;
}

.contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-btn {
    color: white;
    text-decoration: none;
    font-size: 1.05em;
    transition: all 0.3s ease;
}

.contact-btn:hover {
    color: #FFD700;
    text-decoration: underline;
}

/* Version Switcher Styles */
.version-switcher {
    margin-top: 5px;
    text-align: center;
}

.version-link {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255,255,255,0.15);
    color: white;
    text-decoration: none;
    border-radius: 15px;
    font-size: 0.85em;
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.3);
}

.version-link:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* ========================================
   SECTION 6: MAIN CONTENT LAYOUT (ALL SCREEN SIZES)
   Applied to: ALL devices - Primary content area and tables
   ======================================== */

/* Main content wrapper - Controls the primary content container */
.main-content-wrapper {
    display: flex;              /* Arranges content horizontally */
    justify-content: center;    /* Centers content horizontally */
    align-items: flex-start;    /* Aligns content to top */
    gap: 10px;                 /* Space between content sections */
    padding: 10px;             /* Padding around content */
    max-width: 900px;          /* LIMITS TABLE WIDTH - prevents too wide tables */
    margin: 0 auto;            /* Centers wrapper on page */
    /*background: #69828f;       /* ADDED: Sixpack Liga brand color background */
}

.main-content {
    flex: 1;
    min-width: 0;
}

.lmo-main-container {
    /* background: #69828f;                    /* CHANGED: Sixpack Liga brand color background */
    /*border-radius: 5px;*/
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.3); /* ADDED: Visible white border around main table container */
}

.lmo-header {
    text-align: center;
    padding: 10px;
    background: #5a6c7a;                    /* CHANGED: Darker shade of brand color */
    border-bottom: 1px solid rgba(255,255,255,0.2); /* CHANGED: Light border */
}

.lmo-header h1 {
    margin: 0;
    color: white;                           /* CHANGED: White text on brand background */
    font-size: 2em;
}

.lmo-newsticker {
    text-align: center;
    padding: 10px;
    /* background: #69828f;                    /* CHANGED: Main brand color */
    border-bottom: 1px solid rgba(255,255,255,0.2); /* CHANGED: Light border */
    color: white;                           /* CHANGED: White text */
}

.lmo-menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #5a6c7a;                    /* CHANGED: Darker shade of brand color */
    border-bottom: 1px solid rgba(255,255,255,0.2); /* CHANGED: Light border */
    flex-wrap: wrap;
    color: white !important;                /* ADDED: White text for all menu content */
}

.lmo-menu td:not(:has(a)) {              /* Modern browsers - td that doesn't contain any links */
    background: #28a745 ;        /* GREEN: Highlight selected Spieltag */
    color: white ;               /* WHITE: Ensure text remains visible */
    border-radius: 3px !important;         /* ROUNDED: Match link styling */
    font-weight: bold !important;          /* BOLD: Make selected item stand out */
}

.lmo-menu-left, .lmo-menu-right {
   display: flex;
   /* gap: 10px; */
    row-gap: 5px;
    flex-wrap: wrap;
}

.lmo-main-content {
    padding: 0px;
   /* min-height: 400px; */
    font-size: 1.05em;                      /* Slightly larger base font */
    /* background: #69828f;                    /* CHANGED: Sixpack Liga brand color background */
    color: white;                          /* CHANGED: White text on brand background */
}

/* AGGRESSIVE WHITE SPACE ELIMINATION - Remove all white backgrounds */
.lmo-main-content *,
.lmo-main-content table,
.lmo-main-content td,
.lmo-main-content th,
.lmo-main-content tr,
.lmo-main-content p,
.lmo-main-content div,
.lmo-main-content span,
.lmo-main-content center,
.lmo-main-content font {
   /*  background: transparent !important;     /* FORCE: All elements transparent */
   /* background-color: transparent !important;  FORCE: All background colors transparent */
    margin: 0 !important;                   /* FORCE: Remove all margins */
    padding-top: 1px !important;           /* FORCE: Minimal padding for readability */
    padding-bottom: 1px !important;        /* FORCE: Minimal padding for readability */
    border: none !important;                /* FORCE: Remove borders that might show white */
}

/* Allow LMO PHP script to control table colors - Remove forced backgrounds */
.lmo-main-content table,
.lmo-main-content table td,
.lmo-main-content table th,
.lmo-main-content table tr {
    /* background: removed - let LMO handle coloring */
    /* color: removed - let LMO handle text colors */
    padding: 0px 4px ;           /* Keep: Specific padding for table cells */
    /* border: removed - let LMO handle borders */
}

/* Force parent containers to use flexbox for proper centering */
.lmoSubmenu:before {
    content: '';
    display: block;
    clear: both;
}

/* ========================================
   LMO SUBMENU OVERRIDE - Spieltag navigation (01, 02, 03, etc.)
   ======================================== */
.lmoSubmenu {
    width: auto !important;                 /* OVERRIDE: Don't extend to full width */
    max-width: 600px !important;            /* LIMIT: Maximum width for submenu */
    margin: 0px auto !important;           /* CENTER: Use shorthand auto margins */
    background: transparent !important;     /* OVERRIDE: Remove LMO background */
    text-align: center !important;         /* FORCE: Center the entire table content */
    /* display: block ;             /* CHANGE: Use block display for auto margins */
    table-layout: auto !important;         /* FORCE: Auto table layout */
}

/* Force parent to center the submenu */
.lmoSubmenu:parent,
.lmo-main-content {
    text-align: center !important;         /* CENTER: Force parent to center children */
}

/* Alternative centering using transform */
.lmoSubmenu {
    position: relative !important;         /* POSITION: Enable transform */
    left: 50% !important;                   /* MOVE: Move 50% from left */
    transform: translateX(-50%) !important; /* CENTER: Move back by half width */
}

.lmoSubmenu tr {
    text-align: center !important;         /* FORCE: Center the table row */
}

.lmoSubmenu td {
    color: white !important;                /* FORCE: White text for all submenu items */
    text-align: center !important;         /* FORCE: Center text in cells */
    /*padding: 4px 8px !important;           /* FORCE: Compact padding for touch targets */
    background: transparent !important;     /* OVERRIDE: Remove LMO cell backgrounds */
    vertical-align: middle !important;      /* FORCE: Center content vertically */
}

.lmoSubmenu a {
    color: white !important;                /* FORCE: White text for links */
   /* text-decoration: none !important;       /* FORCE: Remove underlines */
    background: transparent !important;     /* OVERRIDE: Remove LMO link backgrounds */
    padding: 0px 0px !important;          /* FORCE: Good touch target size */
    border-radius: 3px !important;         /* FORCE: Rounded corners for modern look */
    display: inline-block !important;       /* FORCE: Better spacing control */
    width: 100% !important;                 /* FORCE: Fill the cell completely */
    text-align: center !important;         /* FORCE: Center text within links */
}

.lmoSubmenu a:hover {
    background: rgba(255,255,255,0.2) !important; /* FORCE: Subtle white hover effect */
    color: white !important;                /* FORCE: Keep white text on hover */
}

/* Selected Spieltag highlighting - target cells with plain text (no links) */
.lmoSubmenu td:not(:has(a)) {              /* Modern browsers - td that doesn't contain any links */
    background: #28a745 ;        /* GREEN: Highlight selected Spieltag */
    color: white !important;               /* WHITE: Ensure text remains visible */
    border-radius: 3px !important;         /* ROUNDED: Match link styling */
    font-weight: bold !important;          /* BOLD: Make selected item stand out */
}

/* Fallback for older browsers - target all non-link content in submenu */
.lmoSubmenu td {
    position: relative;                     /* Enable position context for pseudo-elements */
}

/* Alternative targeting for selected item - check if cell contains only text nodes */
.lmoSubmenu td:not(:empty):not(:has(a)):not(:has(span)):not(:has(div)) {
    background: #28a745 !important;        /* GREEN: Highlight selected Spieltag */
    color: white !important;               /* WHITE: Ensure text remains visible */
    border-radius: 3px !important;         /* ROUNDED: Match link styling */
    font-weight: bold !important;          /* BOLD: Make selected item stand out */
}

.lmo-main-content table {
    font-size: 1.1em;                      /* Ensure tables are larger */
    /* background: removed - let LMO handle table background */
    border-radius: 5px;                     /* Keep: Rounded corners for better appearance */
	/* white-space: nowrap; */
    /* border: removed - let LMO handle borders */
    margin: 10px 0 ;              /* Keep: Small margin for table separation */
}

.lmo-main-content table td,
.lmo-main-content table th {
    padding: 8px 4px;                     /* Reduced horizontal padding for closer columns */
    /* color: removed - let LMO handle text colors */
    /* background: removed - let LMO handle cell backgrounds */
}

.lmo-savehtml {
    text-align: center;
    padding: 10px;
    background: #5a6c7a;                    /* CHANGED: Darker brand color */
    border-top: 1px solid rgba(255,255,255,0.2); /* CHANGED: Light border */
    color: white !important;                /* FORCE: White text with !important */
}

/* Ensure all text and links in savehtml section are white */
.lmo-savehtml *,
.lmo-savehtml a,
.lmo-savehtml font,
.lmo-savehtml span {
    color: white !important;                /* FORCE: White text for all savehtml content */
}

.lmo-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    /* background: #69828f;                    /* CHANGED: Main brand color */
    border-top: 1px solid rgba(255,255,255,0.2); /* CHANGED: Light border */
    color: white;                           /* CHANGED: White text */
    font-size: .7em;                      /* ADDED: Slightly larger font size for footer links */
}

.additional-links {
    text-align: center;
    padding: 10px;
    /* background: #5a6c7a;                    /* CHANGED: Darker brand color */
    margin-top: 0px;
    border-radius: 5px;
    line-height: 1.5;
}

.additional-links a {
    color: white;                           /* CHANGED: White links for visibility */
    text-decoration: none;
    margin: 0 5px;
    padding: 5px 10px;                      /* CHANGED: Added padding for better click area */
    border-radius: 3px;                     /* CHANGED: Rounded corners */
    transition: background 0.3s ease;       /* CHANGED: Smooth hover effect */
}

.additional-links a:hover {
    background: rgba(255,255,255,0.2);      /* CHANGED: Light background on hover */
    text-decoration: none;                  /* CHANGED: No underline, use background instead */
}

/* ========================================
   SECTION 7: TABLET SPECIFIC RESPONSIVE STYLES
   Applied to: TABLET devices (768px and below)
   ======================================== */
@media screen and (max-width: 768px) {
    
    /* Header adjustments for tablet */
    .header-desktop img {
        max-width: 100%;        /* Ensures banner scales on tablets */
    }
    
    /* Main content adjustments for tablet */
    .main-content-wrapper {
        padding: 5px;          /* Reduces padding on smaller screens */
        gap: 5px;             /* Reduces gap between content sections */
    }
    
    /* Menu layout changes for tablet */
    .lmo-menu {
        flex-direction: column; /* Stacks menu items vertically */
        gap: 5px;             /* Space between stacked menu sections */
    }
    
    .lmo-menu-left, .lmo-menu-right {
        justify-content: center; /* Centers menu items */
    }
    
    /* Footer layout changes for tablet */
    .lmo-footer {
        flex-direction: column; /* Stacks footer items vertically */
        gap: 5px;             /* Space between footer sections */
        text-align: center;    /* Centers footer text */
    }
    
    /* Clubs section tablet adjustments */
    .clubs-container {
        padding: 0 15px;        /* Reduces side padding */
    }
    
    .clubs-grid {
        gap: 2px;              /* TIGHTER club spacing on tablet */
    }
    
    .club-name {
        font-size: 0.75em;     /* Smaller text for tablet */
        padding: 2px 5px;      /* Less padding around club names */
    }
    
    /* League nav tablet adjustments */
    .league-nav-container {
        padding: 0 15px;
        flex-direction: column;
        gap: 5px;
    }
    
    .league-links {
        justify-content: center;
    }
    
    .league-link {
        padding: 5px 5px;
        font-size: 0.85em;
    }
}

/* ========================================
   SECTION 8: MOBILE SPECIFIC RESPONSIVE STYLES  
   Applied to: MOBILE devices (480px and below)
   ======================================== */
@media screen and (max-width: 480px) {
    .container {
        padding: 0 5px;
    }
    
    .hidden-mobile {
        display: none;
    }
    
    .hidden-desktop {
        display: block;
    }
    
    /* Basic mobile text adjustments */
    body {
        font-size: 14px;
    }
    
    h1, h2, h3 {
        font-size: 1.2em;
        margin: 5px 0;
    }
}

/* LMO Menu and Navigation Styles */
.lmo-menu a {
    color: white !important;                   /* CHANGED: White text for menu links */
    text-decoration: none;
    padding: 5px 5px;
    border-radius: 3px;
    transition: all 0.3s ease;
    font-weight: normal;
}

.lmo-menu a:hover {
    background: rgba(255,255,255,0.2) !important; /* CHANGED: Light white background on hover */
    color: white !important;                   /* CHANGED: Keep white text on hover */
}

/* Selected/Active Spieltag and menu items - MAKES CHOSEN SPIELTAG BOLD */
.lmo-menu a.selected,
.lmo-menu a[style*="background"],
.lmo-menu font[color] a,
.lmo-menu b a,
.lmo-menu strong a {
    background: #28a745 !important;        /* CHANGED: Green background for selected item */
    color: white !important;               /* White text for contrast */
    font-weight: bold !important;          /* BOLD text for selected Spieltag */
    border-radius: 3px;                    /* Rounded corners */
    padding: 5px 5px;                      /* Padding around text */
    border: 2px solid #1e7e34 !important;  /* CHANGED: Darker green border for emphasis */
}

/* Alternative selectors for highlighted items - Covers different LMO markup patterns */
.lmo-menu font[color="#FF0000"] a,
.lmo-menu font[color="red"] a,
.lmo-menu font[color="#FF0000"],
.lmo-menu font[color="red"],
.lmo-menu b,
.lmo-menu strong {
    background: #007bff !important;        /* Blue background */
    color: white !important;               /* White text */
    font-weight: bold !important;          /* BOLD text */
    border-radius: 3px;                    /* Rounded corners */
    padding: 5px 5px;                      /* Padding around text */
    border: 2px solid #0056b3 !important;  /* Darker blue border */
    display: inline-block;                 /* Ensures proper display */
}

/* Specific styling for Spieltag numbers - Targets common LMO patterns */
.lmo-menu font[color] strong,
.lmo-menu font[color] b,
.lmo-menu span[style*="color: red"],
.lmo-menu span[style*="color:#FF0000"],
.lmo-menu a[style*="color: red"],
.lmo-menu a[style*="color:#FF0000"] {
    background: #007bff !important;        /* Blue background */
    color: white !important;               /* White text */
    font-weight: bold !important;          /* BOLD text for Spieltag */
    font-size: 1.1em !important;           /* Increased font size for Spieltag */
    border-radius: 3px;                    /* Rounded corners */
    padding: 3px 5px;                      /* Smaller padding for numbers */
    border: 2px solid #0056b3 !important;  /* Border for emphasis */
    display: inline-block;                 /* Proper display */
    text-decoration: none !important;      /* Remove underlines */
}

/* ========================================
   SECTION 9: TABLE STYLES (ALL SCREEN SIZES)
   Applied to: ALL devices - Main league tables and data
   Note: LMO PHP script controls colors, backgrounds, and borders
   ======================================== */

/* Base table styling - Controls all tables on the page */
table {
    width: 100%;                /* Tables use full container width */
    max-width: 100%;            /* Never exceed container width */
    /* border-collapse: collapse;   /* Removes spacing between borders */
    /* margin: 10px 0 ;  /* Keep: Small margins for table separation */
    font-size: 1.1em;          /* Larger text for better readability */
    /* background: removed - let LMO handle table background */
    /* border: removed - let LMO handle borders */
    border-radius: 5px;         /* Keep: Rounded corners */
}

/* Table cell styling - Controls spacing and appearance of all table data */
table td, table th {
    /*padding: 10px 4px;          /* Vertical 10px, Horizontal 4px (CLOSE COLUMNS) */
    text-align: left;           /* Left-align text in cells */
    vertical-align: top;        /* Align content to top of cell */
    word-wrap: break-word;      /* Wrap long words to prevent overflow */
    line-height: 1.1;          /* Tight line spacing for compact rows */
    /* background: removed - let LMO handle cell backgrounds */
    /* color: removed - let LMO handle text colors */
}

/* ========================================
   SECTION 10: TABLET TABLE RESPONSIVE STYLES
   Applied to: TABLET devices (768px and below) - Table adjustments
   ======================================== */
@media screen and (max-width: 768px) {
    .lmo-main-content table {
        /*display: block;*/
        width: 100%;
        overflow-x: auto;
        /* white-space: nowrap; */
        font-size: 1.05em; /* Slightly larger on tablet */
    }
    
    .lmo-main-content table td,
    .lmo-main-content table th {
        padding: 5px 3px; /* Reduced horizontal padding for closer columns */
        font-size: 1em; /* Maintain readability */
    }
}

/* ========================================
   SECTION 11: MOBILE TABLE RESPONSIVE STYLES
   Applied to: MOBILE devices (480px and below) - Table adjustments
   ======================================== */
@media screen and (max-width: 480px) {
    .lmo-main-content table {
        font-size: 0.95em; /* Larger than before for better mobile readability */
        margin: 0 !important; /* Remove any default margins */
    }
    
    .lmo-main-content table td,
    .lmo-main-content table th {
        padding: 2px 2px !important; /* Force reduced padding for tighter spacing */
        font-size: 0.9em; /* Improved mobile text size */
        line-height: 1.1; /* Tighter line height */
    }
    
    .main-content-wrapper {
        padding: 3px;
        gap: 3px;
    }
    
    .lmo-header {
        padding: 10px;
    }
    
    .lmo-header h1 {
        font-size: 1.5em;
    }
    
    .lmo-main-content {
        padding: 0px;
    }
    
    .lmo-menu {
        padding: 5px;
    }
    
    .lmo-menu-left, .lmo-menu-right {
        font-size: 0.9em;
    }
    
    .additional-links {
        padding: 6px 3px;
        font-size: 0.9em;
    }
    
    .additional-links a {
      /*  display: block; */
        margin: 2px 0;
    }
    
    /* League nav mobile adjustments */
    .league-nav-container {
        padding: 0 5px;
        flex-direction: column;
        gap: 8px;
    }
    
    .league-links {
        flex-direction: row;           /* Keep horizontal layout */
        flex-wrap: wrap;              /* Allow wrapping if needed */
        justify-content: center;       /* Center the links */
        width: 100%;
        gap: 1px;                     /* Tighter gap for mobile */
    }
    
    .league-link {
        padding: 8px 4px;             /* Smaller padding for mobile */
        font-size: 0.7em;             /* Smaller text for mobile */
        border-right: 1px solid rgba(255,255,255,0.2);
        border-bottom: none;           /* No bottom border */
        text-align: center;
        flex: 1;                      /* Equal width distribution */
        min-width: 45px;              /* Minimum width per link */
    }
    
    .league-link:last-child {
        border-right: none;           /* Remove border from last item */
    }
    
    .contact-btn {
        padding: 8px 8px;
        font-size: 0.95em;                  /* CHANGED: Increased from 0.85em for better mobile readability */
    }
    
    /* Clubs section mobile adjustments */
    .clubs-container {
        padding: 0 5px;
    }
    
    .clubs-grid {
        gap: 1px;
    }
    
    .club-name {
        font-size: 0.7em;
        padding: 1px 4px;
    }
}

/* ========================================
   SECTION 12: HISTORICAL DATA SECTION (ALL SCREEN SIZES)
   Applied to: ALL devices - Sixpack-Historie section with responsive behavior
   ======================================== */
.historical-data-section {
    margin: 20px auto;
    max-width: 1200px;
    padding: 20px;
}

.historical-data-section h2 {
    text-align: center;
    color: white !important;               /* CHANGED: White text for "Sixpack-Historie" */
    margin-bottom: 20px;
    font-size: 1.8em;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3); /* ADDED: Subtle shadow for better readability */
}

.historical-table {
    width: 100%;
    margin: 0 auto;
    background: white;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.historical-table th {
    background: #69828f;
    color: white;
    font-weight: bold;
    text-align: center;
    padding: 12px 8px;
}

.historical-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #eee;
}

.historical-table tr:hover {
    background: #f8f9fa;
}

.historical-table a {
    color: #007bff;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.3s;
}

.historical-table a:hover {
    background: #e9ecef;
    text-decoration: underline;
}

/* Mobile Historical Cards */
.historical-cards-mobile {
    display: none;
}

.season-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    margin-bottom: 15px;
    overflow: hidden;
    transition: all 0.3s;
}

.season-header {
    background: #69828f;
    color: white;
    padding: 15px;
    font-weight: bold;
    font-size: 1.1em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.season-header:hover {
    background: #5a6f7a;
}

.season-links {
    padding: 15px;
}

.link-group {
    margin-bottom: 15px;
}

.link-group:last-child {
    margin-bottom: 0;
}

.link-group h4 {
    margin: 0 0 8px 0;
    color: #333;
    font-size: 1em;
    font-weight: bold;
}

.link-group a {
    display: inline-block;
    background: #f8f9fa;
    color: #007bff;
    padding: 8px 12px;
    margin: 2px;
    border-radius: 20px;
    text-decoration: none;
    font-size: 0.9em;
    transition: all 0.3s;
    border: 1px solid #e9ecef;
}

.link-group a:hover {
    background: #007bff;
    color: white;
    transform: translateY(-1px);
}

.season-card.collapsed .season-content {
    display: none;
}

.season-card:not(.collapsed) .season-content {
    display: block;
    padding: 15px;              /* Add padding around content */
}

/* Season content link styling */
.season-content a {
    display: inline-block !important;
    background: #69828f !important;    /* Sixpack brand color background */
    color: white !important;           /* White text for visibility */
    padding: 8px 12px !important;      /* Touch-friendly padding */
    margin: 4px 3px !important;        /* Space between links */
    border-radius: 4px !important;     /* Rounded corners */
    text-decoration: none !important;  /* No underline */
    font-size: 0.9em !important;       /* Readable font size */
    font-weight: 500 !important;       /* Semi-bold for visibility */
    transition: all 0.2s ease !important;
}

.season-content a:hover {
    background: #5a6f7a !important;    /* Darker on hover */
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

.toggle-icon {
    font-size: 0.8em;
}

.older-seasons {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 5px;
    margin-top: 10px;
}

.older-seasons p {
    margin: 0 0 10px 0;
    font-weight: bold;
}

.older-seasons a {
    display: inline-block;
    background: white;
    color: #007bff;
    padding: 5px 10px;
    margin: 2px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 0.8em;
    transition: all 0.3s;
    border: 1px solid #dee2e6;
}

.older-seasons a:hover {
    background: #007bff;
    color: white;
}

/* ========================================
   SECTION 13: HISTORICAL DATA TABLET RESPONSIVE STYLES
   Applied to: TABLET devices (768px and below) - Historical data adjustments
   ======================================== */
@media screen and (max-width: 768px) {
    .historical-data-section {
        padding: 15px;
    }
    
    .historical-table-desktop {
        display: none;
    }
    
    .historical-cards-mobile {
        display: block;
    }
}

/* ========================================
   SECTION 14: HISTORICAL DATA MOBILE RESPONSIVE STYLES
   Applied to: MOBILE devices (480px and below) - Historical data adjustments
   ======================================== */
@media screen and (max-width: 480px) {
    .historical-data-section {
        padding: 10px;
    }
    
    .historical-data-section h2 {
        font-size: 1.4em;
    }
    
    /* FORCE: Show all historical table rows as cards on mobile */
    .historical-table tr {
        display: block !important;           /* FORCE: Show all table rows as blocks */
        margin-bottom: 10px !important;     /* SPACING: Add space between row cards */
        background: white !important;       /* BACKGROUND: White background for each row */
        border-radius: 8px !important;      /* ROUNDED: Card-like appearance */
        box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; /* SHADOW: Card elevation */
        padding: 15px !important;           /* PADDING: Internal spacing */
        border: 1px solid #ddd !important;  /* BORDER: Light border for definition */
    }
    
    .historical-table th {
        display: none !important;           /* HIDE: Table headers on mobile */
    }
    
    .historical-table td {
        display: block !important;          /* FORCE: Show all table cells as blocks */
        width: 100% !important;             /* FULL: Take full width */
        text-align: left !important;        /* ALIGN: Left align text */
        padding: 5px 0 !important;          /* SPACING: Vertical spacing between cells */
        border: none !important;            /* CLEAN: Remove cell borders */
        color: #333 !important;             /* TEXT: Dark text for readability */
    }
    
    /* Style specific content in historical cards */
    .historical-table td:first-child {
        font-weight: bold !important;       /* BOLD: Season/year should be prominent */
        font-size: 1.1em !important;        /* SIZE: Larger text for season */
        color: #69828f !important;          /* COLOR: Brand color for season */
        margin-bottom: 8px !important;      /* SPACE: Extra space after season */
    }
    
    .season-header {
        padding: 12px;
        font-size: 1em;
    }
    
    .season-links {
        padding: 12px;
    }
    
    /* FORCE: Show all historical seasons, disable "Weitere Saisons" collapsing */
    .historical-data-section .season-card,
    .historical-data-section [class*="season"],
    .historical-data-section [class*="jahr"],
    .historical-data-section tr {
        display: block !important;          /* FORCE: Show all season cards/rows */
        visibility: visible !important;     /* FORCE: Make all seasons visible */
        height: auto !important;            /* FORCE: Allow natural height */
        overflow: visible !important;       /* FORCE: Show all content */
    }
    
    /* Target "Weitere Saisons" more specifically */
    .historical-data-section a[onclick],
    .historical-data-section a[href*="javascript"],
    .historical-data-section span[onclick],
    .historical-data-section div[onclick] {
        display: none !important;          /* HIDE: Remove interactive collapse buttons */
    }
    
    /* Force show all seasons by targeting common LMO patterns */
    .historical-data-section a[href*="schwarz"],
    .historical-data-section a[href*="rot"], 
    .historical-data-section a[href*="gold"],
    .historical-data-section a[href*="titan"],
    .historical-data-section a[href*="platin"],
    .historical-data-section a[href*="pokal"] {
        display: inline-block !important;   /* FORCE: Show all season links */
        visibility: visible !important;     /* FORCE: Make all season links visible */
        margin: 2px !important;             /* SPACING: Small margin between links */
        padding: 4px 8px !important;        /* PADDING: Touch-friendly padding */
        background: rgba(255,255,255,0.1) !important; /* BACKGROUND: Subtle background */
        border-radius: 3px !important;      /* ROUNDED: Small rounded corners */
        color: white !important;            /* COLOR: White text */
        text-decoration: none !important;   /* CLEAN: No underlines */
    }
    
    /* Force expand any collapsed content */
    .historical-data-section .collapsed,
    .historical-data-section .hidden,
    .historical-data-section [style*="display: none"] {
        display: block !important;          /* FORCE: Show collapsed content */
        visibility: visible !important;     /* FORCE: Make visible */
    }
    
    .link-group a {
        padding: 6px 10px;
        font-size: 0.85em;
    }
}

/* ========================================
   SECTION 14.5: MOBILE HISTORY SECTION
   Applied to: Mobile view - Styling for historical season cards
   ======================================== */
@media (max-width: 768px) {
    /* Mobile History Section */
    .historical-cards-mobile {
        display: block;
        padding: 20px 10px;
    }
    
    .season-card {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 8px;
        margin-bottom: 15px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }
    
    .season-header {
        background: rgba(0, 0, 0, 0.3);
        color: white;
        padding: 12px 15px;
        font-weight: bold;
        font-size: 1.1em;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .season-content, .season-links {
        padding: 15px;
        color: white;
        background: rgba(255, 255, 255, 0.05);
    }
    
    .season-content a, .season-links a {
        color: #FFD700;
        text-decoration: none;
        margin-right: 8px;
        margin-bottom: 8px;
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        background: rgba(255, 215, 0, 0.1);
        border: 1px solid rgba(255, 215, 0, 0.3);
    }
    
    .season-content a:hover, .season-links a:hover {
        background: rgba(255, 215, 0, 0.2);
        color: #FFFF00;
    }
    
    .link-group {
        margin-bottom: 15px;
    }
    
    .link-group h4 {
        color: #FFD700;
        margin: 0 0 8px 0;
        font-size: 1em;
        font-weight: bold;
    }
    
    .older-seasons p {
        color: white;
        margin-bottom: 10px;
    }
    
    .older-seasons strong {
        color: #FFD700;
    }
    
    /* Fix for commas and text between links */
    .older-seasons {
        color: white;
    }
}

/* ========================================
   SECTION 15: PRINT STYLES
   Applied to: PRINT media - Styles for printing the page
   ======================================== */
@media print {
    .no-print {
        display: none;          /* Hide elements when printing */
    }
}