/* Tablet Responsive Styles - min-width: 48em (768px) */

@media (min-width: 48em) {
  .header-container {
    flex-direction: row;
    justify-content: space-between;
    padding: 1.5rem 2rem;
  }

  .header-title {
    order: -1;
    margin-right: auto;
  }

  .header-logo {
    order: -2;
    margin-right: 1rem;
  }

  .header .search-container {
    max-width: 24rem;
  }

  .pokemon-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .main {
    padding: 1.5rem 2rem;
    padding-top: 140px;
  }

  .modal-container {
    margin: var(--spacing-xl);
  }

  .modal-header {
    padding: var(--spacing-lg);
  }

  .modal-container .pokemon-detail {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
  }

  .modal-body {
    padding: var(--spacing-lg) var(--spacing-lg) 1.5rem;
    padding-bottom: 1.5rem !important;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .modal-info-section {
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
    margin-left: 3rem !important;
    margin-right: 3rem !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 1rem !important;
    flex-grow: 1;
  }
}

/* Kein Scrollen ab 768px Breite UND 750px Höhe */
@media (min-width: 768px) and (min-height: 750px) {
  .modal-container {
    max-width: 600px;
    width: 600px;
    max-height: 700px;
    height: 700px;
  }

  .modal-body {
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
  }

  .modal-info-section {
    max-height: none !important;
    overflow-y: hidden !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  .tab-pane.tab-scrollable {
    padding-bottom: 0 !important;
  }
}

  .modal-image-section {
    padding: 1.25rem;
    margin-bottom: 1.5rem;
  }

  .modal-pokemon-image {
    width: 9rem;
    height: 9rem;
    margin: 0.75rem auto;
  }

  .modal-navigation {
    padding: var(--spacing-lg);
  }

  .nav-arrow {
    width: 3rem;
    height: 3rem;
    font-size: 1.2rem;
    bottom: 1.25rem;
  }

  .nav-arrow-prev {
    left: 1.5rem;
  }

  .nav-arrow-next {
    right: 1.5rem;
  }

  .nav-icon {
    width: 1.2rem;
    height: 1.2rem;
  }

  .pokemon-detail {
    padding: 3rem 2.5rem 2rem;
  }

  .modal-container .pokemon-detail-image {
    width: 6rem;
    height: 6rem;
    margin: 0.75rem 0;
  }

  .modal-container .pokemon-detail-name {
    font-size: var(--font-size-xl);
  }

  .modal-container .pokemon-detail-id {
    font-size: var(--font-size-base);
    padding: 0.375rem 0.75rem;
  }

  .search-container {
    width: auto;
    padding: 0 var(--spacing-lg);
    gap: var(--spacing-md);
  }

  .search-input {
    font-size: 1.125rem;
  }

  .search-suggestions {
    right: 4rem;
    max-height: 16rem;
  }

  .suggestion-item {
    padding: var(--spacing-md);
  }

  .search-filters {
    justify-content: center;
  }

  /* Pokemon Card Background auf größeren Bildschirmen anpassen */
  .pokemon-card.bg-fire { background: var(--type-fire); }
  .pokemon-card.bg-water { background: var(--type-water); }
  .pokemon-card.bg-grass { background: var(--type-grass); }
  .pokemon-card.bg-electric { background: var(--type-electric); }
  .pokemon-card.bg-psychic { background: var(--type-psychic); }
  .pokemon-card.bg-ice { background: var(--type-ice); }
  .pokemon-card.bg-dragon { background: var(--type-dragon); }
  .pokemon-card.bg-dark { background: var(--type-dark); }
  .pokemon-card.bg-fighting { background: var(--type-fighting); }
  .pokemon-card.bg-poison { background: var(--type-poison); }
  .pokemon-card.bg-ground { background: var(--type-ground); }
  .pokemon-card.bg-flying { background: var(--type-flying); }
  .pokemon-card.bg-bug { background: var(--type-bug); }
  .pokemon-card.bg-rock { background: var(--type-rock); }
  .pokemon-card.bg-ghost { background: var(--type-ghost); }
  .pokemon-card.bg-steel { background: var(--type-steel); }
  .pokemon-card.bg-fairy { background: var(--type-fairy); }
  .pokemon-card.bg-normal { background: var(--type-normal); }

  /* Pokemon Detail Background auf größeren Bildschirmen anpassen */
  .modal-container .pokemon-detail.fire { background: rgba(255, 99, 71, 0.25); }
  .modal-container .pokemon-detail.water { background: rgba(100, 149, 237, 0.25); }
  .modal-container .pokemon-detail.grass { background: rgba(144, 238, 144, 0.25); }
  .modal-container .pokemon-detail.electric { background: rgba(255, 215, 0, 0.25); }
  .modal-container .pokemon-detail.psychic { background: rgba(221, 160, 221, 0.25); }
  .modal-container .pokemon-detail.ice { background: rgba(173, 216, 230, 0.25); }
  .modal-container .pokemon-detail.dragon { background: rgba(138, 43, 226, 0.25); }
  .modal-container .pokemon-detail.dark { background: rgba(105, 105, 105, 0.25); }
  .modal-container .pokemon-detail.fairy { background: rgba(255, 182, 193, 0.25); }
  .modal-container .pokemon-detail.fighting { background: rgba(165, 42, 42, 0.25); }
  .modal-container .pokemon-detail.poison { background: rgba(160, 32, 240, 0.25); }
  .modal-container .pokemon-detail.ground { background: rgba(222, 184, 135, 0.25); }
  .modal-container .pokemon-detail.flying { background: rgba(135, 206, 235, 0.25); }
  .modal-container .pokemon-detail.bug { background: rgba(154, 205, 50, 0.25); }
  .modal-container .pokemon-detail.rock { background: rgba(188, 143, 143, 0.25); }
  .modal-container .pokemon-detail.ghost { background: rgba(128, 128, 128, 0.25); }
  .modal-container .pokemon-detail.steel { background: rgba(192, 192, 192, 0.25); }
  .modal-container .pokemon-detail.normal { background: rgba(245, 245, 220, 0.25); }
}