/* Desktop Layout - Content with fixed left margin and responsive right margin */
      /* Mobile responsive fixes for 7k Rebirth cardlist */
      /* Text color */
      .content-container {
        color: #e0e0e0;
      }

      .content-container h1,
      .content-container h2 {
        color: #e0e0e0;
      }

      /* Character List Styles */
      .character-list-container {
        margin: 20px 0;
      }

      .character-list-container h2 {
        text-align: center;
        margin-bottom: 20px;
        color: rgb(230, 230, 230);
        font-size: 2rem;
        text-shadow: 1px 2px 1px rgb(0, 0, 0);
      }

      strong {
        color: rgb(230, 230, 230);
      }

      .character-grid-container {
        width: 100%;
        margin: 0 auto;
      }

      .character-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 15px;
        padding: 20px;
        justify-items: center;
      }

      /* Responsive Design für verschiedene Bildschirmgrößen */
      @media (max-width: 1200px) {
        .character-grid {
          grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
          gap: 12px;
          padding: 15px;
        }
      }

      @media (max-width: 768px) {
        .character-grid {
          grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
          gap: 10px;
          padding: 10px;
        }
      }

      @media (max-width: 480px) {
        .character-grid {
          grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
          gap: 8px;
          padding: 8px;
        }
      }

      /* 7k Rebirth Character Card Styles - HOCHKANT */
      .Character-R, .Character-L, .Character-LPlus, .Character-LPlusPlus, .Character-SPlus {
        width: 140px !important;
        height: 200px !important; /* Hochkant statt quadratisch */
        margin: 0 !important;
        transition: all 0.3s ease;
        border-radius: 4px;
        position: relative;
        overflow: hidden;
      }


      /* Rarity-spezifische Gradient Backgrounds für 7kRebirth */
      .Character-R {
        background: linear-gradient(135deg, rgba(138, 43, 226, 0.7), rgba(75, 0, 130, 0.7)); /* Lila Gradient für R */
      }

      .Character-L {
        background: linear-gradient(135deg, rgba(255, 215, 0, 0.7), rgba(255, 165, 0, 0.7)); /* Gelb Gradient für L */
      }

      .Character-LPlus {
        background: linear-gradient(135deg, rgba(255, 165, 0, 0.7), rgba(255, 140, 0, 0.7)); /* Hell Orange Gradient für L+ und S+ */
      }

      .Character-LPlusPlus {
        background: linear-gradient(135deg, rgba(255, 69, 0, 0.7), rgba(255, 99, 71, 0.7)); /* Dunkel Orange Gradient für L++ */
      }

      .Character-SPlus {
        background: linear-gradient(135deg, rgba(255, 165, 0, 0.7), rgba(255, 140, 0, 0.7)); /* Hell Orange Gradient für S+ (gleich wie L+) */
      }

      /* Border-Verzierungen für Character Karten */
      .Character-LPlus::after,
      .Character-SPlus::after {
        content: '';
        position: absolute;
        top: 0px;
        right: 0px;
        width: 80px;
        height: 80px;
        background-image: url('https://ik.imagekit.io/frnrxcqkq/7krebirth/LPlusBorder.png');
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 30;
      }

      .Character-LPlusPlus::after {
        content: '';
        position: absolute;
        top: 0px;
        right: 0px;
        width: 80px;
        height: 80px;
        background-image: url('https://ik.imagekit.io/frnrxcqkq/7krebirth/LPlusPlusBorder.png');
        background-size: contain;
        background-repeat: no-repeat;
        z-index: 30;
      }

      /* Character Name Overlay */
      .character-name-overlay {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
        color: white;
        padding: 12px 4px 8px;
        text-align: center;
        font-weight: bold;
        font-size: 1.1rem;
        z-index: 25;
        transition: opacity 0.3s ease;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 1);
        -webkit-text-stroke: 0.3px rgba(0, 0, 0, 0.6);
      }

      /* Character Image - mit Zuschneiden */
      .character-image {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: cover; /* Bild zuschneiden statt verzerren */
        object-position: center top; /* Fokussiert auf obere Hälfte */
        
        z-index: 1;
        transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        cursor: pointer;
        image-rendering: -webkit-optimize-contrast;
        backface-visibility: hidden;
        perspective: 1000px;
        will-change: transform;
      }

      .character-image:hover {
        transform: scale(1.08);
        filter: contrast(1.0);
        image-rendering: -webkit-optimize-contrast;
      }

      /* Type Icons oben links auf den Cards */
      .character-type-icon {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 24px;
        height: 24px;
        z-index: 24;
        border-radius: 4px 0px 4px 0px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        padding: 2px;
      }

      .character-type-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
      }

      /* ----------------------------------------------------------------- */
      /* NEW FILTER BAR STYLES */
      /* ----------------------------------------------------------------- */
      
      .employees-filter-bar.lost {
        /* background-color: #1a1a1e;  REMOVED dark background */
        /* border: 1px solid #32323e; REMOVED border */
        border-radius: 4px;
        padding: 8px 12px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        margin-bottom: 24px;
        /* box-shadow: 0 4px 10px rgba(0,0,0,0.3); REMOVED shadow */
      }

      .filter-bar-element {
        display: flex;
        align-items: center;
      }

      /* Search Field */
      .filter-bar-element.search {
        position: relative;
        margin-right: 4px;
      }

      .filter-bar-element.search input.form-control {
        background-color: #0e0e11;
        border: 1px solid #32323e;
        border-radius: 4px;
        color: #e0e0e0;
        padding: 0 30px 0 10px;
        font-size: 0.9rem;
        height: 38px;
        width: 200px;
        transition: border-color 0.2s;
        box-sizing: border-box;
        line-height: 38px;
      }

      .filter-bar-element.search input.form-control:focus {
        outline: none;
        border-color: #6c5ce7;
      }

      .filter-bar-element.search .clear {
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #888;
        cursor: pointer;
        font-size: 1.2rem;
        line-height: 1;
        display: none;
        user-select: none;
      }

      .filter-bar-element.search input:not(:placeholder-shown) + .clear {
        display: block;
      }

      /* Button Groups */
      .btn-group {
        display: inline-flex;
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid #32323e;
      }

      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: #212126;
        color: #a0a0a0;
        border: none;
        border-right: 1px solid #32323e;
        padding: 0 16px;
        height: 38px;
        font-size: 0.9rem;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        text-decoration: none;
      }

      .btn:last-child {
        border-right: none;
      }

      .btn:hover {
        background-color: #2a2a30;
        color: #fff;
      }

      .btn.active {
        background-color: #7a5af8a1;
        color: #fff;
        box-shadow: inset 0 3px 5px rgba(0,0,0,0.125);
        border-color: #7a5af8a1;
      }

      .btn svg {
        fill: currentColor;
      }
      
      /* Reset Button */
      .reset-button {
        background-color: #2a2a30;
        border: 1px solid #32323e;
        border-radius: 4px;
        color: #a0a0a0;
        padding: 0 16px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        transition: all 0.2s;
        font-size: 0.9rem;
      }

      .reset-button:not([disabled]):hover {
        background-color: #7a5af8a1;
        border-color: #7a5af8a1;
        color: white;
      }

      .reset-button[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
      }

      /* Images inside buttons (like Types) */
      .btn img {
        width: 22px;
        height: 22px;
        object-fit: contain;
        /* filter: grayscale(100%);  REMOVED grayscale */
        transition: filter 0.2s;
        display: block;
      }

      
      /* Mobile responsiveness for Filter Bar */
      @media (max-width: 768px) {
        .employees-filter-bar.lost {
          flex-direction: column;
          align-items: stretch;
          padding: 10px;
        }

        .filter-bar-element {
          width: 100%;
          justify-content: center;
        }
        
        .filter-bar-element.search input.form-control {
          width: 100%;
        }

        .btn-group {
          width: 100%;
          display: flex;
        }

        .btn {
          flex: 1;
          padding: 0 4px;
          font-size: 0.85rem;
        }
        
        .reset-button {
          width: 100%;
          justify-content: center;
        }
      }


      /* Responsive Design für Filter */
      @media (max-width: 768px) {
        /* 25% kleinere Character-Karten für Mobile */
        .Character-R, .Character-L, .Character-LPlus, .Character-LPlusPlus, .Character-SPlus {
          width: 105px !important; /* 140px × 0.75 = 105px */
          height: 150px !important; /* 200px × 0.75 = 150px */
        }

        /* 25% kleinere Border-Bilder für Mobile */
        .Character-LPlus::after,
        .Character-SPlus::after,
        .Character-LPlusPlus::after {
          width: 60px !important; /* 80px × 0.75 = 60px */
          height: 60px !important; /* 80px × 0.75 = 60px */
          top: 0px !important;
          right: 0px !important;
        }

        /* 25% kleinere Type-Icons für Mobile-Karten */
        .character-type-icon {
          width: 18px !important; /* 24px × 0.75 = 18px */
          height: 18px !important; /* 24px × 0.75 = 18px */
          padding: 1.5px !important; /* 2px × 0.75 = 1.5px */
        }

        .character-type-icon img {
          width: 100% !important;
          height: 100% !important;
        }

        /* Angepasste Schriftgrößen für kleinere Mobile-Karten */
        .Character-R .character-name-overlay,
        .Character-L .character-name-overlay,
        .Character-LPlus .character-name-overlay,
        .Character-LPlusPlus .character-name-overlay,
        .Character-SPlus .character-name-overlay {
          font-size: 0.825rem !important; /* 1.1rem × 0.75 = 0.825rem */
          padding: 9px 3px 6px !important; /* 12px 4px 8px × 0.75 */
          -webkit-text-stroke: 0.225px rgba(0, 0, 0, 0.6) !important; /* 0.3px × 0.75 = 0.225px */
        }

        /* Hover-Effekte für kleinere Mobile-Karten anpassen */
        .Character-R:hover, .Character-L:hover, .Character-LPlus:hover,
        .Character-LPlusPlus:hover, .Character-SPlus:hover {
          transform: scale(1.05) !important;
        }

        /* Mobile Hover für Character Images */
        .Character-R .character-image:hover, .Character-L .character-image:hover,
        .Character-LPlus .character-image:hover, .Character-LPlusPlus .character-image:hover,
        .Character-SPlus .character-image:hover {
          filter: contrast(1.1) !important;
        }
      }


      /* Content container image styling */
      .content-container img {
        max-width: 100%;
      }