/* ============================================
   CSS VARIABLEN - ZENTRALE KONFIGURATION
   Alle wichtigen Werte an einer Stelle
   ============================================ */
:root {
    /* === LAYOUT DIMENSIONEN === */
    --header-height-desktop: 90px;
    --header-height-mobile: 70px;
    --bottom-nav-height: 50px;
    --menu-height-desktop: 130px;
    --menu-height-mobile: 110px;
    
    /* === FARBEN - Primär === */
    --color-primary: #87fc74;
    --color-primary-dark: #5fd44d;
    --color-primary-rgb: 135, 252, 116;
    
    /* === FARBEN - Hintergründe === */
    --color-bg-body: #171717;
    --color-bg-container: #000000;
    --color-bg-card: #1a1a1a;
    --color-bg-card-hover: #252525;
    --color-bg-glassmorphism: rgba(10, 10, 10, 0.95);
    
    /* === FARBEN - Text === */
    --color-text-primary: #ffffff;
    --color-text-secondary: #cccccc;
    --color-text-muted: #888888;
    
    /* === FARBEN - Borders === */
    --color-border-light: rgba(255, 255, 255, 0.08);
    --color-border-primary: rgba(135, 252, 116, 0.3);
    
    /* === TYPOGRAFIE === */
    --font-primary: 'Exo 2', sans-serif;
    --font-heading: 'Russo One', sans-serif;
    
    /* === ABSTÄNDE === */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    
    /* === ANIMATIONEN === */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s ease;
    
    /* === Z-INDEX SKALA === */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 900;
    --z-modal-backdrop: 990;
    --z-modal: 1000;
    --z-header: 9999;
    
    /* === BORDER RADIUS === */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;
    --radius-round: 50%;
}

/* Google Fonts Integration */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* === GLOBALE STYLES === */
html {
    height: 100%;
    overflow-x: hidden;
}

body {
    font-family: var(--font-primary);
    background-color: var(--color-bg-body);
    color: var(--color-text-primary);
    margin: 0;
    padding: 0;
    min-height: 100%;
    overflow-x: hidden;
}

/* Container - Flexbox Layout */
.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-bg-container);
}

/* Headers verwenden Russo One */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

/* === GLASMORPHISM PATTERN - ZENTRALE DEFINITION === */
/* Moderner Frosted Glass Look für Header und Navigation */
.glasmorphism-pattern {
    background: var(--color-bg-glassmorphism);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-border-light);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
    position: relative;
}

/* Subtiler Glanz-Effekt */
.glasmorphism-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.06),
            transparent);
    pointer-events: none;
}

/* Sticky Header - MIT GLASMORPHISM */
/* HINWEIS: Finale Position/Größe wird in den Media Queries am Ende der Datei gesetzt */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: var(--spacing-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: var(--z-header);
    height: var(--header-height-desktop);
    box-sizing: border-box;
    flex-shrink: 0;

    /* Glasmorphism Design - Dunkler */
    background: var(--color-bg-glassmorphism);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--color-border-light);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

/* Subtiler Glanz-Effekt für Header */
.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to bottom,
            rgba(255, 255, 255, 0.06),
            transparent);
    pointer-events: none;
    z-index: 1;
}

/* HEADER ANPASSUNGEN FÜR TEAM/SPIELER SEITEN */
/* Logo links positioniert, aber gleiche Größe wie Hauptseite */
.header .header-left {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* Links ausrichten */
}

/* Titel zentriert, aber Platz für links positioniertes Logo */
.header .header-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 60%;
    /* Begrenzt Breite damit Logo und Rechts-Icons Platz haben */
    text-align: center;
}

/* Such-Container und Profile Icon rechts */
.header .header-right {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Header Elemente */
.header-left,
.header-center,
.header-right {
    position: relative;
    z-index: 2;
}

/* Logo mit 3D-Hervorhebung */
.logo-container img {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 8px rgba(255, 255, 255, 0.1));
    transition: all 0.3s ease;
}

.logo-container img:hover {
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
    transform: translateY(-2px);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* ===== PROFILE ICON ===== */
.profile-icon {
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 50%;
}

.profile-icon:hover {
    transform: scale(1.1);
    filter: brightness(1.2);
}

/* ===== HAMBURGER MENU BUTTON ===== */
.hamburger-menu {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 1001;
    transition: all 0.3s ease;
    border-radius: 8px;
}

.hamburger-line {
    width: 25px;
    height: 3px;
    background: #ffffff;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Grünes Aufleuchten beim Klick - keine X-Animation mehr */
.hamburger-menu:active {
    background: rgba(135, 252, 116, 0.2);
    box-shadow: 0 0 15px rgba(135, 252, 116, 0.4);
}

/* ===== SEARCH FIELD ===== */
#searchField {
    display: none;
    background: transparent;
    border: none;
    color: white;
    font-size: 24px;
    font-family: 'Russo One', sans-serif;
    text-align: center;
    outline: none;
    width: 100%;
    padding: 10px;
}

/* ===== PROFILE & SEARCH ICONS - Grünes Aufleuchten ===== */
.profile-icon,
.search-icon {
    transition: all 0.3s ease;
    border-radius: 8px;
    padding: 4px;
}

.profile-icon:active,
.search-icon:active {
    background: rgba(135, 252, 116, 0.2);
    box-shadow: 0 0 15px rgba(135, 252, 116, 0.4);
}

/* ===== FAVORITE BUTTON ===== */
.favorite-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.favorite-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.favorite-btn:active {
    background: rgba(135, 252, 116, 0.2);
    box-shadow: 0 0 15px rgba(135, 252, 116, 0.4);
}

.favorite-star {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    transition: all 0.3s ease;
}

.favorite-star.active {
    fill: #87FC74;
    stroke: #87FC74;
    filter: drop-shadow(0 0 8px rgba(135, 252, 116, 0.6));
}

.favorite-star:hover {
    transform: scale(1.1);
}

/* ===== FAVORITE TOAST NOTIFICATION ===== */
.favorite-toast {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-20px);
    background: rgba(30, 30, 30, 0.95);
    border: 1px solid #87FC74;
    border-radius: 12px;
    padding: 12px 20px;
    color: #fff;
    font-family: 'Russo One', sans-serif;
    font-size: 14px;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 15px rgba(135, 252, 116, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
}

.favorite-toast.show {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.favorite-toast .toast-star {
    width: 20px;
    height: 20px;
    fill: #87FC74;
}

.favorite-toast.removed .toast-star {
    fill: none;
    stroke: #fff;
    stroke-width: 2;
}

/* ===== LEGAL DROPDOWN MENU ===== */
.legal-menu {
    max-height: 0;
    overflow: hidden;
    background: rgba(15, 15, 15, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 2px solid rgba(135, 252, 116, 0);
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.4s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0);
    margin: 0;
    position: sticky;
    top: 90px;
    /* Höhe des Headers */
    z-index: 999;
}

.legal-menu.active {
    max-height: 200px;
    border-color: #87fc74;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.legal-menu-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 15px;
}

.legal-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 10px;
    color: #fff;
    text-decoration: none;
    font-family: 'Russo One', sans-serif;
    font-size: 14px;
    background: transparent;
    border: 2px solid rgba(135, 252, 116, 0.2);
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
    text-align: center;
}

.legal-menu-item:hover {
    background: rgba(135, 252, 116, 0.1);
    border-color: #87fc74;
    transform: translateY(-2px);
}

.legal-menu-item.active {
    background: rgba(135, 252, 116, 0.15);
    border-color: #87fc74;
}

.legal-icon {
    display: none;
    /* Emojis ausblenden */
}

.legal-text {
    white-space: nowrap;
}

/* Mobile: 2 Reihen mit je 3 Spalten */
@media (max-width: 768px) {
    .legal-menu {
        position: fixed;
        top: 90px;
        left: 0;
        right: 0;
        z-index: 998;
        margin: 0;
        margin-top: -90px;
        /* Kompensiert das container padding-top */
        border-top: none;
    }

    .legal-menu.active {
        max-height: 250px;
    }

    /* Platzhalter für den Content-Push wenn Menü aktiv ist */
    .legal-menu.active~* {
        margin-top: 250px;
        transition: margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .legal-menu:not(.active)~* {
        margin-top: 0;
        transition: margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .legal-menu-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        padding: 15px;
        padding-top: 15px;
        margin: 0;
    }

    .legal-menu-item {
        padding: 12px 8px;
        font-size: 12px;
    }
}

.header-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.site-title {
    font-family: 'Russo One', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    margin: 0;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    /* 3D Text-Effekt */
    text-shadow:
        2px 2px 4px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(255, 255, 255, 0.1);
    letter-spacing: 1px;
}

/* Auto-resize for very long team names */
.site-title:has-text {
    font-size: clamp(1.2rem, 4vw, 2rem);
}

/* Weiße Überschrift für Team und Spieler Seiten */
.site-title.white {
    color: #ffffff;
}

.site-title.white:hover {
    color: #cccccc;
}

/* Hover-Effekt entfernt - soll auf keiner Seite funktionieren */
/* .header-center .site-title:hover {
    color: #cccccc;
    transform: scale(1.05);
    transition: all 0.3s ease;
} */

.team-title {
    font-family: 'Russo One', sans-serif;
    font-size: 2rem;
    color: #fff;
    margin: 0;
    text-align: center;
}

.team-title:hover {
    color: #ccc;
    transition: all 0.3s ease;
}

.header-right {
    display: flex;
    align-items: center;
}

/* Neue Icon-Größen - ALLE GLEICH GROSS */
.profile-icon {
    height: 45px;
    width: 45px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 50%;
    /* Rund für Profil-Icon */
}

.main-logo {
    height: 104px;
    /* 30% größer - das war gut so! */
    width: auto;
    cursor: pointer;
    transition: all 0.3s ease;
}

.search-icon {
    height: 45px;
    width: auto;
    cursor: pointer;
    transition: all 0.3s ease;
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.1));
}

/* Profile Icon mit 3D */
.profile-icon {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 6px rgba(255, 255, 255, 0.1));
    transition: all 0.3s ease;
}

/* Hover-Effekte mit 3D */
.profile-icon:hover,
.main-logo:hover,
.search-icon:hover {
    transform: scale(1.1) translateY(-2px);
    filter: drop-shadow(3px 3px 6px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.2));
}

.logo {
    height: 87px;
    /* 75% größer: von 50px auf 87px */
    width: auto;
    cursor: pointer;
    transition: all 0.3s ease;
}

.logo:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.header-image {
    height: 60px;
    /* Einheitliche Logo-Größe für alle Seiten */
    width: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.header-image:hover {
    transform: scale(1.1);
}

/* DESKTOP SUCHFELD DESIGN */
.search-container {
    position: relative;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

.search-container.expanded {
    /* Desktop: Dunkles Suchfeld-Fenster */
    background-color: #333333;
    /* Dunkles Grau */
    border-radius: 25px;
    padding: 5px;
}

.search-input {
    font-family: 'Exo 2', sans-serif;
    font-weight: 400;
    background-color: transparent;
    /* Transparenter Hintergrund */
    border: none;
    border-radius: 20px;
    padding: 10px 15px;
    font-size: 16px;
    color: #ffffff;
    /* WEISSE SCHRIFT */
    outline: none;
    width: 250px;
}

.search-input::placeholder {
    color: #cccccc;
    /* Hellgraue Placeholder */
}

/* SUCHERGEBNISSE DROPDOWN */
.search-results {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #333333;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    min-width: 250px;
    max-height: 300px;
    overflow-y: auto;
    margin-top: 5px;
}

.search-result {
    padding: 12px 15px;
    color: #ffffff;
    cursor: pointer;
    border-bottom: 1px solid #555555;
    transition: background-color 0.2s ease;
}

.search-result:hover {
    background-color: #87fc74;
    color: #000000;
}

.search-result:last-child {
    border-bottom: none;
    border-radius: 0 0 10px 10px;
}

.search-input.hidden {
    width: 0;
    opacity: 0;
    transition: all 0.3s ease;
    outline: none;
}

.search-input::placeholder {
    color: #66d957;
    /* Hellgrün für Placeholder */
    font-weight: 300;
}

.search-input.visible {
    width: 250px;
    /* Desktop: normale Breite */
    opacity: 1;
}

.search-input:focus {
    box-shadow: 0 0 10px rgba(135, 252, 116, 0.5);
}

.search-button {
    background: none;
    border: none;
    padding: 8px 12px;
    /* Zurück zur ursprünglichen Größe */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s ease;
}

.search-button:hover {
    background-color: rgba(255, 68, 68, 0.2);
    box-shadow: 0 0 10px #ff4444;
}

.search-button:hover .search-icon {
    filter: drop-shadow(0 0 5px #ff4444);
}

.search-icon {
    height: 45px;
    /* Gleich groß wie alle anderen Icons */
    width: 45px;
    filter: brightness(0) invert(1);
    /* Macht die Lupe weiß und sichtbar */
    cursor: pointer;
    transition: transform 0.2s ease;
}

.search-icon:hover {
    transform: scale(1.1);
}

/* White separator lines - ENTFERNT */
.white-separator {
    display: none;
    /* Versteckt die weißen Trenner */
}

/* Jersey Container mit Pitch-Textur - FINALER ZUSTAND */
.jersey-container {
    background-color: #4a7c59;
    background-image: url('/images/pitchtexture.png');
    background-repeat: repeat;
    background-size: 200px 200px;
    width: 100%;
    padding: 15px 0;
    /* Basis für alle Bildschirme */
    overflow-x: auto;
    overflow-y: hidden;
    min-height: 96px;
    /* Basis-Höhe */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    scrollbar-width: none;
    border-bottom: 1px solid #666666;
    -ms-overflow-style: none;
    border: none;
}

.jersey-container::-webkit-scrollbar {
    display: none;
}

/* Jersey Scroll Layout - FINALER ZUSTAND */
.jersey-scroll {
    display: flex;
    gap: 25px;
    /* Basis-Abstand */
    padding: 0 20px;
    min-width: calc(18 * 102px + 17 * 25px + 40px);
    width: max-content;
    align-items: center;
}

.jersey-button {
    background: transparent;
    border: none;
    padding: 5px;
    cursor: pointer;
    border-radius: 10px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    text-decoration: none;
}

.jersey-button:hover {
    transform: scale(1.05);
    transition: transform 0.2s ease;
}

.jersey-button:active {
    transform: scale(0.98);
}

.jersey-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* Jersey Image - BASIS-GROSSE (wird durch Media Queries überschrieben) */
.jersey-image {
    height: 64px;
    /* Basis für mittlere Bildschirme */
    width: 80px;
    /* Basis für mittlere Bildschirme */
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 8px;
}

/* Team TLA - BASIS-GROSSE (wird durch Media Queries überschrieben) */
.team-tla {
    color: #FFFFFF !important;
    font-size: 12px;
    /* Basis für mittlere Bildschirme */
    font-weight: bold;
    text-align: center;
    min-width: 30px;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* Main content area - NEUES DUNKELGRAU */
.main-content {
    flex: 1;
    min-height: 0;
    /* Wichtig! Erlaubt Flexbox-Kind zu scrollen */
    background-color: #171717;
    padding: 20px;
    /* padding-top wird durch position:absolute + top im App-Shell Layout ersetzt */
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 70px;
    /* Platz für Bottom-Nav */
    max-width: 100vw;
    -webkit-overflow-scrolling: touch;
    transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* SPIELTAG MATCH CONTAINER STYLES - NEUES DESIGN */
.matches-container {
    margin-top: 0;
    padding: 0 0 20px 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Datumsgruppen */
.date-group {
    margin-bottom: 25px;
}

.date-header {
    color: #87fc74;
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 15px;
    padding: 10px 15px;
    background: rgba(135, 252, 116, 0.1);
    border-left: 4px solid #87fc74;
}

/* Grid für Spiele - NUR im Spieltag-Panel (matches-container) */
.matches-container .matches-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 12px;
    padding: 0 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* Desktop: Maximal 2 Spalten nebeneinander */
@media (min-width: 769px) {
    .matches-container .matches-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px;
    }
}

/* Mobile: Explizit 1 Spalte erzwingen */
@media (max-width: 768px) {
    .matches-container .matches-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }

    .matches-container .match-card {
        width: 100% !important;
        min-width: unset !important;
        max-width: 100% !important;
    }
}

/* Moderne Match Cards - Horizontales Layout */
.match-card {
    background: linear-gradient(135deg, rgba(26, 26, 26, 0.95), rgba(40, 40, 40, 0.95));
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.match-card:hover {
    transform: translateY(-2px);
    border-color: rgba(135, 252, 116, 0.3);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.match-card.finished {
    opacity: 0.85;
}

/* Uhrzeit ganz links */
.match-card .match-time {
    color: #87fc74;
    font-size: 16px;
    font-weight: 700;
    min-width: 60px;
    text-align: left;
    flex-shrink: 0;
}

/* Team in Match Card - jetzt horizontal mit Name + Logo */
.match-card .match-team {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.match-card .match-team.home {
    justify-content: flex-end;
}

.match-card .match-team.away {
    justify-content: flex-start;
}

.match-card .team-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 4px;
    flex-shrink: 0;
}

.match-card .team-logo.clickable {
    cursor: pointer;
    transition: transform 0.2s ease;
}

.match-card .team-logo.clickable:hover {
    transform: scale(1.15);
}

.match-card .team-name {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 150px;
}

/* Desktop: Voller Name sichtbar, TLA versteckt */
.match-card .team-name-short {
    display: none !important;
}

.match-card .team-name-full {
    display: inline !important;
}

/* Mobile: TLA sichtbar, voller Name versteckt + Bündige Ausrichtung */
@media (max-width: 768px) {
    .match-card .team-name-full {
        display: none !important;
    }

    .match-card .team-name-short {
        display: inline !important;
        font-size: 13px;
        font-weight: 700;
        min-width: 35px;
        text-align: center;
    }

    .match-card .match-time {
        font-size: 13px;
        min-width: 45px;
        font-weight: 600;
    }

    .match-card .score {
        font-size: 16px;
        min-width: 35px;
        font-weight: 700;
    }

    .match-card .team-logo {
        width: 24px;
        height: 24px;
    }

    .match-card {
        padding: 10px;
        gap: 8px;
    }

    /* Bündige Ausrichtung für Teams */
    .match-card .match-team {
        min-width: 70px;
    }

    .match-card .match-team.home {
        justify-content: flex-end;
    }

    .match-card .match-team.away {
        justify-content: flex-start;
    }
}

/* Score in der Mitte */
.match-card .score {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    min-width: 50px;
    letter-spacing: 1px;
    flex-shrink: 0;
}

/* Search Results Styling */
.result-team-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    border-radius: 2px;
    background: #444;
    padding: 2px;
    border: 1px solid #666;
}

.table-position {
    background: transparent;
    color: #fff;
    font-weight: bold;
    padding: 4px 8px;
    border-radius: 0px;
    font-size: 1.1em;
    min-width: 24px;
    text-align: center;
    display: inline-block;
    border: none;
    box-shadow: none;
    outline: none;
}

/* Spieltag Navigation Styling */
.spieltag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: linear-gradient(135deg, #1a1a1a, #333333);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.nav-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    padding: 10px 15px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 120px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.nav-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

.nav-btn:active:not(:disabled) {
    transform: translateY(0);
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.spieltag-selector {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

#currentSpieltagTitle {
    display: none;
    /* Versteckt, da Dropdown selbst den Spieltag zeigt */
}

.spieltag-dropdown {
    background: rgba(0, 0, 0, 0.4);
    border: 2px solid #000;
    border-radius: 8px;
    color: #fff;
    padding: 8px 32px 8px 12px;
    font-size: 0.95em;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23ffffff' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    min-width: 140px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.spieltag-dropdown:hover {
    background-color: rgba(0, 0, 0, 0.6);
    border-color: #333;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

.spieltag-dropdown:focus {
    border-color: #666;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

.spieltag-dropdown option {
    background: #1a1a1a;
    color: #fff;
    padding: 10px;
}

@media (max-width: 768px) {
    .spieltag-header {
        padding: 10px 15px;
        justify-content: space-between;
        align-items: center;
    }

    .nav-btn {
        min-width: 50px;
        padding: 8px 15px;
        font-size: 1.2em;
        font-weight: 600;
    }

    .spieltag-selector {
        gap: 6px;
    }

    .spieltag-dropdown {
        font-size: 0.85em;
        padding: 6px 28px 6px 10px;
        min-width: 120px;
    }
}

.team-name {
    color: #fff;
    font-weight: 600;
    font-size: 0.9em;
}

.score {
    color: #00ff41;
    font-weight: bold;
    font-size: 1.1em;
    margin: 0 15px;
    min-width: 40px;
    text-align: center;
}

.score.live {
    color: #ff6b6b;
    animation: pulse 2s infinite;
}

.score.upcoming {
    color: #ccc;
    font-size: 0.9em;
}

.match-datetime {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #888;
    font-size: 0.85em;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.match-date {
    font-weight: 500;
}

.match-time {
    font-weight: 600;
    color: #00ff41;
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.6;
    }
}

/* Mobile optimization for match items */
@media (max-width: 768px) {
    .team-name {
        font-size: 0.8em;
    }

    .team-logo {
        width: 20px;
        height: 20px;
    }

    .score {
        font-size: 1em;
        margin: 0 10px;
    }
}

/* NEUE BOTTOM NAVIGATION - MIT GLASMORPHISM */
.bottom-navigation {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    /* Glasmorphism Design - Dunkler */
    background: var(--color-bg-glassmorphism);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid var(--color-border-light);
    box-shadow:
        0 -8px 32px rgba(0, 0, 0, 0.5),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);

    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 8px 0;
    z-index: var(--z-modal);
    height: var(--bottom-nav-height);
    box-sizing: border-box;
}

/* Subtiler Glanz-Effekt für Bottom Navigation */
.bottom-navigation::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50%;
    background: linear-gradient(to top,
            rgba(255, 255, 255, 0.06),
            transparent);
    pointer-events: none;
}

.bottom-navigation .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border-radius: 8px;
    min-width: 70px;
    position: relative;
    z-index: 2;
}

.bottom-navigation .nav-item:hover {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Icons mit 3D-Effekt */
.bottom-navigation .nav-item img {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.5));
    transition: all 0.3s ease;
}

.bottom-navigation .nav-item.active img,
.bottom-navigation .nav-item:hover img {
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3)) drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.6));
}

/* Click-Animation für Bottom-Navigation (wie bei team-tabs) */
.bottom-navigation .nav-item:active {
    color: #00ff00 !important;
    /* Grün beim Klicken */
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
    /* Grüner Leuchteffekt */
    transform: scale(0.95);
    /* Leichte Verkleinerung beim Klick */
    transition: all 0.1s ease;
    /* Schnelle Animation */
}

.bottom-navigation .nav-item:active .nav-label {
    color: #00ff00 !important;
    /* Grüne Schrift beim Klicken */
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
    /* Grüner Leuchteffekt */
}

.bottom-navigation .nav-icon {
    font-size: 20px;
    margin-bottom: 4px;
}

.bottom-navigation .nav-label {
    color: #ffffff;
    font-size: 16px;
    /* Desktop Größe */
    font-weight: bold;
    text-align: center;
}

/* ========================================
   SLIDE-IN WINDOWS - KOMPLETT NEU VON NULL
   ======================================== */

/* BASE */
.slide-window {
    position: fixed;
    top: 90px;
    height: calc(100vh - 90px);
    background-color: #171717;
    border: 1px solid #666666;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    /* Keine Klicks wenn außerhalb des Viewports */
}

/* TABELLE - VON LINKS */
#tabelleWindow {
    left: -80vw;
    /* Desktop: Komplett LINKS außerhalb */
    width: 80vw;
    transition: left 0.4s ease;
    z-index: 2000;
    height: calc(100vh - 90px);
    display: flex;
    flex-direction: column;
    /* Modern Design: rechte Ecken abrunden */
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    border-right: 3px solid #000;
    box-shadow: 6px 0 24px rgba(0, 0, 0, 0.6);
    background: #1a1a1a;
}

#tabelleWindow.active {
    left: 0;
    /* Linke Kante am linken Viewport-Rand */
    pointer-events: auto;
    /* Klicks wieder aktivieren wenn sichtbar */
}

/* Desktop Layout für Tabelle Panel */
#tabelleWindow .window-header {
    flex-shrink: 0;
}

#tabelleWindow .table-header-sticky {
    flex-shrink: 0;
}

#tabelleWindow .table-panel-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

#tabelleWindow .table-scroll-container {
    flex: 1 1 0%;
    overflow-y: auto;
    padding-bottom: 50px;
}

#tabelleWindow .legend-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-top: 2px solid #000;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.3);
    z-index: 100;
}

/* SPIELTAG - VON RECHTS */
#spieltagWindow {
    left: 100%;
    /* Desktop: Komplett RECHTS außerhalb */
    width: 80vw;
    transition: left 0.4s ease;
    z-index: 3000;
    /* Modern Design: linke Ecken abrunden */
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    border-left: 3px solid #000;
    box-shadow: -6px 0 24px rgba(0, 0, 0, 0.6);
    background: #1a1a1a;
}

#spieltagWindow.active {
    left: 20%;
    /* Desktop: nimmt rechte 80% ein */
    pointer-events: auto;
    /* Klicks wieder aktivieren wenn sichtbar */
}

/* KADERTALK BACKDROP (Klick zum Schließen) */
.kadertalk-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 3999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.kadertalk-backdrop.active {
    opacity: 1;
    visibility: visible;
}

/* KADERTALK - VON UNTEN */
#kadertalkWindow {
    top: 100%;
    /* Komplett UNTEN außerhalb */
    left: 0;
    width: 100%;
    height: calc(100vh - 90px);
    transition: top 0.4s ease;
    z-index: 4000;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 3px solid var(--accent-color, #87fc74);
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.6);
    background: #1a1a1a;
}

#kadertalkWindow.active {
    top: 90px;
    /* Direkt unter dem Header */
    pointer-events: auto;
}

/* KaderTalk Header - klickbar zum Schließen */
#kadertalkWindow .slide-header {
    position: relative;
    padding-top: 24px;
    padding-bottom: 12px;
    cursor: pointer;
    user-select: none;
    background: linear-gradient(135deg, #1a1a1a 0%, #252525 100%);
    border-bottom: 1px solid rgba(135, 252, 116, 0.2);
}

#kadertalkWindow .slide-header:active {
    background: linear-gradient(135deg, #252525 0%, #2a2a2a 100%);
}

/* Zurück-Button (links) */
#kadertalkWindow .kadertalk-back-close {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #87fc74;
    font-size: 24px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

#kadertalkWindow .kadertalk-back-close:hover {
    background: rgba(135, 252, 116, 0.1);
}

#kadertalkWindow .kadertalk-back-close:active {
    background: rgba(135, 252, 116, 0.2);
    transform: translateY(-50%) scale(0.95);
}

#kadertalkWindow .slide-header h2 {
    text-align: center;
    width: 100%;
    margin: 0;
    padding-left: 40px;
    padding-right: 40px;
}

/* MOBILE */
@media (max-width: 768.98px) {

    #tabelleWindow,
    #spieltagWindow {
        width: 95vw;
    }

    #tabelleWindow {
        left: -95vw;
        /* Mobile: Position muss der Breite entsprechen */
    }

    #spieltagWindow.active {
        left: 5%;
        /* Mobile: nimmt rechte 95% ein */
    }

    /* kadertalkWindow mobile overrides moved to main mobile section */
}

/* ========================================
   PANEL CONTENT STRUCTURE
   ======================================== */

/* Spieltag Panel */
#spieltagWindow .spieltag-navigation {
    flex-shrink: 0;
    padding: 18px 24px;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border-bottom: 2px solid #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

#spieltagWindow .spieltag-scroll-container {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}

/* Mobile Content - Isolierte Regeln */
@media (max-width: 768px) {

    /* FLEXBOX LAYOUT FÜR SPIELTAG-PANEL (wie Tabelle) */
    #spieltagWindow {
        height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    #spieltagWindow .window-header {
        flex-shrink: 0 !important;
    }

    #spieltagWindow .spieltag-navigation {
        flex-shrink: 0 !important;
        padding: 10px 15px !important;
    }

    #spieltagWindow .spieltag-scroll-container {
        flex: 1 !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding: 15px !important;
        min-height: 0 !important;
    }

    /* PANEL LAYOUT - dvh für echte Mobile Browser */
    #tabelleWindow {
        height: 100vh !important;
        /* Fallback für alte Browser */
        height: 100dvh !important;
        /* Dynamic viewport - berücksichtigt Browser-UI */
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }

    /* Header fixed */
    #tabelleWindow .window-header {
        flex-shrink: 0 !important;
    }

    /* THead fixed (außerhalb wrapper für sticky) */
    #tabelleWindow .table-header-sticky {
        flex-shrink: 0 !important;
    }

    /* Content-Wrapper mit position: relative für Legend */
    #tabelleWindow .table-panel-content {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* Scrollbarer Container */
    #tabelleWindow .table-scroll-container {
        flex: 1 1 0% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
        padding-bottom: 50px !important;
    }

    /* Legende: Absolute am unteren Rand des Content-Wrappers */
    #tabelleWindow .legend-footer {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        background: #1a1a1a !important;
        border-top: 1px solid #333 !important;
        z-index: 100 !important;
    }
}

.window-header {
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    padding: 20px 24px;
    border-bottom: 2px solid #000;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 60px;
}

.window-header h2 {
    color: #ffffff;
    margin: 0;
    font-family: 'Russo One', sans-serif;
    text-align: center;
    flex: 1;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Close Button im Header */
.close-btn-header {
    position: absolute;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid #000;
    border-radius: 6px;
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    opacity: 0.8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.close-btn-header:hover {
    opacity: 1;
    color: #ff4444;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
}

/* Tabelle: Close-Button rechts */
#tabelleWindow .close-btn-header {
    right: 15px;
}

/* Spieltag: Close-Button links */
#spieltagWindow .close-btn-header {
    left: 15px;
}

/* Sticky Table Header (eigenes Element zwischen Header und Content) */
.table-header-sticky {
    position: sticky;
    top: 60px;
    /* Höhe des window-header */
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    z-index: 100;
    border-bottom: 2px solid #000;
    padding: 0;
    /* KEIN padding hier */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* THead row hat KEIN extra padding - nur das grid */
.table-header-sticky .table-header-row {
    padding: 12px 0;
    /* Nur oben/unten padding */
    margin: 0;
}

@media (max-width: 768px) {
    .table-header-sticky .table-header-row {
        padding: 12px 0;
        /* Auch auf Mobile nur oben/unten */
    }

    /* Close-Buttons auf Mobile noch kleiner */
    .close-btn-header {
        width: 28px;
        height: 28px;
        font-size: 18px;
    }
}

/* Scrollbar in beiden Panels verstecken */
#tabelleWindow .table-scroll-container::-webkit-scrollbar,
#spieltagWindow .window-content::-webkit-scrollbar,
#spieltagWindow .spieltag-scroll-container::-webkit-scrollbar {
    display: none;
}

#tabelleWindow .table-scroll-container,
#spieltagWindow .window-content,
#spieltagWindow .spieltag-scroll-container {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* TABELLE STYLING (aus altem Code übernommen) */
.standings-table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 10px;
    overflow: hidden;
}

.standings-table th,
.standings-table td {
    padding: 12px 8px;
    text-align: center;
    border-bottom: 1px solid #333;
}

.standings-table th {
    background-color: #1a5a1a;
    color: white;
    font-weight: bold;
    font-size: 14px;
}

.standings-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

.standings-table .position.champions-league {
    background-color: #0066cc;
    color: white;
    font-weight: bold;
}

.standings-table .position.europa-league {
    background-color: #ff6600;
    color: white;
    font-weight: bold;
}

.standings-table .position.relegation {
    background-color: #cc0000;
    color: white;
    font-weight: bold;
}

.standings-table .team-name {
    text-align: left;
    font-weight: bold;
}

/* Mobile Content-spezifische Anpassungen */
@media (max-width: 768px) {



    /* TABLE SPECIFIC SCROLL FIX */
    .standings-table {
        width: 100% !important;
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        border-collapse: separate !important;
        border-spacing: 0 !important;
    }

    .standings-table thead,
    .standings-table tbody,
    .standings-table tr {
        display: table !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    .standings-table thead {
        width: calc(100% - 17px) !important;
        /* Account for scrollbar */
    }

    .bottom-navigation .nav-item {
        min-width: 60px;
        padding: 6px 12px;
    }

    .bottom-navigation .nav-icon {
        font-size: 18px;
    }

    .bottom-navigation .nav-label {
        font-size: 10px;
    }
}

/* BOTTOM NAVIGATION - VERSTECKT (wird durch Combined Panel ersetzt) */
.bottom-nav {
    display: none !important;
    /* Versteckt die alte Navigation */
    z-index: 1000;
    height: 60px;
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    visibility: visible !important;
    /* NIEMALS verstecken */
    opacity: 1 !important;
    /* IMMER sichtbar */
}

.bottom-nav.slide-up {
    /* Navigation fährt mit dem Panel nach oben - Desktop Version */
    transform: translateY(calc(-60vh));
    /* Entspricht der Panel-Höhe von 60vh */
}

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 12px;
    transition: all 0.3s ease;
    min-width: 70px;
    background-color: transparent;
}

.nav-item:hover {
    background-color: #333333;
}

.nav-item:hover .nav-label {
    color: #cccccc;
    /* Hellgrau statt rot */
}

.nav-item.active {
    background-color: #87fc74;
}

.nav-item.back-button {
    background-color: #87fc74;
}

.nav-label {
    font-size: 14px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    text-align: center;
    color: #ffffff;
    /* Weiße Schrift auf schwarzem Hintergrund */
    margin: 0;
}

.nav-item.active .nav-label,
.nav-item.back-button .nav-label {
    color: #000000;
    /* Schwarze Schrift auf grünem Hintergrund */
}

/* Team-Tab spezifische Styles für Detail-Seiten */
.team-tab {
    color: #888888;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.team-tab.active {
    color: #87fc74 !important;
    text-shadow: 0 0 10px rgba(135, 252, 116, 0.5);
    background: rgba(135, 252, 116, 0.1) !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(135, 252, 116, 0.3) !important;
    box-shadow:
        0 2px 8px rgba(135, 252, 116, 0.2),
        inset 0 1px 0 rgba(135, 252, 116, 0.2);
}

.team-tab.active .nav-label {
    color: #87fc74 !important;
    text-shadow: 0 0 10px rgba(135, 252, 116, 0.5);
    font-size: 14px;
    font-weight: 600;
}

.team-tab .nav-label {
    font-size: 14px;
}

.team-tab:hover {
    color: #aaaaaa;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Home-Button mit Logo in der Mitte */
.home-button {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    cursor: pointer;
    position: relative;
    /* Für das herausragende Logo */
    z-index: 10;
    /* Über der Navigation */
}

.home-logo {
    width: 84px;
    /* 20% größer: 70px * 1.2 = 84px */
    height: 84px;
    /* 20% größer: 70px * 1.2 = 84px */
    object-fit: contain;
    transition: transform 0.3s ease;
    transform: translateY(-5px);
    /* Nur minimal herausragend */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.5));
    /* Schatten direkt auf das Logo */
}

.home-button:hover .home-logo {
    transform: translateY(-5px) scale(1.1);
    /* Hover mit minimalem herausragendem Effekt */
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.7));
    /* Stärkerer Schatten beim Hover */
}

/* SLIDE-UP PANEL - KORREKTE HÖHE */
.slide-up-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #011600;
    /* Dunkelgrüner Hintergrund */
    border-radius: 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.3);
    transform: translateY(100%);
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 999;
    /* Panel für Desktop höher - bis fast zur Jersey-Navigation */
    height: 60vh;
    max-height: none;
    border-top: 1px solid #444444;
}

/* Für kleinere Bildschirme Panel niedriger */
@media (max-width: 768px) {
    .slide-up-panel {
        height: calc(100vh - 80px);
        /* Full height minus bottom nav space */
        max-height: none;
        /* Keine Begrenzung */
    }
}

/* COMBINED PANEL - NAVIGATION GANZ UNTEN */
.combined-panel {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    /* NAVIGATION IMMER GANZ UNTEN SICHTBAR */
}

/* Bottom Navigation - GANZ UNTEN AM BILDSCHIRMRAND */
.combined-panel .bottom-nav {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
    padding: 15px 20px;
    display: flex !important;
    justify-content: space-around;
    align-items: center;
    border-top: 2px solid #87fc74;
    position: relative;
    z-index: 1001;
    visibility: visible !important;
    opacity: 1 !important;
    height: 60px;
    box-sizing: border-box;
}

/* Panel Content - FÄHRT VON UNTEN ÜBER DIE NAVIGATION */
.combined-panel .slide-up-panel {
    background-color: #1a1a1a;
    height: calc(100vh - 60px);
    /* Volle Höhe minus Navigation */
    transform: translateY(100%);
    /* Komplett versteckt */
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    position: absolute;
    bottom: 60px;
    /* Über der Navigation */
    left: 0;
    right: 0;
    z-index: 1002;
}

/* Panel aktiviert - fährt bis fast ganz nach oben */
.combined-panel.active .slide-up-panel {
    transform: translateY(0);
    /* Fährt komplett hoch */
}

/* Navigation Items im Combined Panel */
.combined-panel .nav-item {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px 15px;
    border-radius: 12px;
    transition: all 0.3s ease;
    min-width: 70px;
    background-color: transparent;
}

.combined-panel .nav-item:hover {
    background-color: #333333;
}

.combined-panel .nav-item.active {
    background-color: #87fc74;
}

.combined-panel .nav-label {
    font-size: 14px;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    text-align: center;
    color: #ffffff !important;
    margin: 0;
}

.combined-panel .nav-item.active .nav-label {
    color: #000000 !important;
    /* Schwarze Schrift auf grünem Hintergrund */
}

.combined-panel .panel-content {
    height: calc(50vh - 70px);
    /* Abzug für Panel Header */
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
}

.combined-panel .tab-content {
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.combined-panel .table-container {
    max-height: calc(50vh - 70px - 40px);
    /* Panel minus Header minus Padding */
    overflow-y: auto;
    box-sizing: border-box;
}

.slide-up-panel.active {
    transform: translateY(0);
}

.panel-header {
    background-color: #000000;
    /* Schwarzer Header */
    padding: 20px;
    border-bottom: 1px solid #444444;
    /* Dunkelgrau statt hellgrün */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.panel-content {
    padding: 20px;
    height: calc(60vh - 90px);
    /* Angepasst an neue Panel-Höhe - mehr Platz für Content */
    overflow-y: auto;
    background-color: #1a1a1a;
    /* Dunkelgrauer Hintergrund statt dunkelgrün */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Mobile Anpassung für panel-content */
@media (max-width: 768px) {
    .panel-content {
        height: calc(100vh - 320px - 80px - 70px);
        /* Panel height accounting for bottom nav */
        padding: 15px;
    }
}

#panelTitle {
    margin: 0;
    font-family: 'Russo One', sans-serif;
    font-size: 22px;
    color: #87fc74;
    /* Grüne Schrift auf schwarzem Header */
}

/* TAB CONTENT FÜR TEAM-SEITEN */
.team-content .tab-content {
    display: none !important;
    height: 100%;
    animation: fadeIn 0.3s ease-in-out;
    box-sizing: border-box;
}

/* Padding nur auf Mobile */
@media (max-width: 768px) {
    .team-content .tab-content {
        padding-bottom: 70px;
    }
}

.team-content .tab-content.active {
    display: block !important;
}

/* TAB CONTENT FÜR MAINPAGE SLIDE-UP PANEL - Cache Update 29.08.2025 */
.slide-up-panel .tab-content {
    display: none !important;
    padding: 20px;
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.slide-up-panel .tab-content.active {
    display: block !important;
}

/* TABELLEN-STYLES - DUNKLES DESIGN OHNE VIELE GRÜNE STRICHE */
.table-container {
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    background-color: #1a1a1a;
}



.standings-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #1a1a1a;
    font-family: 'Exo 2', sans-serif;
}

.standings-table th {
    background-color: #000000;
    color: #87fc74;
    padding: 15px 10px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid #444444;
    /* Dunkelgrau statt grün */
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.standings-table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid #333333;
    /* Dunkelgrau */
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    /* Weiße Schrift */
}

.standings-table tr:nth-child(even) {
    background-color: #2a2a2a;
}

/* Hover-Effekt entfernt */

.team-name {
    text-align: left !important;
    font-weight: 600;
    color: #87fc74;
    /* Grüne Team-Namen */
}

.position {
    font-weight: 700;
    color: #ffffff;
    font-size: 16px;
}

/* TORSCHÜTZEN-TABELLE */
.scorers-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #1a1a1a;
    font-family: 'Exo 2', sans-serif;
}

.scorers-table th {
    background-color: #000000;
    color: #87fc74;
    padding: 15px 10px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    border-bottom: 1px solid #444444;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.scorers-table td {
    padding: 12px 10px;
    text-align: center;
    border-bottom: 1px solid #333333;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
}

.scorers-table tr:nth-child(even) {
    background-color: #2a2a2a;
}

.scorers-table tr:hover {
    background-color: #333333;
    transform: translateY(-1px);
    transition: all 0.2s ease;
}

.player-name {
    text-align: left !important;
    font-weight: 600;
    color: #87fc74;
}

.team-name-scorers {
    text-align: left !important;
    font-weight: 500;
    color: #cccccc;
    font-size: 12px;
}

/* Champions League Plätze */
.standings-table tr:nth-child(-n+4) .position {
    color: #3498db;
    background-color: #1e3a5f;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Europa League Plätze */
.standings-table tr:nth-child(n+5):nth-child(-n+6) .position {
    color: #f39c12;
    background-color: #3d2e1a;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Abstiegsplätze */
.standings-table tr:nth-child(n+16) .position {
    color: #e74c3c;
    background-color: #3d1e1e;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* MOBILE RESPONSIVENESS - ALLE PUNKTE SICHTBAR */
@media (max-width: 768px) {
    .bottom-nav {
        height: 55px;
        padding: 8px 5px;
        /* Weniger Padding für mehr Platz */
        overflow-x: visible;
        /* Kein Scrollen erforderlich */
    }

    .nav-label {
        font-size: 12px;
        /* Kleinere Schrift für bessere Passform */
    }

    .nav-item {
        padding: 4px 8px;
        /* Kompakter */
        min-width: 55px;
        /* Schmaler */
        flex: 1;
        /* Gleichmäßige Verteilung */
    }

    .bottom-nav.slide-up {
        /* Mobile: Navigation fährt so hoch, dass obere Kante bündig mit unterer Kante der Trikot-Navigation ist */
        transform: translateY(calc(-100vh + 320px));
        /* Angepasst: mehr Platz lassen für Navigation selbst */
    }

    .slide-up-panel {
        height: 40vh;
        /* Mobile: 40% der Bildschirmhöhe - konsistent mit Navigation */
        max-height: 300px;
        /* Angepasst an kleinere Höhe */
    }

    .panel-header {
        padding: 12px 15px;
    }

    #panelTitle {
        font-size: 16px;
        text-align: center;
    }

    .panel-content {
        padding: 15px;
        height: calc(70vh - 50px);
        /* Angepasst an neue mobile Panel-Höhe */
        max-height: calc(600px - 50px);
    }

    .standings-table,
    .scorers-table {
        font-size: 12px;
    }

    .standings-table th,
    .standings-table td,
    .scorers-table th,
    .scorers-table td {
        padding: 8px 4px;
    }

    .standings-table th,
    .scorers-table th {
        font-size: 11px;
        padding: 10px 4px;
    }

    .team-name,
    .player-name {
        font-size: 11px;
    }

    .team-name-scorers {
        font-size: 10px;
    }

    .position {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 12px;
    }
}

/* SEHR KLEINE MOBILE SCREENS */
@media (max-width: 480px) {
    .bottom-nav {
        height: 50px;
        padding: 6px 2px;
    }

    .nav-label {
        font-size: 10px;
        /* Noch kleiner für sehr kleine Screens */
    }

    .nav-item {
        padding: 3px 5px;
        min-width: 45px;
    }

    .standings-table th,
    .standings-table td,
    .scorers-table th,
    .scorers-table td {
        padding: 6px 2px;
        font-size: 10px;
    }

    .team-name,
    .player-name {
        font-size: 9px;
    }

    .team-name-scorers {
        font-size: 8px;
    }

    .position {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 10px;
    }

    #panelTitle {
        font-size: 14px;
    }
}

/* Remove the old grass area styles */

/* MOBILE STYLES - EINHEITLICHE GRÖSSE */
@media (max-width: 768px) {

    .header,
    .team-header {
        padding: 20px 15px;
        height: 90px;
        border-bottom: 1px solid #666666;
        /* Gleicher grauer Balken wie Desktop */
    }

    .header-left {
        gap: 10px;
    }

    .logo {
        height: 60px;
        /* Einheitliche Logo-Größe */
    }

    .header-image {
        height: 60px;
    }

    .site-title {
        font-size: clamp(1rem, 3.5vw, 1.5rem);
        /* Responsive scaling für mobile */
        max-width: calc(100vw - 120px);
        /* Platz für Icons lassen */
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Mobile: Suchfeld wird grün und beginnt neben Logo */
    .search-container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 1001;
    }

    .search-container.expanded {
        background: transparent;
        /* Kein sichtbares Fenster */
    }

    .search-input {
        position: absolute;
        left: 90px;
        /* Mehr Platz für größeres Logo (70px + 20px) */
        right: 60px;
        /* Platz für Lupe */
        top: 50%;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        color: #87fc74;
        /* GRÜNE SCHRIFT */
        font-size: 16px;
        font-family: 'Exo 2', sans-serif;
        font-weight: 500;
        padding: 0;
        width: auto;
        opacity: 0;
    }

    .search-input.visible {
        opacity: 1;
    }

    .search-input::placeholder {
        color: #66d957;
        /* Heller grün für Placeholder */
    }

    .search-button {
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1002;
    }

    .search-icon {
        height: 45px;
        /* Gleich groß auch auf Mobile */
        width: 45px;
    }

    .jersey-container {
        padding: 12px 0;
        /* Kleiner: von 15px auf 12px */
        min-height: 120px;
        /* Kleiner: von 151px auf 120px */
        background-size: 81px 81px;
        /* 10% kleiner: von 90px auf 81px */
    }

    .jersey-scroll {
        gap: 10px;
        /* Nochmal 10% kleiner für Mobile */
        padding: 0 15px;
        min-width: calc(18 * 117px + 17 * 10px + 30px);
        /* Angepasst für kleinere Mobile-Trikots */
    }

    .jersey-image {
        height: 107px;
        /* 10% kleiner: von 119px auf 107px */
        width: 107px;
    }
}

/* TEAM DETAIL STYLES */
.team-detail-container {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
    color: #ffffff;
}

.team-hero {
    background: linear-gradient(135deg, #1a1a1a 0%, #333333 100%);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 30px;
    text-align: center;
    border: 1px solid #444444;
}

.team-hero-content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.team-crest {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px;
}

.team-hero-info h1 {
    font-family: 'Russo One', sans-serif;
    font-size: 2.5rem;
    color: #87fc74;
    margin: 0 0 10px 0;
}

.team-short-name {
    font-size: 1.2rem;
    color: #cccccc;
    margin: 5px 0;
}

.team-tla {
    font-size: 1rem;
    color: #888888;
    margin: 5px 0;
}

.team-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    margin-bottom: 30px;
}

.info-card {
    background: #1a1a1a;
    border-radius: 15px;
    padding: 25px;
    border: 1px solid #444444;
}

.info-card h2 {
    font-family: 'Russo One', sans-serif;
    color: #87fc74;
    margin-bottom: 20px;
    font-size: 1.4rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #333333;
}

.info-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.info-label {
    color: #cccccc;
    font-weight: 600;
    min-width: 120px;
}

.info-value {
    color: #ffffff;
    text-align: right;
    flex: 1;
}

.info-value a {
    color: #87fc74;
    text-decoration: none;
}

.info-value a:hover {
    text-decoration: underline;
}

/* Wettbewerbe */
.competitions-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.competition-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background: #333333;
    border-radius: 10px;
}

.competition-emblem {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.competition-name {
    font-weight: 600;
    color: #ffffff;
}

.competition-type {
    color: #888888;
    font-size: 0.9rem;
}

/* Kader */
.squad-card {
    grid-column: 1 / -1;
}

.squad-filter {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-btn {
    background: #333333;
    color: #ffffff;
    border: none;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Exo 2', sans-serif;
}

.filter-btn:hover {
    background: #444444;
    text-shadow: 0 0 10px #ff4444;
}

.filter-btn.active {
    background: #87fc74;
    color: #000000;
}

.squad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
}

.player-card {
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.player-card:hover {
    transform: translateY(-4px);
    border-color: rgba(135, 252, 116, 0.5);
    background: rgba(25, 25, 25, 0.95);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(135, 252, 116, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.player-name {
    display: block;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 5px;
}

.player-position {
    display: block;
    color: #87fc74;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.player-nationality {
    display: block;
    color: #888888;
    font-size: 0.8rem;
}

/* Zurück Button */
.back-button-container {
    text-align: center;
    margin-top: 40px;
}

.back-btn {
    background: #87fc74;
    color: #000000;
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    cursor: pointer;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.back-btn:hover {
    background: #76e064;
    transform: translateY(-2px);
}

/* 404 ERROR STYLES */
.error-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;
    padding: 20px;
}

.error-content {
    text-align: center;
    color: #ffffff;
    max-width: 500px;
}

.error-title {
    font-family: 'Russo One', sans-serif;
    font-size: 6rem;
    color: #87fc74;
    margin: 0;
    text-shadow: 0 0 20px rgba(135, 252, 116, 0.3);
}

.error-subtitle {
    font-family: 'Russo One', sans-serif;
    font-size: 2rem;
    color: #ffffff;
    margin: 20px 0;
}

.error-message {
    color: #cccccc;
    font-size: 1.1rem;
    margin-bottom: 30px;
}

.error-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

.error-btn {
    padding: 12px 24px;
    border-radius: 25px;
    text-decoration: none;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    font-size: 1rem;
}

.error-btn.primary {
    background: #87fc74;
    color: #000000;
}

.error-btn.primary:hover {
    background: #76e064;
    transform: translateY(-2px);
}

.error-btn.secondary {
    background: #333333;
    color: #ffffff;
}

.error-btn.secondary:hover {
    background: #444444;
    text-shadow: 0 0 10px #ff4444;
}

/* MOBILE RESPONSIVE TEAM DETAILS */
@media (max-width: 768px) {
    .team-hero-content {
        flex-direction: column;
        text-align: center;
    }

    .team-hero-info h1 {
        font-size: 2rem;
    }

    .team-info-grid {
        grid-template-columns: 1fr;
    }

    .info-row {
        flex-direction: column;
        gap: 5px;
    }

    .info-label {
        min-width: auto;
    }

    .info-value {
        text-align: left;
    }

    .squad-filter {
        justify-content: center;
    }

    .squad-grid {
        grid-template-columns: 1fr;
    }

    .error-title {
        font-size: 4rem;
    }

    .error-actions {
        flex-direction: column;
        align-items: center;
    }
}

/* Team Detail Styles - Einheitlicher Header */
.team-header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #000000;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    height: 90px;
    box-sizing: border-box;
    border-bottom: 1px solid #666666;
    /* Gleicher grauer Balken wie Header */
}

.team-logo {
    height: 60px;
    width: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.team-logo:hover {
    transform: scale(1.1);
}

.team-title {
    color: #fff;
    font-family: 'Russo One', sans-serif;
    font-size: 24px;
    margin: 0;
    text-align: center;
    flex: 1;
}

.search-container {
    display: none;
    align-items: center;
    flex: 1;
    justify-content: center;
    margin: 0 20px;
}

.search-container.active {
    display: flex;
}

.search-input {
    width: 100%;
    max-width: 350px;
    padding: 10px 15px;
    border: 2px solid #fff;
    border-radius: 25px;
    background: #222;
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    font-size: 16px;
    outline: none;
}

.search-input::placeholder {
    color: #888;
}

.search-input:focus {
    border-color: #4CAF50;
    background: #333;
}

.search-icon {
    width: 45px;
    /* Gleich groß wie alle anderen Icons */
    height: 45px;
    cursor: pointer;
    filter: brightness(0) invert(1);
    transition: transform 0.2s ease;
}

.search-icon:hover {
    transform: scale(1.1);
}

.search-icon.active {
    filter: brightness(0) invert(1) sepia(1) hue-rotate(90deg) saturate(3);
}

/* Platzhalter Stile */
.news-placeholder,
.forum-placeholder {
    text-align: center;
    padding: 40px 20px;
    background: #1a1a1a;
    border-radius: 10px;
    margin: 20px 0;
}

.news-placeholder p,
.forum-placeholder p {
    color: #ccc;
    font-size: 1.1rem;
    margin: 10px 0;
}

.news-placeholder p:first-child,
.forum-placeholder p:first-child {
    font-size: 2rem;
    margin-bottom: 20px;
}

/* Desktop: Normales Layout */
@media (min-width: 769px) {

    .team-content,
    .main-content {
        padding: 20px;
        background: #000;
        box-sizing: border-box;
        padding-bottom: 70px;
        /* Platz für Bottom-Nav */
    }
}

/* Mobile: Flexbox mit Scroll */
@media (max-width: 768px) {
    .team-content {
        flex: 1;
        min-height: 0;
        padding: 20px;
        background: #000;
        overflow-y: auto !important;
        box-sizing: border-box;
        margin-bottom: 0;
        padding-bottom: 70px !important;
    }
}


/* Squad Section Styles */
.squad-section h2 {
    color: #fff;
    font-family: 'Russo One', sans-serif;
    margin-bottom: 20px;
    text-align: center;
}

.players-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 15px;
    padding: 0 10px;
}

.player-card {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    padding: 15px;
    transition: transform 0.3s ease, border-color 0.3s ease;
}

.player-card:hover {
    transform: translateY(-2px);
    border-color: #fff;
}

.player-info h3 {
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    margin: 0 0 8px 0;
    font-size: 16px;
}

.player-info p {
    color: #ccc;
    font-family: 'Exo 2', sans-serif;
    margin: 4px 0;
    font-size: 14px;
}

.player-info .position {
    color: #4CAF50;
    font-weight: 500;
}

/* News Section Styles */
.news-section h2 {
    color: #fff;
    font-family: 'Russo One', sans-serif;
    margin-bottom: 20px;
    text-align: center;
}

.news-section p {
    color: #ccc;
    font-family: 'Exo 2', sans-serif;
    text-align: center;
    font-size: 16px;
}

/* Stats Section Styles */
.stats-section h2 {
    color: #fff;
    font-family: 'Russo One', sans-serif;
    margin-bottom: 20px;
    text-align: center;
}

.team-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    padding: 0 10px;
}

.stat-card {
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.stat-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(25, 25, 25, 0.95);
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.stat-card h3 {
    color: #4CAF50;
    font-family: 'Exo 2', sans-serif;
    font-weight: 600;
    margin: 0 0 8px 0;
    font-size: 14px;
    text-transform: uppercase;
}

.stat-card p {
    color: #fff;
    font-family: 'Exo 2', sans-serif;
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}

.stat-card small {
    color: #888;
    font-size: 12px;
    display: block;
    margin-top: 4px;
}

.stat-card a {
    color: #4CAF50;
    text-decoration: none;
    transition: color 0.3s ease;
}

.stat-card a:hover {
    color: #fff;
}

/* Forum Section Styles */
.forum-section h2 {
    color: #fff;
    font-family: 'Russo One', sans-serif;
    margin-bottom: 20px;
    text-align: center;
}

.forum-section p {
    color: #ccc;
    font-family: 'Exo 2', sans-serif;
    text-align: center;
    font-size: 16px;
}

.team-info {
    padding: 20px 0;
    background-color: #1a1a1a;
}

.team-stats {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    background-color: #262626;
    border-radius: 10px;
    margin-bottom: 20px;
}

.stat-item {
    text-align: center;
    color: #ffffff;
}

.stat-item .value {
    font-size: 1.5rem;
    font-weight: bold;
    font-family: 'Russo One', sans-serif;
}

.stat-item .label {
    font-size: 0.9rem;
    color: #cccccc;
    margin-top: 5px;
}





.kader-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.player-card {
    background-color: #262626;
    border-radius: 10px;
    padding: 15px;
    color: #ffffff;
    transition: transform 0.3s ease;
}

.player-card:hover {
    transform: translateY(-5px);
    background-color: #333333;
}

.player-name {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.player-position {
    color: #87fc74;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.player-stats {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #cccccc;
}

.news-item {
    background-color: #262626;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    color: #ffffff;
}

.news-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #87fc74;
}

.news-date {
    color: #cccccc;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.news-content {
    line-height: 1.6;
}

.stat-category {
    background-color: #262626;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    color: #ffffff;
}

.stat-category h3 {
    color: #87fc74;
    margin-bottom: 15px;
    font-family: 'Russo One', sans-serif;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid #404040;
}

.stat-row:last-child {
    border-bottom: none;
}

.forum-post {
    background-color: #262626;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 15px;
    color: #ffffff;
}

.forum-author {
    font-weight: bold;
    color: #87fc74;
    margin-bottom: 5px;
}

.forum-time {
    color: #cccccc;
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.forum-content {
    line-height: 1.6;
}

/* Team Bottom Navigation */
.team-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    background-image:
        linear-gradient(90deg,
            transparent 0px,
            rgba(255, 255, 255, 0.03) 1px,
            transparent 1px,
            transparent 3px,
            rgba(255, 255, 255, 0.03) 4px,
            transparent 4px);
    background-size: 4px 100%;
    border-top: 2px solid #ffffff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 0;
    z-index: 1000;
}

/* ==========================================
   EDIT NAVIGATION - Simple Buttons
   ========================================== */

.edit-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    gap: 10px;
}

.edit-nav-btn {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #555;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.edit-nav-btn:hover {
    border-color: #87fc74;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(135, 252, 116, 0.3);
}

.edit-nav-btn.back-btn {
    flex: 1;
    background: linear-gradient(135deg, #87fc74 0%, #5fb85f 100%);
    border-color: #87fc74;
    color: #000;
    font-weight: 700;
}

.edit-nav-btn.back-btn:hover {
    background: linear-gradient(135deg, #5fb85f 0%, #87fc74 100%);
}

.edit-nav-btn.switch-btn {
    flex: 1;
}

@media (max-width: 768px) {

    /* Edit-Seite: Kein Top-Padding am Container */
    .container:has(.edit-navigation) {
        padding-top: 0 !important;
    }

    .edit-navigation {
        padding: 0;
        gap: 5px;
    }

    .edit-nav-btn {
        padding: 10px 8px;
        font-size: 11px;
        border-radius: 0;
    }

    .edit-nav-btn.switch-btn {
        flex: 1;
    }
}

/* ==========================================
   LINEUP EDITOR - Drag & Drop
   ========================================== */

#lineup-editor-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 20px;
}

/* Pitch Container (Editor Mode) */
.pitch-container-editor {
    position: relative;
    width: 100%;
    max-width: 450px;
    margin: 0 auto 20px;
    background: #2a2a2a;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.pitch-editor-svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Drop Zones Grid */
.pitch-grid-overlay {
    position: absolute;
    top: 20px;
    /* Same padding as container */
    left: 20px;
    right: 20px;
    bottom: 20px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-template-rows: repeat(6, 1fr);
    pointer-events: none;
    z-index: 1;
}

.pitch-grid-cell {
    pointer-events: all;
    border: 1px dashed transparent;
    transition: all 0.2s ease;
    position: relative;
}

.pitch-grid-cell.drag-over {
    background: rgba(135, 252, 116, 0.2);
    border-color: #87fc74;
    border-width: 3px;
    border-style: solid;
    box-shadow: 0 0 20px rgba(135, 252, 116, 0.4);
    transform: scale(1.05);
}

/* Touch Highlight für Mobile */
.pitch-grid-cell.touch-highlight {
    background: rgba(135, 252, 116, 0.3);
    border-color: #87fc74;
    border-width: 2px;
    border-style: solid;
    animation: touch-pulse 0.2s ease;
}

@keyframes touch-pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Hold-Waiting State - zeigt an, dass User halten muss */
.pitch-grid-cell.hold-waiting {
    background: rgba(255, 200, 0, 0.15);
    border-color: rgba(255, 200, 0, 0.5);
    border-style: dashed;
}

/* Hold-Active State - Alternative wird hinzugefügt */
.pitch-grid-cell.hold-active {
    background: rgba(255, 165, 0, 0.25);
    border-color: rgba(255, 165, 0, 0.7);
    border-width: 3px;
    animation: pulse-hold 0.6s ease-in-out infinite;
}

/* Hint Text für Hold-Funktion */
.pitch-grid-cell[data-hint]::after {
    content: attr(data-hint);
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: #ffa500;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    pointer-events: none;
    z-index: 1000;
}

@keyframes pulse-hold {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.7;
        transform: scale(1.02);
    }
}

/* Lineup Player (Editor Mode) */
.lineup-player.editor-mode {
    cursor: move;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    pointer-events: all;
}

.lineup-player.editor-mode:hover {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.4);
    z-index: 100;
}

/* Während Drag: Spieler der gedragged wird */
.lineup-player.dragging {
    opacity: 0.6;
    transform: scale(0.95);
}

/* Während Drag: Andere Spieler auf Pitch leicht transparent */
body.dragging-active .lineup-player:not(.dragging) {
    opacity: 0.5;
    transition: opacity 0.2s ease;
}

/* Edit Button */
.edit-player-btn {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #87fc74 0%, #5fb85f 100%);
    color: #000;
    border: 2px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    padding: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.edit-player-btn svg {
    width: 100%;
    height: 100%;
    stroke: #000;
}

.lineup-player.editor-mode:hover .edit-player-btn {
    opacity: 1;
}

.edit-player-btn:hover {
    background: linear-gradient(135deg, #5fb85f 0%, #4a9e4a 100%);
    transform: translateX(-50%) scale(1.15);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}

.edit-player-btn:active {
    transform: translateX(-50%) scale(1.05);
}

/* Auf Mobile immer sichtbar */
@media (max-width: 768px) {
    .edit-player-btn {
        width: 20px;
        height: 20px;
        top: -20px;
        opacity: 0.85;
        padding: 2.5px;
    }

    .edit-player-btn:active {
        opacity: 1;
        transform: translateX(-50%) scale(1.15);
    }
}

/* Kontext-Menü */
.player-context-menu {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #87fc74;
    border-radius: 12px;
    padding: 15px;
    min-width: 250px;
    z-index: 10000;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
    animation: menuFadeIn 0.2s ease;
}

@keyframes menuFadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -45%);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

.context-menu-header {
    color: white;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 15px;
    text-align: center;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

.context-menu-btn {
    width: 100%;
    background: rgba(40, 40, 40, 0.9);
    border: 2px solid #555;
    color: white;
    padding: 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.context-menu-btn:last-child {
    margin-bottom: 0;
}

.context-menu-btn:hover {
    border-color: #87fc74;
    background: rgba(135, 252, 116, 0.1);
    transform: translateX(5px);
}

.context-menu-btn.cancel-btn {
    background: rgba(255, 68, 68, 0.2);
    border-color: #ff4444;
}

.context-menu-btn.cancel-btn:hover {
    border-color: #cc0000;
    background: rgba(255, 68, 68, 0.3);
}

/* Alternativen-Editor Kompakt */
.alternatives-editor-compact {
    position: fixed;
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid #87fc74;
    border-radius: 8px;
    min-width: 200px;
    max-width: 250px;
    z-index: 10000;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.2s ease;
}

.alternatives-editor-compact.active {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 768px) {
    .alternatives-editor-compact {
        left: 10px !important;
        right: 10px !important;
        top: 50% !important;
        transform: translateY(-50%) scale(0.95);
        max-width: none;
    }

    .alternatives-editor-compact.active {
        transform: translateY(-50%) scale(1);
    }
}

.compact-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    border-bottom: 2px solid #87fc74;
    background: rgba(135, 252, 116, 0.15);
}

.compact-header span {
    color: #87fc74;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.close-editor-btn {
    background: #ff4444;
    border: 2px solid white;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.close-editor-btn:hover {
    background: #cc0000;
    transform: rotate(90deg);
}

.alternatives-editor-sidebar .editor-content {
    padding: 15px;
}

.alternatives-dropzone-compact {
    padding: 8px;
    max-height: 300px;
    overflow-y: auto;
}

.alternatives-list-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.alt-compact-item {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 2px solid #444;
    border-radius: 4px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: grab;
    transition: all 0.2s ease;
}

.alt-compact-item.is-main {
    border-color: #87fc74;
    background: linear-gradient(135deg, rgba(135, 252, 116, 0.2) 0%, rgba(135, 252, 116, 0.1) 100%);
}

.alt-compact-item:hover {
    border-color: #87fc74;
    transform: translateX(-3px);
}

.alt-compact-item.dragging {
    opacity: 0.5;
    cursor: grabbing;
}

.alt-compact-number {
    background: #87fc74;
    color: #000;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 11px;
    flex-shrink: 0;
}

.alt-compact-name {
    flex: 1;
    color: white;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.remove-alt-compact {
    background: #ff4444;
    border: none;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.remove-alt-compact:hover {
    background: #cc0000;
    transform: scale(1.1);
}

.dropzone-hint {
    color: #666;
    text-align: center;
    padding: 15px;
    font-size: 11px;
    font-style: italic;
}

.alternatives-dropzone {
    background: rgba(40, 40, 40, 0.5);
    border: 2px dashed #555;
    border-radius: 8px;
    padding: 15px;
    min-height: 150px;
    transition: all 0.2s ease;
}

.alternatives-dropzone.drag-over {
    background: rgba(135, 252, 116, 0.1);
    border-color: #87fc74;
    border-style: solid;
}

.dropzone-label {
    color: #87fc74;
    text-align: center;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
}

.alternatives-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.alt-player-item {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 2px solid #444;
    border-radius: 6px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.alt-player-item:hover {
    border-color: #87fc74;
    transform: translateX(-5px);
}

.alt-player-number {
    background: #87fc74;
    color: #000;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 13px;
    flex-shrink: 0;
}

.alt-player-name {
    flex: 1;
    color: white;
    font-size: 13px;
    font-weight: 600;
}

.remove-alt-btn {
    background: #ff4444;
    border: 2px solid white;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.remove-alt-btn:hover {
    background: #cc0000;
    transform: scale(1.1);
}

.empty-state {
    color: #666;
    text-align: center;
    padding: 40px;
    font-style: italic;
}

/* Remove Button */
.remove-player {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #ff4444;
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lineup-player.editor-mode:hover .remove-player {
    opacity: 1;
}

.remove-player:hover {
    background: #cc0000;
    transform: scale(1.1);
}

/* Auf Mobile immer sichtbar */
@media (max-width: 768px) {
    .remove-player {
        opacity: 0.7;
    }

    .remove-player:active {
        opacity: 1;
        transform: scale(1.2);
    }
}

/* Alternative Count Badge */
.alt-count {
    position: absolute;
    top: -8px;
    left: -8px;
    background: #ff9800;
    color: white;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid white;
}

/* Squad List */
.squad-section {
    margin-top: 10px;
}

.squad-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

/* Filter Buttons */
.squad-filters {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.filter-btn {
    background: rgba(40, 40, 40, 0.9);
    border: 2px solid #555;
    color: #ccc;
    padding: 8px 16px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.filter-btn:hover {
    border-color: #87fc74;
    color: white;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: linear-gradient(135deg, #87fc74 0%, #5fb85f 100%);
    border-color: #87fc74;
    color: #000;
    box-shadow: 0 0 15px rgba(135, 252, 116, 0.5);
}

/* Search Input */
.squad-search {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    padding: 10px 15px;
    background: rgba(40, 40, 40, 0.9);
    border: 2px solid #555;
    border-radius: 25px;
    color: white;
    font-size: 14px;
    outline: none;
    transition: all 0.2s ease;
}

.squad-search:focus {
    border-color: #87fc74;
    box-shadow: 0 0 10px rgba(135, 252, 116, 0.3);
}

.squad-search::placeholder {
    color: #888;
}

#squad-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
    padding: 20px;
    background: #2a2a2a;
    border-radius: 10px;
}

/* Squad Player Card - Kompakter und quadratischer */
.squad-player-card {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 2px solid #444;
    border-radius: 8px;
    padding: 12px;
    cursor: grab;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    aspect-ratio: 1;
    min-height: 100px;
    position: relative;
}

.squad-player-card::before {
    content: '⇪';
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 16px;
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}

.squad-player-card:hover::before {
    opacity: 0.5;
}

.squad-player-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 20px rgba(255, 255, 255, 0.2);
    border-color: #00ff00;
}

.squad-player-card:active {
    cursor: grabbing;
    transform: scale(0.95);
}

.squad-player-card.dragging {
    opacity: 0.4;
    cursor: grabbing;
    transform: scale(0.9) rotate(5deg);
    box-shadow: 0 10px 30px rgba(135, 252, 116, 0.5);
}

.squad-player-card .player-number {
    background: #444;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
    flex-shrink: 0;
}

.squad-player-card .player-name {
    color: white;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    max-width: 100%;
}

/* Responsive Mobile Layout */
@media (max-width: 768px) {

    /* Kompaktes Layout - Kein vertikales Scrollen nötig */
    .squad-section {
        margin-top: 20px;
    }

    .squad-header {
        gap: 10px;
        margin-bottom: 15px;
    }

    .squad-section h2 {
        font-size: 18px;
        margin-bottom: 5px;
    }

    /* Filter Buttons kompakt nebeneinander */
    .squad-filters {
        gap: 5px;
        justify-content: flex-start;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .filter-btn {
        padding: 6px 12px;
        font-size: 11px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Search kompakter */
    .squad-search {
        max-width: 100%;
        padding: 8px 12px;
        font-size: 13px;
    }

    /* Horizontales Scrollen für Squad-Liste */
    #squad-list {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 10px;
        padding: 15px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    /* Spieler-Karten: Kompakt und quadratisch wie Pitch-Slots */
    .squad-player-card {
        flex-shrink: 0;
        width: 80px;
        height: 80px;
        padding: 8px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        scroll-snap-align: start;
    }

    .squad-player-card .player-number {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .squad-player-card .player-name {
        font-size: 11px;
        text-align: center;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        max-width: 100%;
    }

    /* Pitch-Container kompakter auf Mobile */
    .pitch-container-editor {
        max-width: 100%;
        margin-bottom: 15px;
    }
}

.team-nav-item {
    flex: 1;
    text-align: center;
    padding: 10px 5px;
    color: #666666;
    background-color: #333333;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 2px;
    border-radius: 8px;
}

.team-nav-item:hover {
    color: #ffffff;
    background-color: #404040;
}

.team-nav-item.active {
    color: #ffffff;
    background-color: #000000;
    font-weight: bold;
}

.position-filter {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 8px 15px;
    background-color: #333333;
    color: #ffffff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
}

.filter-btn:hover {
    background-color: #404040;
}

.filter-btn.active {
    background-color: #87fc74;
    color: #1a1a1a;
}

@media (max-width: 768px) {
    .team-header {
        padding: 20px 15px;
        /* Angepasster Padding für mobile */
        height: 90px;
        /* Einheitliche Höhe auch mobil */
    }

    .team-header h1 {
        font-size: 1.5rem;
    }

    .team-logo {
        width: auto;
        height: 60px;
        /* Einheitliche Logo-Größe auch mobil */
    }

    .team-stats {
        padding: 15px 0;
    }

    .stat-item .value {
        font-size: 1.3rem;
    }

    .kader-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .team-nav-item {
        font-size: 0.8rem;
        padding: 8px 3px;
    }
}

/* Search Results Styling */
#searchResults {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #333;
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    /* JavaScript kontrolliert die Sichtbarkeit */
    width: 90%;
    max-width: 600px;
}

/* Desktop: noch breiteres Fenster - perfekt zentriert */
@media (min-width: 769px) {
    #searchResults {
        width: 800px;
        max-width: 90vw;
    }
}

/* Mobile: komplette Display-Breite - zentriert */
@media (max-width: 768px) {
    #searchResults {
        width: 95vw;
        max-width: 95vw;
        border-radius: 8px;
    }
}

.search-result-item {
    padding: 16px 20px;
    border-bottom: 1px solid #444;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background-color 0.2s ease;
    color: white;
    min-height: 60px;
}

.search-result-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item.no-results,
.search-result-item.more-results {
    cursor: default;
    background-color: rgba(255, 255, 255, 0.05);
    font-style: italic;
    justify-content: center;
}

.result-icon {
    font-size: 18px;
    margin-right: 15px;
    width: 24px;
    text-align: center;
}

.result-icon.jersey-number-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-weight: bold;
    font-size: 16px;
}

.result-team-logo {
    width: 40px !important;
    height: 40px !important;
    margin-right: 15px !important;
    border-radius: 0px !important;
    object-fit: contain !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.result-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.result-name {
    font-weight: 600;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    line-height: 1.3;
}

.result-subtitle {
    font-size: 13px;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

/* H/A Color-Coding für Heim/Auswärts */
.match-indicator {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    font-weight: bold;
    font-size: 11px;
    margin-right: 4px;
}

.match-indicator.home {
    border: 1.5px solid #4CAF50;
    color: #4CAF50;
}

.match-indicator.away {
    border: 1.5px solid #f44336;
    color: #f44336;
}

/* Mobile - 25% GRÖSSERE TRIKOTS MIT FUNKTIONIERENDEM SCROLL */
@media (max-width: 768px) {

    /* Bottom Navigation - GROSSE LESBARE SCHRIFT */
    .bottom-navigation .nav-label {
        font-size: 16px !important;
        /* Etwas kleiner für bessere Balance */
        font-weight: bold !important;
    }

    /* Team-Tab Mobile Anpassungen */
    .team-tab .nav-label {
        font-size: 12px !important;
        /* Noch kleinere Schrift für mobile */
    }

    .team-tab.active .nav-label {
        font-size: 12px !important;
        /* Noch kleinere Schrift für mobile */
    }

    .home-logo {
        width: 72px !important;
        /* 20% größer: 60px * 1.2 = 72px */
        height: 72px !important;
        transform: translateY(-3px) !important;
        /* Nur minimal herausragend auf mobile */
    }

    .home-button:hover .home-logo {
        transform: translateY(-3px) scale(1.1) !important;
        /* Mobile Hover angepasst */
    }

    /* Jersey Navigation - FIXED unter dem Header auf Mobile */
    .jersey-container {
        position: fixed !important;
        top: 90px !important;
        /* Direkt unter dem Header */
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        /* Unter Header (1000), aber über Content */
        min-height: 100px !important;
        /* Etwas höher für größere Trikots */
        padding: 10px 0 !important;
        /* Angepasstes Padding */
        margin-top: 0 !important;
        /* Kein margin mehr nötig */
    }

    .jersey-image {
        height: 80px !important;
        /* 25% größer: von 64px auf 80px */
        width: 100px !important;
        /* 25% größer: von 80px auf 100px */
    }

    .team-tla {
        font-size: 15px !important;
        /* 25% größer: von 12px auf 15px */
    }

    .jersey-scroll {
        gap: 30px !important;
        /* Mehr Platz für größere Trikots */
    }
}

/* Tablet/Laptop - Lücke zwischen Mobile (768px) und Desktop (1024px) */
@media (min-width: 769px) and (max-width: 1023px) {
    .jersey-container {
        position: fixed !important;
        top: 90px !important;
        /* Direkt unter dem Header */
        left: 0 !important;
        right: 0 !important;
        z-index: 999 !important;
        min-height: 120px !important;
        height: auto !important;
        padding: 15px 0 !important;
        overflow: visible !important;
    }

    .jersey-image {
        height: 70px !important;
        width: 88px !important;
    }

    .team-tla {
        font-size: 13px !important;
    }

    .jersey-scroll {
        gap: 25px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .jersey-item {
        min-height: 100px !important;
    }

    /* ENTFERNT: .main-content padding-top überschreibt das App-Shell Layout */
    /* Die .main-content Positionierung wird jetzt einheitlich am Ende der Datei definiert */
}

/* Desktop - GROSSE TRIKOTS MIT FUNKTIONIERENDEM SCROLL */
@media (min-width: 1024px) {
    .jersey-container {
        position: fixed !important;
        top: 90px !important;
        /* Direkt unter dem Header */
        left: 0 !important;
        right: 0 !important;
        z-index: 998 !important;
        height: 130px !important;
        /* Feste Höhe: 80px Trikot + 20px TLA + 30px Padding */
        min-height: 130px !important;
        max-height: 130px !important;
        padding: 10px 0 !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
        display: flex !important;
        align-items: flex-start !important;
    }

    /* ENTFERNT: .main-content padding-top überschreibt das App-Shell Layout */
    /* Die .main-content Positionierung wird jetzt einheitlich am Ende der Datei definiert */

    .jersey-scroll {
        display: flex !important;
        align-items: flex-start !important;
        gap: 30px !important;
        padding: 5px 20px !important;
        overflow-x: auto !important;
        overflow-y: visible !important;
    }

    .jersey-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        min-height: 110px !important;
        gap: 5px !important;
    }

    .jersey-image {
        height: 80px !important;
        width: 100px !important;
        object-fit: contain !important;
        flex-shrink: 0 !important;
    }

    .team-tla {
        font-size: 12px !important;
        color: #FFFFFF !important;
    }
}

/* Player Card Hover Effects */
.player-card:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

/* Jersey-Styles für verbesserte Match-Anzeige */

.matches-section {
    margin-bottom: 30px;
}

.matches-group {
    margin-bottom: 25px;
}

.matches-group h3 {
    color: #00ff88;
    font-size: 18px;
    margin-bottom: 15px;
    border-bottom: 2px solid rgba(0, 255, 136, 0.3);
    padding-bottom: 8px;
}

.no-matches {
    text-align: center;
    padding: 30px 20px;
    color: #666;
    font-style: italic;
}

/* KOMPAKTE TEAM-INFO über den Spielen - NUR 2 ITEMS (Trainer & Stadion) */
.team-info-compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-bottom: 25px;
    padding: 0 10px;
}

/* Größere Panels für nur 2 Items */
.team-info-large .info-item {
    padding: 18px 20px;
}

.info-item {
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-label {
    font-size: 11px;
    color: #87fc74;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-value {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
}

/* === TEAM ROLES SECTION - 8 ICON-PANELS === */
.team-roles-section {
    margin-top: 40px;
    padding: 0 10px 20px 10px;
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.role-panel {
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 70px;
    transition: all 0.3s ease;
}

.role-panel:hover {
    border-color: #87fc74;
    box-shadow: 0 0 20px rgba(135, 252, 116, 0.2);
}

.role-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.role-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

.role-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: center;
}

.role-player {
    font-size: 14px;
    color: #ffffff;
    font-weight: 600;
    line-height: 1.4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.role-player.role-empty {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
    font-style: italic;
}

.stat-value {
    font-size: 13px;
    color: #87fc74;
    font-weight: 700;
    margin-left: auto;
    min-width: 45px;
    text-align: right;
    white-space: nowrap;
    flex-shrink: 0;
}

.role-player-link {
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

.role-player-link:hover {
    color: #87fc74;
}

.player-name-short {
    display: none;
}

.player-name-full {
    display: inline;
}

/* Mobile: 2 Panels nebeneinander */
@media (max-width: 768px) {
    .team-info-compact {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .info-item {
        padding: 10px 12px;
    }

    .info-label {
        font-size: 10px;
    }

    .info-value {
        font-size: 13px;
    }

    /* Team Roles: 2x4 Grid auf Mobile - identisch mit team-info-compact */
    .team-roles-section {
        padding: 0 10px 20px 10px !important;
        margin: 40px 0 0 0 !important;
    }

    .roles-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .role-panel {
        width: 100%;
        padding: 10px 12px;
        min-height: 60px;
        min-width: 0;
    }

    .role-player-link {
        word-break: normal;
        hyphens: none;
    }

    .role-icon {
        width: 32px;
        height: 32px;
    }

    .role-player {
        font-size: 12px;
    }

    .stat-value {
        font-size: 11px;
        min-width: 35px;
    }

    /* Mobile: Gekürzte Namen (M. Mustermann) */
    .player-name-full {
        display: none;
    }

    .player-name-short {
        display: inline;
    }
}

/* Überschriften für Spielplan-Sektionen */
.matches-heading {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin: 25px 0 15px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
}

.desktop-only {
    display: block;
}

.mobile-only {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .matches-heading {
        font-size: 15px;
        margin: 20px 10px 12px 10px;
    }
}

/* REDESIGNED MATCH-BOXEN - TRIKOT IM FOKUS */
.matches-section {
    padding: 0 10px;
}

/* Container für beide Grids nebeneinander auf Desktop */
.matches-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

/* Wrapper für Grid + Überschrift */
.matches-grid-wrapper {
    display: flex;
    flex-direction: column;
}

.matches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .matches-grid-container {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .matches-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        margin-bottom: 25px;
    }
}

.match-box {
    aspect-ratio: 1;
    background: rgba(20, 20, 20, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.match-box:hover {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Border-Farben basierend auf Ergebnis - transparenter */
.match-box.win {
    border-color: rgba(40, 167, 69, 0.4);
    background: rgba(40, 167, 69, 0.08);
}

.match-box.win:hover {
    border-color: rgba(40, 167, 69, 0.6);
}

.match-box.draw {
    border-color: rgba(255, 193, 7, 0.4);
    background: rgba(255, 193, 7, 0.08);
}

.match-box.draw:hover {
    border-color: rgba(255, 193, 7, 0.6);
}

.match-box.loss {
    border-color: rgba(220, 53, 69, 0.4);
    background: rgba(220, 53, 69, 0.08);
}

.match-box.loss:hover {
    border-color: rgba(220, 53, 69, 0.6);
}

.match-box.upcoming {
    border-color: rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.03);
}

.match-box.upcoming:hover {
    border-color: rgba(255, 255, 255, 0.6);
}

/* Heim/Auswärts Label oben */
.match-location {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff;
    margin-bottom: 2px;
    margin-top: -8px;
}

/* Trikot - nimmt fast den ganzen Platz ein */
.match-opponent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    margin-top: -4px;
    flex: 1;
    width: 100%;
    min-height: 0;
    /* Wichtig: Verhindert Overflow */
}

.jersey-small {
    width: 54%;
    max-width: 74px;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.6));
    margin-top: 5px;
    /* Desktop: 5px runter */
}

.opponent-short {
    display: none;
    /* Team-Name wird entfernt */
}

/* Ergebnis unten */
.match-result-compact {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin-top: 6px;
}

.match-time-compact {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin-top: 10px;
}

.score-compact {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
}

/* Uhrzeit im score-compact soll kleiner sein */
.match-time-compact .score-compact {
    font-size: 14px;
    font-weight: 700;
}

/* Result Indicator & Location Indicator nicht mehr benötigt */
.result-indicator,
/* Datum bei vergangenen Spielen */
.match-date-compact {
    font-size: 11px;
    color: #ffffff;
    font-weight: 500;
    margin-top: 4px;
}

/* Datum und Uhrzeit kombiniert bei kommenden Spielen */
.match-datetime-compact {
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.date-part {
    font-weight: 700;
}

.time-separator {
    opacity: 0.5;
    font-weight: 400;
}

.time-part {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
    color: #fff;
}

/* Location Indicator Icons */
.location-indicator {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.match-box:hover .location-indicator {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.location-indicator.home {
    background: linear-gradient(135deg, #87fc74 0%, #6fdb5c 100%);
}

.location-indicator.away {
    background: linear-gradient(135deg, #ffaa00 0%, #ff9900 100%);
}

.match-result-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.score-compact {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.result-indicator {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    font-weight: bold;
    color: #000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.match-box:hover .result-indicator {
    transform: scale(1.1);
}

.result-indicator.win {
    background: linear-gradient(135deg, #87fc74 0%, #6fdb5c 100%);
}

.result-indicator.loss {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}

.result-indicator.draw {
    background: linear-gradient(135deg, #ffc107 0%, #ffb300 100%);
}

.match-time-compact {
    font-size: 14px;
    font-weight: 600;
    color: #87fc74;
    margin: 6px 0;
    text-shadow: 0 0 8px rgba(135, 252, 116, 0.3);
}

.match-date-compact {
    font-size: 12px;
    color: #bbb;
    margin-top: auto;
    font-weight: 500;
}

/* Mobile Anpassungen für Match-Boxen */
@media (max-width: 768px) {
    .matches-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .match-box {
        padding: 6px;
    }

    /* 4. Box verstecken auf Mobile (nur 3+3 anzeigen) */
    .match-box.hide-on-mobile {
        display: none;
    }

    .jersey-small {
        width: 40%;
        max-width: 40px;
        margin-top: 2px;
        /* Mobile: 2px Abstand zum Text oben */
    }

    .match-location {
        font-size: 9px;
        margin-bottom: 0px;
        margin-top: 2px;
        /* Mobile: 2px runter */
    }

    .match-result-compact {
        font-size: 11px;
        margin-top: 2px;
        font-weight: 600;
    }

    .match-time-compact {
        font-size: 11px;
        margin-top: 4px;
        font-weight: 600;
    }

    .score-compact {
        font-size: 13px;
    }

    .match-date-compact {
        font-size: 9px;
        margin-top: 2px;
    }

    /* Datum und Uhrzeit kombiniert auf Mobile */
    .match-datetime-compact {
        font-size: 11px;
        margin-top: 4px;
        gap: 4px;
    }

    .time-part {
        font-size: 10px;
    }

    .opponent-short {
        font-size: 10px;
    }

    .location-indicator {
        width: 20px;
        height: 20px;
        line-height: 20px;
        font-size: 10px;
    }

    .score-compact {
        font-size: 12px;
    }

    .result-indicator {
        width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 9px;
    }
}

/* MOBILE HEADER SIZE REDUCTIONS */
@media (max-width: 768px) {

    /* Header 20% kleiner */
    .header,
    .team-header {
        height: 72px !important;
        /* 90px * 0.8 = 72px */
        padding: 16px 15px !important;
        /* 20px * 0.8 = 16px */
    }

    /* Alle Logos 20% kleiner */
    .main-logo {
        height: 83px !important;
        /* 104px * 0.8 = 83px */
    }

    .logo {
        height: 70px !important;
        /* 87px * 0.8 = 70px */
    }

    .header-image {
        height: 48px !important;
        /* 60px * 0.8 = 48px */
    }

    /* Profile Icon und Search Icon - gleiche Größe, etwas größer */
    .profile-icon {
        height: 32px !important;
        /* Größer und rund für bessere Sichtbarkeit */
        width: 32px !important;
    }

    .search-icon {
        height: 32px !important;
        /* Gleiche Größe wie Profile Icon */
        width: 32px !important;
        /* Width auch definieren für proportionale Darstellung */
    }

    .search-button img {
        height: 32px !important;
        /* Falls das Search Icon so definiert ist */
        width: 32px !important;
    }

    /* Suchfeld-Position anpassen wegen optimierter Icons */
    .search-input {
        left: 80px !important;
        /* Angepasst für kleineres Logo */
        right: 55px !important;
        /* Angepasst für 32px Such-Lupe */
    }
}

/* ============================================
   MODERNE BUNDESLIGA TABELLE - NEU DESIGN
   ============================================ */

/* Sticky Header f�r Tabelle */
.sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #1a1a1a;
    border-bottom: 2px solid #333;
}

.sticky-table-header {
    position: sticky;
    top: 0;
    z-index: 99;
    background: #1a1a1a !important;
}

.sticky-table-header th {
    background: #1a1a1a !important;
}

/* Modern Table Container */
.modern-table-container {
    background: #0a0a0a;
    border-radius: 12px;
    overflow-x: visible;
    /* Kein Scroll - Tabelle wird in table-scroll-container gescrollt */
    margin-bottom: 30px;
}

/* Desktop/Mobile Table Toggle */
.standings-table-desktop {
    display: table;
    width: 100%;
    table-layout: fixed;
    /* Wichtig für exakte Spaltenbreiten */
}

.standings-table-mobile {
    display: none;
}

@media (max-width: 768px) {
    .standings-table-desktop {
        display: none !important;
    }

    .standings-table-mobile {
        display: table !important;
        width: 100%;
        table-layout: fixed;
    }
}

/* Table Base Styles */
.standings-table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

.standings-table th {
    background: #1a1a1a;
    color: #fff;
    font-weight: 600;
    padding: 15px 10px;
    text-align: center;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #333;
}

.standings-table td {
    padding: 18px 10px;
    text-align: center;
    border-bottom: 1px solid #222;
    color: #e0e0e0;
    font-size: 14px;
}

/* Mobile gr��ere Schrift */
@media (max-width: 768px) {
    .standings-table td {
        font-size: 16px;
        padding: 20px 8px;
    }

    .standings-table th {
        font-size: 14px;
        padding: 16px 8px;
    }
}

/* Zeilen Basis-Styling */
.standings-table tbody tr {
    user-select: none;
    /* Text nicht auswählbar */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-tap-highlight-color: transparent;
    /* Mobile Tap-Highlight entfernen */
    cursor: default;
    /* Standard-Cursor, kein Pointer */
}

.standings-table tbody td {
    -webkit-tap-highlight-color: transparent;
    /* Auch Zellen: kein Tap-Highlight */
}

/* Hover-Effekt komplett deaktiviert - Background-Color bleibt erhalten */
.standings-table tbody tr:hover {
    transform: none !important;
    box-shadow: none !important;
}

.standings-table tbody tr:active,
.standings-table tbody tr:focus {
    transform: none !important;
    box-shadow: none !important;
}

/* Gerade Zeilen behalten #2a2a2a bei Hover */
.standings-table tbody tr:nth-child(even):hover {
    background-color: #2a2a2a !important;
}

/* Ungerade Zeilen behalten transparent/default bei Hover */
.standings-table tbody tr:nth-child(odd):hover {
    background-color: transparent !important;
}

/* Position Column mit farbigen Rändern */
.standings-table .pos-cell {
    font-weight: 700;
    font-size: 16px;
    position: relative;
}

/* Alte pos-cell borders entfernt - jetzt outline um ganze TR */

/* Trennlinien zwischen Qualifikations-Zonen */
.standings-table .separator-line {
    border-bottom: 3px solid #444 !important;
}

/* Team Name klickbar */
.standings-table .team-cell {
    text-align: left;
    font-weight: 600;
}

.standings-table .team-name-link {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s ease;
}

.standings-table .team-name-link:hover {
    color: #4A90E2;
}

/* Form Icons - Quadratische Boxen */
.form-icons {
    display: inline-flex;
    gap: 5px;
    align-items: center;
}

.form-icon {
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

.form-icon.win {
    background: #4CAF50;
}

.form-icon.loss {
    background: #f44336;
}

.form-icon.draw {
    background: #FFA500;
}

/* Tooltip für Form Hover */
.form-icon .tooltip {
    visibility: hidden;
    position: absolute;
    top: 130%;
    /* Unterhalb des Icons statt oberhalb */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.95);
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    border: 1px solid #444;
    pointer-events: none;
}

.form-icon:hover .tooltip {
    visibility: visible;
}

/* Mobile Interaktive Zellen */
@media (max-width: 768px) {
    .standings-table .interactive-cell {
        cursor: pointer;
        position: relative;
        user-select: none;
    }

    .standings-table .interactive-cell.active::after {
        content: attr(data-detail);
        position: absolute;
        bottom: -40px;
        /* Mehr Platz nach unten für mehrzeilig */
        left: 50%;
        transform: translateX(-50%);
        background: rgba(0, 0, 0, 0.95);
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        font-size: 13px;
        white-space: pre-line;
        /* Ermöglicht Zeilenumbrüche */
        z-index: 9999;
        /* Über allen anderen Inhalten */
        border: 1px solid #444;
        max-width: 120px;
        /* Begrenzt Breite für bessere Lesbarkeit */
        text-align: center;
    }
}

/* QUALIFIKATIONS-LEGENDE - 6 Punkte in 2x3 Grid */
.qualifications-legend {
    background: #1a1a1a;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    border: 1px solid #333;
}

.qualifications-legend h3 {
    color: #fff;
    font-size: 18px;
    margin-bottom: 15px;
    font-weight: 600;
}

.legend-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

@media (max-width: 768px) {
    .legend-items {
        grid-template-columns: repeat(2, 1fr);
    }
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Einfache Zahlen ohne Farben */
.legend-number {
    min-width: 40px;
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    text-align: left;
}

.legend-text {
    color: #e0e0e0;
    font-size: 13px;
    line-height: 1.4;
}

/* SONDERF�LLE AUSKLAPPBAR */
.special-cases {
    margin-top: 25px;
    border-top: 2px solid #333;
    padding-top: 20px;
}

.expand-btn {
    background: #2a2a2a;
    border: 1px solid #444;
    color: #fff;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

.expand-btn:hover {
    background: #333;
    border-color: #555;
}

.expand-btn #expandIcon {
    transition: transform 0.3s ease;
    display: inline-block;
}

.expand-btn.active #expandIcon {
    transform: rotate(90deg);
}

.special-cases-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.special-cases-content.active {
    max-height: 500px;
    margin-top: 15px;
}

.special-case-item {
    background: #0a0a0a;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 12px;
    border-left: 4px solid #4A90E2;
}

.special-case-item strong {
    color: #4A90E2;
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
}

.special-case-item p {
    color: #ccc;
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

/* Mobile Anpassungen f�r Legende */
@media (max-width: 768px) {
    .qualifications-legend {
        padding: 20px;
    }

    .qualifications-legend h3 {
        font-size: 18px;
    }

    .legend-text {
        font-size: 14px;
    }

    .legend-color {
        width: 25px;
        height: 25px;
    }
}

/* ============================================
   TABELLEN SCROLL FIX - Nur Tabelle scrollbar
   ============================================ */

/* Scrollbarer Container nur für Tabelle */
.table-scroll-container {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 10px 5px 20px 5px;
}

/* Toggle Button für Legende */
.legend-toggle-btn {
    width: 100%;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    border: none;
    border-top: 2px solid #000;
    border-bottom: 2px solid #000;
    color: #fff;
    padding: 18px 24px;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    -webkit-tap-highlight-color: transparent;
}

.legend-toggle-btn:hover {
    background: linear-gradient(135deg, #2d2d2d 0%, #3a3a3a 100%);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.legend-toggle-btn #legendIcon {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.legend-toggle-btn.active #legendIcon {
    transform: rotate(180deg);
}

/* Legende Content ausklappbar */
.legend-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.legend-content.active {
    max-height: 600px;
    overflow-y: auto;
}

@media (max-width: 768px) {
    .legend-content.active {
        max-height: 300px;
        overflow-y: auto;
    }

    .legend-toggle-btn {
        padding: 12px 15px;
        font-size: 14px;
    }
}

.legend-content .qualifications-legend {
    margin: 0;
    border: none;
    border-radius: 0;
    border-top: 1px solid #333;
}

/* Slide Window Anpassung f�r neue Struktur */
#tabelleWindow {
    display: flex;
    flex-direction: column;
}

#tabelleWindow .window-header {
    flex-shrink: 0;
}

/* Mobile Anpassungen */
@media (max-width: 768px) {
    .table-scroll-container {
        padding: 15px;
    }

    .legend-toggle-btn {
        padding: 12px 15px;
        font-size: 15px;
    }
}

/* ============================================
   TABLE HEADER IM WINDOW HEADER
   ============================================ */

.table-header-combined {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.table-header-combined h2 {
    margin-bottom: 15px;
}

.table-header-row {
    display: grid;
    padding: 12px 20px;
    background: #1a1a1a;
    border-top: 2px solid #333;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Desktop Header */
.table-header-desktop {
    grid-template-columns: 50px 1fr 50px 100px 50px 50px 50px 50px 50px 60px 60px;
    display: grid;
}

/* Desktop-only Header Alignment */
@media (min-width: 769px) {
    .table-header-desktop {
        padding: 12px 25px;
        /* 20px base + 5px container padding = 25px total */
        margin: 0;
    }
}

.table-header-mobile {
    display: none;
}

@media (max-width: 768px) {
    .table-header-desktop {
        display: none;
    }

    .table-header-mobile {
        display: grid;
        grid-template-columns: 35px 1fr 35px 80px 50px 50px;
        /* Pos | Team | Sp | Form | +/- | Pkt */
    }
}

.table-header-row span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-header-row .th-team {
    justify-content: flex-start;
}

/* Tabelle ohne THEAD - nur TBODY */
.standings-table tbody tr td:first-child {
    text-align: center;
}

/* ============================================
   OUTLINE UM GANZE ZEILE statt Border um Zelle
   ============================================ */

/* Entferne Border um pos-cell */
.standings-table .pos-cell {
    font-weight: 700;
    font-size: 16px;
    border: none !important;
}

/* Outline um JEDE ZELLE einzeln mit neuen Farben */
.standings-table tbody tr.pos-cl td {
    outline: 1px solid #1c19d1;
    outline-offset: 0px;
    /* Auf Zellenhöhe, nicht darüber */
}

.standings-table tbody tr.pos-el td {
    outline: 1px solid #eb742b;
    outline-offset: 0px;
}

.standings-table tbody tr.pos-ecl td {
    outline: 1px solid #50b23e;
    outline-offset: 0px;
}

.standings-table tbody tr.pos-relegation td {
    outline: 1px solid #FFD700;
    outline-offset: 0px;
}

.standings-table tbody tr.pos-relegation-direct td {
    outline: 1px solid #DC143C;
    outline-offset: 0px;
}

/* ============================================
   TABELLE B�NDIG + OUTLINE UM TEXT
   ============================================ */

/* Table layout fixed f�r b�ndige Spalten */
.standings-table {
    table-layout: fixed;
    width: 100%;
}

/* Desktop Spaltenbreiten passend zum Header Grid */
/* Grid: 50px 1fr 50px 100px 50px 50px 50px 50px 50px 60px 60px */
/* Fixed columns total: 50+50+100+50+50+50+50+50+60+60 = 570px */
/* Team column (1fr) = calc(100% - 570px) */

.standings-table-desktop colgroup,
.standings-table-desktop col {
    display: none;
}

.standings-table-desktop td:nth-child(1) {
    width: 50px;
}

/* Pos */
.standings-table-desktop td:nth-child(2) {
    width: calc(100% - 570px);
    min-width: 150px;
}

/* Verein - flexibel */
.standings-table-desktop td:nth-child(3) {
    width: 50px;
}

/* Sp */
.standings-table-desktop td:nth-child(4) {
    width: 100px;
}

/* Form */
.standings-table-desktop td:nth-child(5) {
    width: 50px;
}

/* S */
.standings-table-desktop td:nth-child(6) {
    width: 50px;
}

/* U */
.standings-table-desktop td:nth-child(7) {
    width: 50px;
}

/* N */
.standings-table-desktop td:nth-child(8) {
    width: 50px;
}

/* T */
.standings-table-desktop td:nth-child(9) {
    width: 50px;
}

/* GT */
.standings-table-desktop td:nth-child(10) {
    width: 60px;
}

/* +/- */
.standings-table-desktop td:nth-child(11) {
    width: 60px;
}

/* Pkt */

/* Mobile Spaltenbreiten passend zum Header Grid */
/* Mobile Grid: 35px 1fr 35px 80px 50px 50px */
/* Fixed columns: 35+35+80+50+50 = 250px */
/* Team column = calc(100% - 250px) */

.standings-table-mobile td:nth-child(1) {
    width: 35px;
}

/* Pos */
.standings-table-mobile td:nth-child(2) {
    width: calc(100% - 250px);
    min-width: 120px;
}

/* Verein - mehr Platz */
.standings-table-mobile td:nth-child(3) {
    width: 35px;
}

/* Sp */
.standings-table-mobile td:nth-child(4) {
    width: 80px;
}

/* Form */
.standings-table-mobile td:nth-child(5) {
    width: 50px;
}

/* +/- */
.standings-table-mobile td:nth-child(6) {
    width: 50px;
}

/* Pkt */

/* Clean table cells - keine outlines, nur colored borders */
.standings-table tbody tr td {
    outline: none !important;
    box-shadow: none !important;
}

/* SONDERREGELN KOMPAKTER + OHNE BLAUE AKZENTE */
.special-case-item {
    background: #0a0a0a;
    padding: 10px 12px;
    /* Kleiner */
    border-radius: 6px;
    margin-bottom: 8px;
    /* Weniger Abstand */
    border-left: none !important;
    /* Kein blauer Akzent */
}

.special-case-item strong {
    color: #fff;
    /* Nicht blau */
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    /* Kleiner */
}

.special-case-item p {
    color: #ccc;
    font-size: 12px;
    /* Kleiner */
    line-height: 1.5;
    margin: 0;
}

/* Sonderf�lle Sektion kompakter */
.special-cases {
    margin-top: 15px;
    border-top: 1px solid #333;
    padding-top: 12px;
}

.expand-btn {
    padding: 10px 15px;
    font-size: 14px;
}

/* ============================================
   COMPLETE FIX - Colored borders instead of outlines
   ============================================ */

/* 1. NUR 1 SCROLLBAR - Alle anderen overflow entfernen */
/* WICHTIG: Nur für Tabelle, nicht für Spieltag! */
#tabelleWindow .window-content {
    overflow: hidden !important;
    padding: 0 !important;
    height: auto !important;
}

/* Spieltag Window muss normal scrollen können - DESKTOP ONLY */
@media (min-width: 769px) {
    #spieltagWindow .window-content {
        overflow-y: auto !important;
        padding: 20px !important;
    }
}

.modern-table-container {
    overflow: visible !important;
}

/* 2. COLORED BORDERS - Dicke Trennlinien nach bestimmten Positionen */
/* Blau nach Position 4 (Champions League) */
.standings-table tbody tr.border-after-cl {
    border-bottom: 3px solid #1c19d1 !important;
}

/* Orange nach Position 5 (Europa League) */
.standings-table tbody tr.border-after-el {
    border-bottom: 3px solid #eb742b !important;
}

/* Grün nach Position 7 (Conference League) */
.standings-table tbody tr.border-after-ecl {
    border-bottom: 3px solid #50b23e !important;
}

/* Gold nach Position 16 (Relegation) */
.standings-table tbody tr.border-after-relegation {
    border-bottom: 3px solid #FFD700 !important;
}

/* Rot nach Position 18 (Direkter Abstieg) */
.standings-table tbody tr.border-after-direct {
    border-bottom: 3px solid #DC143C !important;
}

/* TD Styling - sauber ohne alte outlines */
.standings-table tbody tr td {
    outline: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    /* KEIN horizontal padding - nur vertical */
    text-align: center;
}

/* 3. LEGEND-FOOTER - TEIL DES TABELLEN-PANELS */
/* Legend Footer Styling wird über #tabelleWindow .legend-footer geregelt (siehe oben) */

.legend-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.legend-content.active {
    max-height: 500px;
    overflow-y: auto;
}

/* 4. MOBILE - PADDING F�R LETZTEN EINTRAG */
@media (max-width: 768px) {
    .table-scroll-container {
        padding: 10px 2px 20px 2px !important;
    }
}

/* Ensure profile icon is always tappable on mobile */
.header-left {
    position: relative;
    z-index: 4 !important;
}

.header-right {
    position: relative;
    z-index: 4 !important;
}

.header-center {
    position: relative;
    z-index: 2 !important;
}

.profile-icon {
    position: relative;
    z-index: 5 !important;
}

/* === TEAM EDIT PAGE === */

/* Edit Icon im Header */
.edit-icon {
    width: 32px;
    height: 32px;
    opacity: 0.9;
    transition: all 0.3s ease;
    filter: brightness(1.2);
}

.edit-icon:hover {
    opacity: 1;
    transform: scale(1.1);
    filter: brightness(1.5);
}

/* Edit Content Area */
.edit-content {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 80px;
    /* Platz für Bottom Nav */
}

.edit-section {
    max-width: 800px;
    margin: 0 auto;
}

.edit-section h2 {
    font-size: 28px;
    margin-bottom: 30px;
    color: #fff;
    text-align: center;
}

.edit-section h3 {
    font-size: 20px;
    margin: 30px 0 15px 0;
    color: #fff;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    padding-bottom: 10px;
}

/* Read-only Info Display */
.info-readonly {
    background: rgba(20, 20, 20, 0.6);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 30px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    font-weight: 600;
    color: #aaa;
}

.info-value {
    color: #fff;
    font-weight: 500;
}

/* Editable Info Section */
.info-editable {
    background: rgba(20, 20, 20, 0.9);
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 25px;
    backdrop-filter: blur(10px);
}

/* Form Groups */
.form-group {
    margin-bottom: 25px;
}

.form-group label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 8px;
}

.form-select {
    width: 100%;
    padding: 12px 15px;
    font-size: 16px;
    font-family: 'Exo 2', sans-serif;
    background: rgba(30, 30, 30, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    color: #fff;
    outline: none;
    transition: all 0.3s ease;
}

.form-select:focus {
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1);
}

.form-select option {
    background: #1a1a1a;
    color: #fff;
}

/* Multi-Select Group */
.multi-select-group {
    margin-bottom: 30px;
}

.multi-select-group label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
}

.selected-players {
    min-height: 45px;
    margin-bottom: 10px;
    padding: 8px;
    background: rgba(20, 20, 20, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
}

.no-players {
    color: rgba(255, 255, 255, 0.4);
    font-size: 14px;
    padding: 8px;
    text-align: center;
}

.player-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: rgba(40, 40, 40, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.player-item:last-child {
    margin-bottom: 0;
}

.player-item:hover {
    background: rgba(50, 50, 50, 0.95);
    border-color: rgba(255, 255, 255, 0.3);
}

.player-name {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
}

.remove-button {
    background: rgba(220, 53, 69, 0.8);
    border: none;
    color: #fff;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.remove-button:hover {
    background: rgba(220, 53, 69, 1);
    transform: scale(1.1);
}

.add-player-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.add-player-row .form-select {
    flex: 1;
    margin-bottom: 0;
}

.add-button {
    background: rgba(40, 167, 69, 0.8);
    border: none;
    color: #fff;
    width: 48px;
    height: auto;
    border-radius: 8px;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.add-button:hover {
    background: rgba(40, 167, 69, 1);
    transform: scale(1.05);
}

.add-button:active {
    transform: scale(0.95);
}


/* Save Button */
.btn-save {
    width: 100%;
    max-width: 400px;
    padding: 18px 30px;
    font-size: 18px;
    font-weight: 700;
    font-family: 'Russo One', sans-serif;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    border-radius: 12px;
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    display: block;
    margin: 40px auto;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
}

.btn-save:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
}

.btn-save:active {
    transform: translateY(0);
}

.btn-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Logo Icon im Header (Zurück-Button) */
.logo-icon {
    width: 50px;
    height: 50px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.logo-icon:hover {
    transform: scale(1.1);
}

/* Mobile Anpassungen für Edit Page */
@media (max-width: 768px) {
    .edit-content {
        padding: 15px;
    }

    .edit-section h2 {
        font-size: 22px;
    }

    .edit-section h3 {
        font-size: 18px;
    }

    .form-group label {
        font-size: 14px;
    }

    .form-select {
        font-size: 14px;
        padding: 10px 12px;
    }

    .btn-save {
        font-size: 16px;
        padding: 15px 25px;
    }
}

/* ===================================
   TEAM EDIT PAGE - BOTTOM NAVIGATION
   =================================== */

/* Bottom Navigation für Edit-Seite - EXAKT wie Team-Detail */
.container:has(.edit-content) .bottom-navigation {
    display: flex !important;
    /* Override das display:none von Mainpage */
}

/* Edit-Tabs benutzen die gleichen Styles wie normale nav-items */
.bottom-navigation .edit-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border-radius: 8px;
    min-width: 70px;
    position: relative;
    z-index: 2;
}

.bottom-navigation .edit-tab:hover {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Active State für ausgewählten Tab */
.bottom-navigation .edit-tab.active {
    background: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.bottom-navigation .edit-tab.active .nav-label {
    color: #ffffff;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}

/* Click-Animation wie bei team-tabs */
.bottom-navigation .edit-tab:active {
    color: #00ff00 !important;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
    transform: scale(0.95);
    transition: all 0.1s ease;
}

.bottom-navigation .edit-tab:active .nav-label {
    color: #00ff00 !important;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
}

.bottom-navigation .edit-tab .nav-label {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* Speichern Button - auch im gleichen Stil */
.bottom-navigation .save-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 6px 12px;
    border-radius: 8px;
    min-width: 70px;
    position: relative;
    z-index: 2;
    border: none;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.bottom-navigation .save-button:hover {
    background: linear-gradient(135deg, #7688eb 0%, #8557b2 100%);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.bottom-navigation .save-button:active {
    color: #00ff00 !important;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
    transform: scale(0.95);
    transition: all 0.1s ease;
}

.bottom-navigation .save-button:active .nav-label {
    color: #00ff00 !important;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00, 0 0 30px #00ff00;
}

.bottom-navigation .save-button .nav-label {
    color: #ffffff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
}

/* Tab Content Switching */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Back Arrow Styling */
.back-arrow {
    transition: all 0.3s ease;
    user-select: none;
}

.back-arrow:hover {
    color: #667eea !important;
    text-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
    transform: translateX(-5px);
}

.back-arrow:active {
    color: #00ff00 !important;
    text-shadow: 0 0 10px #00ff00, 0 0 20px #00ff00;
    transform: scale(0.95);
}

/* Mobile Optimierung */
@media (max-width: 768px) {

    .bottom-navigation .edit-tab .nav-label,
    .bottom-navigation .save-button .nav-label {
        font-size: 13px;
    }
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .container:has(.edit-content) .bottom-navigation {
        height: 60px;
    }

    .bottom-navigation .edit-tab .nav-label,
    .bottom-navigation .save-button .nav-label {
        font-size: 13px;
    }
}

/* ============================================ */
/* LINEUP SYSTEM - Aufstellungs-Ansicht        */
/* ============================================ */

.lineup-container {
    padding: 20px 10px;
    max-width: 500px;
    margin: 0 auto;
}

.lineup-header {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.lineup-button {
    background: rgba(135, 252, 116, 0.2);
    border: 1px solid #87fc74;
    color: #87fc74;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lineup-button:hover {
    background: #87fc74;
    color: #000;
}

.lineup-pitch {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    position: relative;
    background: linear-gradient(180deg,
            #2d5016 0%,
            #3d6b1f 50%,
            #2d5016 100%);
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.lineup-pitch svg {
    width: 100%;
    height: auto;
    display: block;
}

.lineup-player {
    position: absolute;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.player-number {
    position: relative;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid #87fc74;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    font-size: 16px;
    margin: 0 auto 4px;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.player-name {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    max-width: 14vw;
    min-height: 20px;
    display: block;
    line-height: 20px;
    overflow: hidden;
    position: relative;
}

/* Marquee-Text innerhalb player-name */
.player-name .marquee-text {
    display: inline-block;
    white-space: nowrap;
    animation: marquee 5s ease-in-out infinite;
}

@keyframes marquee {

    0%,
    20% {
        transform: translateX(0);
    }

    80%,
    100% {
        transform: translateX(calc(-100% + 14vw - 16px));
    }
}

/* Alternativen-Menü (Drei Punkte) */
.alt-menu {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 18px;
    height: 18px;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(0, 0, 0, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
    color: #000;
    cursor: pointer;
    z-index: 20;
    transition: all 0.2s;
    line-height: 1;
    letter-spacing: -1px;
}

.alt-menu:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .alt-menu {
        width: 16px;
        height: 16px;
        font-size: 12px;
        top: -6px;
        right: -6px;
    }
}

/* Kader-Liste Modal */
.kader-modal {
    display: none;
    position: fixed;
    top: 90px; /* Unter dem Header auf Desktop */
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 2000;
    overflow: hidden;
}

.kader-modal.active {
    display: flex;
    align-items: flex-start; /* Von oben starten, nicht zentriert */
    justify-content: center;
    padding-top: 20px;
}

.kader-modal-content {
    background: rgba(20, 20, 20, 0.98);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    max-width: 900px;
    width: 90%;
    max-height: calc(100vh - 130px); /* Platz für Header + Padding */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kader-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.kader-modal-header h2 {
    color: white;
    font-size: 24px;
    margin: 0;
}

.kader-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 32px;
    height: 32px;
}

.kader-modal-close:hover {
    color: #87fc74;
}

.kader-position-group {
    margin-bottom: 30px;
}

.kader-position-title {
    color: #87fc74;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

.kader-player-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

@media (min-width: 768px) {
    .kader-player-list {
        grid-template-columns: repeat(3, 1fr);
        gap: 15px;
    }
}

.kader-player-item {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    display: block;
    color: white;
}

.kader-player-item:hover {
    background: rgba(135, 252, 116, 0.1);
    border-color: #87fc74;
    transform: translateY(-2px);
}

/* Erweiterte Kader-Item Ansicht */
.kader-player-item-extended {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    display: block;
    color: white;
}

.kader-player-item-extended:hover {
    background: linear-gradient(135deg, rgba(135, 252, 116, 0.15), rgba(135, 252, 116, 0.05));
    border-color: #87fc74;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(135, 252, 116, 0.2);
}

.kader-player-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.kader-player-info {
    flex: 1;
}

.kader-player-number {
    font-size: 16px;
    color: #87fc74;
    font-weight: bold;
    min-width: 35px;
}

.kader-player-name {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 2px;
}

.kader-player-position {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.kader-player-stats {
    display: flex;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.kader-player-stats-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
}

.stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.stat-label {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-value {
    font-size: 14px;
    color: #87fc74;
    font-weight: 700;
}

.stat-sublabel {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 1px;
}

.stats-icon {
    font-size: 14px;
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .lineup-container {
        padding: 15px 10px;
    }

    .lineup-pitch {
        max-width: calc(100vw - 40px);
    }

    .player-number {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .player-name {
        font-size: 11px;
        padding: 3px 6px;
    }

    .kader-modal-content {
        padding: 15px;
        margin-top: 0; /* Kein extra margin nötig, modal startet bei top: 70px */
        max-height: calc(100vh - 90px); /* Header 70px + etwas Padding */
        width: 95%;
    }

    .kader-modal-header h2 {
        font-size: 20px;
    }

    .kader-player-list {
        grid-template-columns: 1fr;
    }
}

/* ===== COOKIE BANNER ===== */
.cookie-banner {
    position: fixed;
    bottom: -100%;
    left: 0;
    right: 0;
    background: rgba(15, 15, 15, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 2px solid #87fc74;
    padding: 25px;
    z-index: 9999;
    transition: bottom 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
}

.cookie-banner.active {
    bottom: 0;
}

.cookie-banner-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 30px;
}

.cookie-text {
    flex: 1;
}

.cookie-text h3 {
    font-family: 'Russo One', sans-serif;
    font-size: 20px;
    color: #87fc74;
    margin-bottom: 10px;
}

.cookie-text p {
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

.cookie-text a {
    color: #87fc74;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s ease;
}

.cookie-text a:hover {
    border-bottom-color: #87fc74;
}

.cookie-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.cookie-btn {
    padding: 12px 24px;
    font-family: 'Russo One', sans-serif;
    font-size: 14px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.cookie-btn-accept {
    background: #87fc74;
    color: #000;
}

.cookie-btn-accept:hover {
    background: #6fd95e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(135, 252, 116, 0.3);
}

.cookie-btn-settings {
    background: transparent;
    color: #fff;
    border: 2px solid #87fc74;
}

.cookie-btn-settings:hover {
    background: rgba(135, 252, 116, 0.1);
    transform: translateY(-2px);
}

.cookie-btn-necessary {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.cookie-btn-necessary:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ===== COOKIE SETTINGS MODAL ===== */
.cookie-settings-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.cookie-settings-modal.active {
    display: flex;
}

.cookie-settings-content {
    background: #1a1a1a;
    border: 2px solid #87fc74;
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    padding: 30px;
}

.cookie-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.cookie-settings-header h2 {
    font-family: 'Russo One', sans-serif;
    font-size: 24px;
    color: #87fc74;
}

.cookie-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.cookie-close-btn:hover {
    transform: rotate(90deg);
    color: #87fc74;
}

.cookie-category {
    margin-bottom: 25px;
    padding: 20px;
    background: rgba(135, 252, 116, 0.05);
    border-radius: 8px;
    border-left: 4px solid #87fc74;
}

.cookie-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cookie-category-header h3 {
    font-family: 'Russo One', sans-serif;
    font-size: 18px;
    color: #fff;
}

.cookie-toggle {
    position: relative;
    width: 50px;
    height: 26px;
}

.cookie-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.cookie-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 26px;
    transition: background 0.3s ease;
}

.cookie-toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s ease;
}

.cookie-toggle input:checked+.cookie-toggle-slider {
    background: #87fc74;
}

.cookie-toggle input:checked+.cookie-toggle-slider:before {
    transform: translateX(24px);
}

.cookie-toggle input:disabled+.cookie-toggle-slider {
    opacity: 0.5;
    cursor: not-allowed;
}

.cookie-category-description {
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

.cookie-settings-actions {
    display: flex;
    gap: 15px;
    margin-top: 25px;
}

.cookie-settings-actions button {
    flex: 1;
}

/* Mobile Optimierung für Cookie Banner */
@media (max-width: 768px) {
    .cookie-banner-content {
        flex-direction: column;
        gap: 20px;
    }

    .cookie-actions {
        width: 100%;
        justify-content: stretch;
    }

    .cookie-btn {
        flex: 1;
        min-width: 0;
        font-size: 11px;
        padding: 10px 8px;
        white-space: normal;
        text-align: center;
        line-height: 1.2;
    }

    .cookie-settings-content {
        padding: 20px;
        margin: 10px;
    }

    .cookie-settings-header h2 {
        font-size: 20px;
    }

    .cookie-settings-actions {
        flex-direction: column;
    }
}

/* ============================================
   MOBILE APP LAYOUT - STATE OF THE ART
   Sauberes, modernes Layout für Mobile
   ============================================ */
@media (max-width: 768px) {
    /* Basis Reset für Mobile */
    html {
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    /* Container als App-Shell */
    .container {
        position: relative;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* === HEADER === */
    /* Fixed Header oben - IMMER sichtbar */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--header-height-mobile) !important;
        min-height: var(--header-height-mobile) !important;
        flex-shrink: 0 !important;
        z-index: var(--z-header) !important;
    }

    /* === JERSEY NAVIGATION === */
    /* Fixed unter dem Header */
    .main-menu {
        position: fixed !important;
        top: var(--header-height-mobile) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 998 !important;
        flex-shrink: 0 !important;
        transition: max-height var(--transition-slow) !important;
    }

    /* === MAIN CONTENT & TEAM CONTENT === */
    /* Scrollbarer Bereich - startet unter Header + Jersey-Nav (offen) */
    .main-content,
    .team-content {
        position: absolute !important;
        top: calc(var(--header-height-mobile) + var(--menu-height-mobile) + 10px) !important;
        left: 0 !important;
        right: 0 !important;
        bottom: var(--bottom-nav-height) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        padding: var(--spacing-sm) var(--spacing-md) 80px var(--spacing-md) !important;
        transition: top var(--transition-slow) !important;
    }

    /* Wenn Jersey-Nav geschlossen ist → Content nach oben */
    body.menu-closed .main-content,
    body.menu-closed .team-content,
    body:not(.is-mainpage):not(.menu-open) .main-content,
    body:not(.is-mainpage):not(.menu-open) .team-content {
        top: var(--header-height-mobile) !important;
    }

    /* Wenn Jersey-Nav offen ist auf Team-Seiten */
    body.menu-open .main-content,
    body.menu-open .team-content {
        top: calc(var(--header-height-mobile) + var(--menu-height-mobile) + 10px) !important;
    }

    /* News/Artikel zentrieren */
    .news-feed-container {
        max-width: 500px !important;
        margin: 0 auto !important;
        width: 100% !important;
    }

    .news-card {
        margin: 0 auto 12px auto !important;
        max-width: 100% !important;
    }

    /* === BOTTOM NAVIGATION === */
    .bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: var(--z-modal) !important;
        padding-bottom: env(safe-area-inset-bottom, 0) !important;
    }

    /* Verhindere horizontales Scrollen/Bouncing */
    .main-content,
    .team-content,
    .news-feed-container,
    .matches-container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* === SLIDE WINDOWS === */
    /* Panels starten direkt unter dem Header auf Mobile */
    #tabelleWindow,
    #spieltagWindow {
        top: var(--header-height-mobile) !important;
        height: calc(100vh - var(--header-height-mobile)) !important;
    }

    /* Kadertalk startet versteckt unten und fährt hoch */
    #kadertalkWindow {
        top: 100% !important;
        height: calc(100vh - var(--header-height-mobile)) !important;
    }

    #kadertalkWindow.active {
        top: var(--header-height-mobile) !important;
    }

    /* === KADER MODAL === */
    /* Modal startet unter dem Header auf Mobile */
    .kader-modal {
        top: var(--header-height-mobile) !important;
    }
}

/* ============================================
   DESKTOP/LAPTOP LAYOUT - WIE MOBILE, NUR GRÖSSER
   Gleiche Struktur wie Mobile für Konsistenz
   ============================================ */
@media (min-width: 769px) {
    /* === HEADER === */
    /* Fixed Header oben - IMMER sichtbar */
    .header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: var(--header-height-desktop) !important;
        min-height: var(--header-height-desktop) !important;
        z-index: var(--z-header) !important;
    }

    /* === JERSEY NAVIGATION === */
    /* Fixed unter dem Header - Standardmäßig geschlossen */
    .main-menu {
        position: fixed !important;
        top: var(--header-height-desktop) !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 998 !important;
        overflow: hidden !important;
        transition: max-height var(--transition-normal), opacity var(--transition-normal) !important;
    }
    
    /* Auf Mainpage immer offen (außer wenn .closing) */
    body.is-mainpage .main-menu:not(.closing) {
        max-height: var(--menu-height-desktop) !important;
        opacity: 1 !important;
    }
    
    /* Auf Mainpage geschlossen durch Toggle */
    body.is-mainpage .main-menu.closing {
        max-height: 0 !important;
        opacity: 0 !important;
    }
    
    /* Auf anderen Seiten: geschlossen (default) */
    body:not(.is-mainpage) .main-menu {
        max-height: 0 !important;
        opacity: 0 !important;
    }
    
    /* Auf anderen Seiten: offen durch Toggle */
    body:not(.is-mainpage) .main-menu.active {
        max-height: var(--menu-height-desktop) !important;
        opacity: 1 !important;
    }

    /* Jersey Items größer auf Desktop */
    .jersey-nav-section {
        padding: 15px 20px !important;
        gap: 25px !important;
        height: 100% !important;
        align-items: center !important;
    }

    .jersey-nav-item {
        min-width: 90px !important;
    }

    .jersey-nav-image {
        width: 70px !important;
        height: 70px !important;
    }

    .jersey-nav-tla {
        font-size: 13px !important;
    }

    /* === MAIN CONTENT === */
    /* Scrollbarer Bereich - Standardmäßig unter Header */
    .main-content,
    .team-content {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 60px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding: 20px !important;
        padding-bottom: 100px !important;
        transition: top 0.3s ease !important;
    }
    
    /* Auf Mainpage: Platz für Nav (außer wenn geschlossen) */
    body.is-mainpage .main-content,
    body.is-mainpage .team-content {
        top: 220px !important; /* Header 90px + Jersey-Nav 130px */
    }
    
    body.is-mainpage.menu-closed .main-content,
    body.is-mainpage.menu-closed .team-content {
        top: 90px !important;
    }
    
    /* Auf anderen Seiten: Standardmäßig unter Header */
    body:not(.is-mainpage) .main-content,
    body:not(.is-mainpage) .team-content {
        top: 90px !important;
    }
    
    /* Auf anderen Seiten: Platz für Nav wenn offen */
    body:not(.is-mainpage).menu-open .main-content,
    body:not(.is-mainpage).menu-open .team-content {
        top: 220px !important;
    }

    /* News zentriert mit max-width */
    .news-feed-container {
        max-width: 1200px !important;
        margin: 0 auto !important;
    }
}