/* 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(160deg, #2d2f4d 0%, #7a5af8 65%); /* Custom Lila Gradient für R */
      }

      .Character-L {
        background: linear-gradient(160deg, #6e4c42 0%, #e0c870 65%); /* Custom Gold Gradient für L */
      }

      .Character-LPlus {
        background: linear-gradient(160deg, #4d2d0a 0%, #f5a623 65%); /* Custom Orange Gradient für L+ */
      }

      .Character-LPlusPlus {
        background: linear-gradient(160deg, #5a2d2d 0%, #ff6b6b 65%); /* Custom Rot Gradient für L++ */
      }

      .Character-SPlus {
        background: linear-gradient(160deg, #4d2d0a 0%, #f5a623 65%); /* Custom 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('/7kRebirth/img/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('/7kRebirth/img/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 center; /* Mittig zentriert */
        
        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;
      }

      /* character-badge: liegt auf dem Bild, z-index höher als img (1) */
      .character-badge {
        position: absolute;
        top: 0;
        left: 0;
        width: 24px;
        height: 24px;
        z-index: 40;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        border-radius: 4px 0 4px 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        background: rgba(0, 0, 0, 0.75);
      }

      .character-badge-background {
        display: none;
      }

      .character-badge-class {
        width: 20px;
        height: 20px;
        object-fit: contain;
      }

      /* 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;
        }

        .character-badge {
          width: 18px !important;
          height: 18px !important;
        }

        .character-badge-class {
          width: 14px !important;
          height: 14px !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%;
      }