.elementor-4190 .elementor-element.elementor-element-24abf61{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-4190 .elementor-element.elementor-element-02b8e5e > .elementor-widget-container{margin:5rem 0rem 0rem 0rem;}.elementor-4190 .elementor-element.elementor-element-02b8e5e .elementor-heading-title{color:#EA542A;}.elementor-4190 .elementor-element.elementor-element-cd567f2 > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;}.elementor-4190 .elementor-element.elementor-element-cd567f2 .elementor-heading-title{color:#4F4D47;}.elementor-4190 .elementor-element.elementor-element-af5d6d7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-4190 .elementor-element.elementor-element-2aa46ac{--display:flex;}.elementor-4190 .elementor-element.elementor-element-691a4aa{--display:flex;}/* Start custom CSS for shortcode, class: .elementor-element-e7921c5 */.button-red {
    
    font-family: var(--e-global-typography-accent-font-family), Sans-serif;
    font-weight: var(--e-global-typography-accent-font-weight);
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    padding: 12px 24px;
    text-align: center;
    transition: all .3s;
}
.tabelle-titel {
    font-size: 18px;
    font-weight: bold;
    border-bottom: 1px solid black;
    padding-bottom: 6px;
    color: #4F4D47;
    max-width: 600px;
}

#spieler_liste {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.spieler-tag {
  display: inline-flex;
  align-items: center;
  background-color: #e2e2e2;
  color: #333;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 14px;
}

.spieler-tag .remove-btn {
  background: none;
  border: none;
  color: #E9542A;
  font-size: 16px;
  cursor: pointer;
  margin-left: 6px;
  padding: 0;
}

.spieler-tag .remove-btn:hover {
  color: white;
}

.spieler-btn {
    line-height: 1px;
    background-color: #E9542A;
}

.spieltag-erstellen-btn,
.spieltag-speichern-btn {
    font-size: 14px;
    background-color: #E9542A;
    border-radius: 4px;
    color: #FFFFFF;
    cursor: pointer;
}

.spieltag-erstellen-btn:hover,
.spieltag-speichern-btn:hover {
    background-color: #D44220;
    color: #FFFFFF;
}

.spieltag-erstellen-btn:active,
.spieltag-speichern-btn:active {
    background-color: #d9d9d9;
    color: #f9f9f9;
}

.spieltag-erstellen-btn:focus,
.spieltag-speichern-btn:focus {
    background-color: #d9d9d9;
    color: #f9f9f9;
}

.spieltag-erstellen-btn:target {
    background-color: #d9d9d9;
    color: #f9f9f9;
}

.spieltag-erstellen-btn:disabled {
    background-color: #ccc;
    color: #999;
    cursor: default;
}

 .table-rangliste2 th:nth-child(1),
.table-rangliste2 td:nth-child(1) {
    width: 5%;
    white-space: nowrap;
    text-align: center;
}

.table-rangliste2 th:nth-child(3),
.table-rangliste2 td:nth-child(3) {
    width: 40%;
}

.modopt {
    color: #e9542a;
}

.icon-start {
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
}

.checkbox-label {
  display: flex;
  align-items: center; 
  gap: 6px;             
  font-size: 16px;
}

.ergebnis-wrapper input[type="number"] {
  background: transparent;
  border: none;
  color: white;
  font-weight: 900;
  width: 24px;
  height: 100%;
  text-align: center;
  font-size: 16px;
  padding: 5px 0;
  font-family: 'Inter', sans-serif;;
}

input[type="checkbox"] {
  accent-color: #e9542a; /* z. B. grün */
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  margin-right: 6px;
}

.runde-start-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
 /* margin-left: auto;
  position: absolute; */
  right: 0;
  /* transform: scale(0.8);*/
  transition: transform 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
}

.runde-start-btn:hover {
  transform: scale(1.05);
  background: none;
}

.stoppuhr-btn {
   /* border: 2px solid #E9542A; */
    border-radius: 999px; 
    padding: 5px 15px; 
    /*color: #E9542A; */
    background-color: #e9e9e9;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    display: flex;
  align-items: center;
  gap: 6px;
}

.stoppuhr-btn:hover {
   /* border: 2px solid #E9542A; */
    border-radius: 999px; 
    padding: 5px 15px; 
    
    background-color:  #e2e2e2;
}

.stoppuhr-btn .icon-start {
  font-size: 28px;
  color: #e9542a;
}

#zeit_popup .tor-button {
  
 
  width: 50px;
  height: 50px;
  border: 2px solid white;
  background: transparent;
  color: white;
  font-size: 28px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

#zeit_popup .tor-button:hover {
  background: rgba(255, 255, 255, 0.2);
}

#zeit_popup .tor-button .plus-icon {
  display: inline-block;
  font-size: 28px;
  line-height: 1;
}

#zeit_popup .tor-button.visible {
  opacity: 1;
  pointer-events: auto;
  backdrop-filter: blur(2px);
}

#zeit_timer {
    font-size: 15rem;
    font-weight: 900;
    text-align: center;
    line-height: 1.1;
    color: white;
}

#zeit_titel {
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 1rem .5rem !important;
}

#zeit_spielinfo {
  font-size: 1rem;
  font-weight: 600;
  color: #ccc;
  margin-bottom: 0.5rem;
  text-align: center;
}

#champion_controls {
  display: none;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

#champion_controls.sichtbar {
  display: flex;
}

body.freier-modus #champion_controls {
  display: flex;
}

#timer_controls {
  display: flex;
  gap: 5rem;
  align-items: center;
  justify-content: center;
}

#timer_controls button,
.tor-button {
  cursor: pointer;
  border-radius: 999px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

#timer_controls button:hover,
.tor-button:hover {
  transform: translateY(-1px);
}

#timer_controls button:active,
.tor-button:active {
  transform: translateY(0);
}


#pause_button, #close_timer {
    width: 60px;
    height: 60px;
    padding: 0.75rem;
    border: 2px solid white;
    border-radius: 50%;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

#pause_button svg,
#close_timer svg {
  width: 28px;
  height: 28px;
  display: block;
  fill: white;
}

#close_timer {
  color: #fff;
  font-weight: 700;
}

.desktop-layout {
  display: flex;
}

.champion-controls {
  display: flex;
  align-items: center;
  justify-content: center;
}

.player-label {
  font-size: clamp(1rem, 2vw, 1.4rem);
}

#zeit_live_ergebnis {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 900;
  min-width: 5.5ch;
  text-align: center;
}

.tor-button .plus-icon {
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 900;
  line-height: 1;
}

#zeit_timer.timer-critical {
  color: #ff3b30;                  /* rot */
  text-shadow: 0 0 10px rgba(255,59,48,.4);
}

/* Desktop-UI bei kleinen Screens ausblenden */
@media (max-width: 900px) {
  .desktop-layout {
    display: none !important;
  }
  
      #zeit_timer {
        font-size: 8rem;
        margin-bottom: 1rem;
    }
    
   #timer_controls button {
    padding: 1.1rem 1.4rem;          /* grösserer Klickbereich */
    min-width: 96px;                  /* breiter */
    min-height: 96px;                 /* höher (mind. ~48px) */
  }
  #pause_button svg,
  #close_timer svg {
    width: 34px;
    height: 34px;
  }
  
  .zeit-start-btn {
    display: block;         /* statt inline-flex */
    width: 100%;
    flex: 1 1 100%;         /* falls er in einem Flex-Wrapper sitzt */
  }
  
  .zeit-start-btn .stoppuhr-btn {
    width: 100%;
    justify-content: center;

    font-size: 18px;
    border-radius: 0px;
  }
  .zeit-start-btn .icon-start { font-size: 28px; }
  
  /* Nur Effizienzrangliste – dank Wrapper-Klasse */
.table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.table-scroll table {
  border-collapse: collapse;
  letter-spacing: 0;
  width: max-content !important;   /* behält horizontales Scrollen */
  min-width: 640px;                /* ggf. kleiner/grösser stellen */
  max-width: none !important;
  table-layout: auto;              /* auto = bessere natürliche Breiten */
}

.table-scroll th,
.table-scroll td {
  white-space: nowrap;
  padding: 4px 6px;                /* engeres Padding */
  font-size: 14px;
}

/* Optional: schmaler Scrollbalken */
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.25); border-radius: 4px; }

.table-scroll th:nth-child(3),
.table-scroll td:nth-child(3) {
  width: 100px;        /* Wunschbreite einstellen */
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Rang/Platz sehr schmal halten (üblich: 1. Spalte) */
.table-scroll th:nth-child(2),
.table-scroll td:nth-child(2), 
.table-scroll th:nth-child(1),
.table-scroll td:nth-child(1) {
  width: 30px;
  max-width: 30px;
  text-align: right;
}



/* Alle "Zahlenspalten" rechtsbündig (wirkt kompakter/lesbarer) */
.table-scroll th:not(:nth-child(3)),
.table-scroll td:not(:nth-child(3)) {
  text-align: left;
}
  
    
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-b7ac273 */.ranglisten-wrapper {
    max-width: 800px;
    margin: auto;
  }

  .ranglisten-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
  }

  .spieltag-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: #F2F2F2;
  }

  .stkv-button2 {
    background: #E9542A;
    padding: 15px 10px;
    cursor: pointer;
  }
  
    .stkv-button2:hover {
    background: #d44220;
    padding: 15px 10px;
    cursor: pointer;
  }
  
   .stkv-button2:focus {
    background: #d44220;
    padding: 15px 10px;
    cursor: pointer;
    color: #fff;
  }
  
  .stkv-button-gesamttabelle {
      background: #d44220;
  }

  .rangliste-block {
    display: none;
  }

  .rangliste-block.active {
    display: block;
  }
  

  #spieltag-label {
    min-width: 100px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
  }
  
  /* Basis-Styling für die Tabelle */
.table-rangliste2 {
    width: 100%;
    border-collapse: collapse; /* Verhindert doppelte Linien */
    font-size: 13px;
    text-align: left;
    border: none; /* Keine äußeren Ränder */
    table-layout: fixed;
}
.table-rangliste2 thead tr {
    color: #4F4D47; /* Weißer Text */
    text-align: left;
}
.table-rangliste2 th, .table-rangliste2 td {
    padding: 8px 5px;
    border: none; /* Keine vertikalen Linien */
    border-bottom: 2px solid #fff; /* Nur horizontale Linien */
}

/* Standard-Hintergrundfarbe der Zeilen */
.table-rangliste2 tbody tr {
    background-color: #f9f9f9;
    transition: background-color 0.3s ease; /* Weicher Übergang für Hover */
}

/* Hover-Effekt für die gesamte Zeile */
.table-spieltag2 tbody tr:hover {
    background-color:#E4E4E4; /* Sehr dezentes Grau für Hover */
}

.table-spieltag2 td:nth-child(3),
.table-spieltag2 td:nth-child(4),
.table-spieltag2 td:nth-child(5)
{
    background-color: #4e4d48;
    text-align: center;
    font-weight: bold;
    color: white;
    
}

.table-spieltag2 td:nth-child(1),
.table-spieltag2 td:nth-child(7)
{
    width: 30%;
}
.table-spieltag2 td:nth-child(2),
.table-spieltag2 td:nth-child(6){
    width: 10%;
}
.table-spieltag2 td:nth-child(3),
.table-spieltag2 td:nth-child(5){
    width: 9%;
}
    
.table-spieltag2 td:nth-child(3)
{
    padding-left: 5%;
    padding-right: 0px;
    
}

.table-spieltag2 td:nth-child(5)
{
    padding-right: 5%;
    padding-left: 0px;
    
}

.table-spieltag2 td:nth-child(4) {
width: 2%;
    padding-left: 0;
    padding-right: 0;
}

/* Rechtsbündige Ausrichtung der ersten Spalte */
.table-spieltag2 td:first-child {
    text-align: right; /* Rechtsbündig */
}

/* Hover-Effekt für Spielernamen */
.hover-effect {
    color: #333; /* Standardfarbe des Texts */
    transition: color 0.5s ease, font-weight 0.3s ease;
}


/* Hover-Effekt für Logos */
.logo {
    height: 20px !important; /* Höhe des Logos */
    width: auto; /* Automatische Breite für Proportionen */
    display: block;
    margin: 0 auto; /* Zentriert das Logo */
    filter: grayscale(100%); /* Logo farblos */
    transition: filter 0.5s ease;
}
.table-spieltag2 tbody tr:hover .logo {
    filter: grayscale(0%); /* Logo farbig, wenn die Zeile gehighlightet wird */
}

.table-rangliste2 td:nth-child(6) {
    background-color: #ea542a;
    text-align: center;
    font-weight: bold;
    color: white;
}

.table-rangliste2 td:first-child {
    text-align: right;
}

.table-rangliste2 tbody tr:hover {
    background-color: #f2f2f2;
}/* End custom CSS */