#league-button-right { right: 2vw; }

body{
    overflow-y: scroll;
}

.container {
    height: 200vh; /* Doppelte Höhe, um den Scroll-Effekt sichtbar zu machen */
}

.first-section, .second-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
}

.second-section {
    z-index: 2;
    background: rgba(51, 51, 51, 0.97); /* Transparenz */
    color: white;
    transform: translateY(100%);
    flex-direction: row;
    align-items: center;
}

.container.scrolled .second-section {
    transform: translateY(0);
}

/* Tabellen Container */
.tables-container {
    width:95%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin: 5vh;
    padding: 10px;
    height: 69vh;
}

/* Liga-Tabelle & Match-Tabelle */
.league-table {
    width: 37%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    justify-content: center; 
    align-items: flex-start;
    margin: auto; 
}

.match-table {
    width: 37%;
    height: 100%;
    overflow-y: auto;
    display: flex;
    /*flex-direction: column;*/
    justify-content: center;
    align-items: flex-start; 
    margin: auto;
}

.button-container{
    width: 20%;
    display:flex;
    flex-direction: column;
    padding: 2vh;
    gap: 2vh;
}

table {
    width: 100%;
    border-collapse: collapse;
    background-color: rgb(240, 240, 240);
    table-layout: fixed;
    height: 100%;
}

/* Scrollbar-Styling */
.match-table::-webkit-scrollbar { width: 4px; }
.match-table::-webkit-scrollbar-track { background: transparent; }
.match-table { scrollbar-width: thin; }

/* Hintergrundfarben für Tabellenzeilen */
tbody tr { background-color: transparent; }
.green-row { background-color: green !important; }
.last-three td { background-color: hsl(0, 100%, 65%); }
.first-three td { background-color: rgb(0, 202, 0); }
.relegation td { background-color: rgb(161, 246, 161); }
.relegation-bottom td { background-color: rgb(246, 162, 161); }
.final-four td { background-color: rgb(101, 145, 255); }

/*  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~  */
/*   ~ ~ ~ ~ ~ ~ ~ ~ ~   */
/*  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~  */
/*   ~ ~ ~ ~ ~ ~ ~ ~ ~   */
/*  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~  */
/*   ~ ~ ~ ~ ~ ~ ~ ~ ~   */
/*  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~  */
/*   ~ ~ ~ ~ ~ ~ ~ ~ ~   */
/*  ~ ~ ~ ~ ~ ~ ~ ~ ~ ~  */

/*2te seite*/
.left, .right {
    flex: 1;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20vh;
}


#nachholspiele {
    width: 80%;
    min-height: 25vh;
}

.table-slideshow{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 25vh;
}

.slide {
    display: flex;
    width:80%;
    justify-content: center;
    align-items: start;
    height: 30vh;
    overflow-y: auto;
}

.slide table {
    width: 100%;
}

/* Next and previous buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    border-radius: 0 3px 3px 0;
    user-select: none;
    background-color: rgba(0,0,0,0.8); /* Hintergrund immer sichtbar */
}

/* Position the "next button" to the right */
.next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* Style the "prev" button */
.prev {
    left: 0;
    border-radius: 3px 0 0 3px;
}

/* The dots/bullets/indicators */
.dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active, .dot:hover {
    background-color: #717171;
}

/*matchday tabelle*/
.matchday-table {
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    width: 90%;
    text-align: center;
    max-height: 60vh;
    height: fit-content;
}
.matchday-table.activeTable tbody {
  display: block;
  max-height: 50vh;
  min-height: 10vh;
  width: auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.matchday-table.activeTable {
   margin-block: auto;
    opacity: 1;
    filter: none;
    z-index: 2;
}

.matchday-table.previousTable {
    margin-bottom: 1vh;
    z-index: 1;
    pointer-events: none;
    height: 5vh;
}
.matchday-table.previousTable tbody {
  display: block;
  height: 10vh;
  overflow-y: hidden;
}

.matchday-table.nextTable {
    margin-top: 1vh;
    background-color: white;
    z-index: 1;
    pointer-events: none;
    height: 5vh;
}
.matchday-table.nextTable tbody {
  display: block;
  height: 10vh;
  overflow-y: hidden;
}

.matchday-table.faded {
    opacity: 0.5;
    filter: blur(2px);
}
/* Für das hovern über die Spiele*/
.matchday-table tbody tr:has(td) {
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.matchday-table tbody tr:has(td):hover {
    background-color: #d4d4d4;
    font-weight: bold;
}


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

.matchday-slideshow {
    position: relative;
    display: flex;
    place-items: center;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    max-height: 100vh;
    width: 70%;
}


/* Für das hovern über die Spiele */
.match-table .match-row {
    cursor: pointer;
}

.league-table-row:hover {
    cursor: pointer;
    font-weight: bold;
}

.match-table .match-row:hover {
    font-weight: bold;
    background-color: #d4d4d4;
}

.prevDay, .nextDay {
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 3vh;
    border: none;
    padding: 1vh 1.5vh;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    position: absolute;
    z-index: 10;
}

.prevDay {
    top: 3vh; /* Überlappt die obere faded Matchday */
}

.nextDay {
    bottom: 3vh; /* Überlappt die untere faded Matchday */
}

.prevDay:hover, .nextDay:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.1);
}


/* matchday sidebar*/
.md-container{
    display: flex;
    justify-content: center;
    gap:0;
    height:80vh;
}

.matchday-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
}

#matchday-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.matchday-btn {
    width: 4vh;
    height: 4vh;
    font-size: 2.5vh;
    font-weight: bold;
    border: none;
    background: var(--primary-color);
    color: white;
    border-radius: var(--border-radius);
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.matchday-btn:hover {
    background: white;
    color: var(--primary-color);
    transform: scale(1.1);
}

.matchday-btn.active {
    color: white;
    background: var(--secondary-color);
}

/* Wenn man über ein Spiel hovert, ändert sich der Cursor in die Hand */
/*td {
    cursor: pointer;
}

tr:hover {
    font-weight: bold;
    cursor: pointer;
}*/

/* Der Modal-Hintergrund (leicht transparent und über dem Inhalt) */
.modal {
    display: none; /* Standardmäßig versteckt */
    position: fixed;
    z-index: 1000; /* Setzt es im Vordergrund */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Halbtransparentes Schwarz */
    justify-content: center;
    align-items: center;
}

/* Modal-Inhalt */
.modal-content {
    background-color: #d4d4d4;
    color: black;
    padding: 20px;
    border-radius: 10px;
    width: 50%;
    max-width: 600px;
    margin: auto;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative;
}

/* Schließen-Knopf (X) */
.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    cursor: pointer;
    color: #000;
}

/* Karten-Container */
#maps-container {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* Reihen mit Maps */
.maps-row {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.map-box{
    padding: 10px;
    border: 2px solid;
    border-Radius: 5px;
    background-Color: #f9f9f9;
    text-Decoration: none;
    color:#333;
    display: inline-block;
    min-Width: 120px;
    text-Align: center;
}

/* Gewinnerfarben setzen */
.map-box.blue {
    border-color: blue;
}

.map-box.red {
    border-color: red;
}

/*statsModal-Inhalt Eigenschaften*/
.player-info {
    margin-top: 1em;
    margin-bottom: 1em;
    border-collapse: collapse;
    border: none;
    font-style: normal;
  }

  .player-info td {
    padding: 0.2em 0.5em;
    vertical-align: center;
    border: none;
    text-align: left;
    font-style: normal;
  }

  .player-info .label {
    font-weight: bold;
    text-align: right;
    white-space: nowrap;
  }

thead th.sort-asc::after { content: " ▲"; font-size: 0.8em; }
thead th.sort-desc::after { content: " ▼"; font-size: 0.8em; }




@-moz-document url-prefix() {
    tr, th, td, thead {
        height: 1em;
    }
}
@media (max-width: 1350px) {
  thead th, td {
  font-size: 0.8rem;
  }
}
/* Make tables responsive on smaller screens */
@media (max-width: 1024px) {

  .container {
    height: auto;
    min-height: 100%;
  }

  /* Put sections back into normal flow */
  .first-section,
  .second-section {
    position: static;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    min-height: 0;
    transform: none;
    z-index: auto;
  }

  .button-container {
    flex-direction: row;     /* place buttons side by side */
    justify-content: center; /* center them horizontally */
    align-items: center;
    width: 100%;             /* let them stretch across the screen */
    gap: 4vw;                /* space between buttons */
  }

  .button-container .button {
  flex: 1;                 /* make both buttons take equal space */
  text-align: center;
  padding: 1em;
  font-size: clamp(0.9rem, 3.5vw, 1.2rem);
}

.table-scroll { max-height: 60vh; }

  thead th, td {
  padding: 6px 8px;
  font-size: 0.8rem;
  line-height: 1.2;
}

  html, body {
    height: auto;
  }

  body {
    min-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  /* avoid stray horizontal overflow from vw */
  header {
    width: 100%;
  }
  .arrow {
  position: static;
  transform: none;
  margin: 16px auto 24px;
  text-align: center;
}

  header h1 {
    font-size: clamp(1.5em, 5vw, 2.5em);
    text-align: center;
  }


  /* Limit vertical size for tables */
  .league-table table, .match-table table {
    max-height: 69vh;          /* adjust as needed */
    overflow-y: auto;           /* enable vertical scrolling inside */
    display: block;             /* required for overflow to work */
  }

  .tables-container {
    flex-direction: column;      /* stack */
    align-items: stretch;
    justify-content: flex-start;
    gap: 16px;
    margin: 2vh 10px;
    padding: 0;
    height: auto;                /* remove 69vh lock */
  }

  .league-table,
  .match-tables {
    width: auto;
    height: auto;
    margin: 0;
  }

  .match-tables {
    align-self: center;
  }

  /* make each match-table use full width on mobile */
  .match-table,
  .match-table:first-of-type,
  .match-table:last-of-type {
    width: 100% !important;    /* override the 80% desktop rule */
    margin: 0;
  }


  .league-table thead,
  .match-table thead {
    position: sticky;
    top: 0;
    z-index: 1;                /* keep it above rows */
    background-color: #2a2c6b; /* match your header color */
  }

  .league-table,
  .match-table,
  table {
    width: auto;
    height: auto;          /* drop fixed 100% heights */
    max-height: none;
  }

  table {
    width: auto;
    table-layout: auto;          /* allow natural column widths */
    display: block;              /* enable horizontal scroll */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    height: auto;                /* drop 100% height */
  }

  /* override <col style="width:…"> from colgroup */
  colgroup col {
    width: auto !important;
  }

  thead th, td {
    padding: 6px 8px;
    font-size: 0.9rem;           /* smaller text on mobile */
  }

  /* allow labels/names to wrap instead of ellipsis everywhere */
  thead th {
    white-space: normal;
  }
  tbody td {
    white-space: normal;         /* allow wrapping for names */
    text-overflow: clip;
  }
}

@media (max-width: 860px) {
  .second-section {
    display: flex;           /* ensure it's a flex container */
    flex-direction: column;  /* stack top-to-bottom */
    align-items: stretch;    /* children take full width */
    gap: 16px;               /* space between left/right (optional) */
  }

  .left,
  .right {
    flex: 0 0 auto;          /* undo "flex: 1" so they don't stretch */
    width: 100%;
    padding: 16px;           /* optional tighter padding on mobile */
    gap: 16px;               /* reduce huge 20vh gap for mobile */
  }

  .second-section { align-items: stretch; }
    .left { align-self: stretch; width: 100%; }

    /* slideshow wrapper should not cap width */
    .table-slideshow { align-items: stretch; }
    .slide {
      width: 100% !important;   /* override 80% */
      display: block;           /* avoid inner flex shrink issues */
      overflow-x: auto;         /* allow sideways scroll if needed */
      -webkit-overflow-scrolling: touch;
      padding-inline: 10px;     /* small side breathing room */
    }

    /* Make the actual tables take all the space */
    #nachholspiele,
    #yellowCards,
    #extensions,
    #pinpointTable,
    .slide table {
      width: 100% !important;
      max-width: 100%;
      display: table;           /* undo 'display:block' from global mobile rule */
      table-layout: fixed;      /* even column distribution */
      border-collapse: collapse;
    }

    /* prevent long names from blowing up the layout */
    #nachholspiele th, #nachholspiele td,
    #yellowCards th, #yellowCards td,
    #extensions th, #extensions td,
    #pinpointTable th, #pinpointTable td {
      white-space: normal;
      word-break: break-word;
    }

    /* sticky headers for these tables too */
    #nachholspiele thead,
    #yellowCards thead,
    #extensions thead,
    #pinpointTable thead {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #2a2c6b;
      color: #fff;
    }

}