.elementor-5235 .elementor-element.elementor-element-a374b87{--display:flex;}.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-5235 .elementor-element.elementor-element-1545fa4 > .elementor-widget-container{margin:5rem 0rem 0rem 0rem;}.elementor-5235 .elementor-element.elementor-element-1545fa4 .elementor-heading-title{color:#EA542A;}.elementor-5235 .elementor-element.elementor-element-58ee362 > .elementor-widget-container{margin:0rem 0rem 0rem 0rem;}.elementor-5235 .elementor-element.elementor-element-58ee362 .elementor-heading-title{color:#4F4D47;}.elementor-5235 .elementor-element.elementor-element-6dd5517{--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-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-5235 .elementor-element.elementor-element-23e62de{width:var( --container-widget-width, 600px );max-width:600px;--container-widget-width:600px;--container-widget-flex-grow:0;font-family:"Roboto", Sans-serif;font-weight:400;}/* Start custom CSS for shortcode, class: .elementor-element-d7ba7b0 */.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: 16px;
    line-height: 1;
    padding: 12px 24px;
    text-align: center;
    transition: all .3s;
}
h4.tabelle-titel {
font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 900;
    text-transform: uppercase;
    border-bottom: 1px solid black;
    padding-bottom: 4px;
    color: #4F4D4;
    margin: 0px 0px 12px;
    letter-spacing: 0.5px;
    line-height: 32px;
}

#spieler_liste,
#spieler_liste_frei {
  list-style: none;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 600px;
  overflow-wrap: break-word;
}

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

.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: 16px;
    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%;
}

.table-rangliste2 th,
.table-rangliste2 thead {
    background: none !important;
}

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

.option-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.option-row label {
  white-space: nowrap;
}

.schiri-zelle {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 500px) {
  .schiri-name {
    font-size: 10px;
  }
}
input[type="checkbox"] {
  accent-color: #e9542a; /* z. B. grün */
  -webkit-transform: scale(1.4);
  transform: scale(1.4);
  margin-right: 6px;
}

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

td.spielername {
  max-width: 80px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 900;
}

/* Für die Toreingabe-Felder */
td.ergebnisfeld input {
  min-width: 30px;
  max-width: 40px;
  text-align: center;
  background: white;
  border: 1px solid #ccc;
  padding: 4px;
  font-size: 16px;
}

td.ergebnisfeld {
    text-align: center;
}

input.toreingabe {
  background-color: white;
  color: black;
  font-weight: 900;
  border: 1px solid #ccc;
  transition: all 0.2s ease-in-out;
  
  padding: 5px;
    text-align: center;
        font-family: 'Inter', sans-serif;
}

/* Zustand: leer */
input.toreingabe.empty {
  background-color: #f0f0f0;
  color: #999;
}

input.toreingabe:focus {
    border-color: #E9542A;
    background-color: #fff7f7;
    outline: none;
    color: #000;
    border-radius: 6px;
    transition: all 0.15s ease-in-out;
}

/* Zustand: nach Speichern (disabled) */
input.toreingabe.saved {
  background-color: transparent;
  border: none;
  font-weight: bold;
  color: black;
}

.zeit-popup {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  text-aling: center;
  z-index: 1000;
}

.zeit-content {
  background: white;
  padding: 2rem;
  border-radius: 1rem;
  text-align: center;
  max-width: 300px;
  width: 90%;
  box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.zeit-timer {
  font-size: 3rem;
  margin-top: 1rem;
  font-weight: bold;
  color: #E9542A;
}

#timer_controls {
  display: flex;
  gap: 30px;
}

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

#pause_button svg,
#close_timer svg {
  fill: white;
  width: 28px;
  height: 28px;
}
#pause_button:hover,
#close_timer:hover {
  transform: scale(1.2);
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
}

#zeit_titel .halbzeit-sub {
  font-size: 0.5em;
  opacity: 0.7;
  display: block;
  text-align: center;
}

#zeit_titel .halbzeit-main {
  font-size: 1em;
  font-weight: bold;
  text-align: center;
}

.tabelle-titel {
  width: 100%;
  border-bottom: 1px solid #999;
  padding-bottom: 4px;
  display: flex;
    align-items: center;
    justify-content: flex-start;
  gap: 1rem;
  position: relative;
}

.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(0.85);
  background: none;
}

@keyframes blink {
  0%, 50%, 100% { color: red; }
  25%, 75% { color: white; }
}

.blink-rot {
  animation: blink 1s step-start infinite;
color: red !important;
}

#spieler_hinzufuegen.spieltag-erstellen-btn,
#spieler_hinzufuegen_frei.spieltag-erstellen-btn,
.spieler_hinzufuegen_frei {
  height: 40px; /* exakt wie dein Input-Feld – ggf. anpassen */
  width: 40px;  /* optional: quadratisch */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E9542A;
  border: none;
  color: white;
  min-width: 40px;
}


#spieler_hinzufuegen.spieltag-erstellen-btn:active,
#spieler_hinzufuegen_frei.spieltag-erstellen-btn:active,
.spieler_hinzufuegen_frei:active {
  background-color: #E9542A;
  color: white;

}

#spieler_hinzufuegen.spieltag-erstellen-btn:active:hover,
#spieler_hinzufuegen_frei.spieltag-erstellen-btn:active:hover,
.spieler_hinzufuegen_frei:active:hover {
  background-color: #E9542A;
  color: white;

}


#spieler_hinzufuegen.spieltag-erstellen-btn:hover,
#spieler_hinzufuegen_frei.spieltag-erstellen-btn:hover,
.spieler_hinzufuegen_frei:hover {
  background-color: rgb(210, 71, 37);
  color: white;

}




.spieltag-erstellen-btn i.fas.fa-plus {
  font-size: 16px;
  line-height: 1;
}





.input-icon-group {
  position: relative;
  width: 100%;
}

.input-icon-group i {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #aaa;
}

.input-icon-group input {
  width: 100%;
  padding: 10px 10px 10px 36px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
}


.turnier-start-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background-color: #E9542A;
  color: white;
  font-weight: bold;
  font-size: 1rem;
  line-height: 1.4;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.turnier-start-btn:hover {
  background-color: #d24725;
}
#spieltag_generieren.clicked {
  background-color: #d9d9d9;
  color: #f9f9f9;
}

#spieltag_generieren.clicked:hover {
  background-color: #d9d9d9;
  color: #f9f9f9;
}

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

.hover-reset {
  display: inline-block;
  padding: 8px 12px;
  transition: all 0.2s ease-in-out;
  width:100%;
  text-align: center;
   font-size: 14px;
    background-color: #e9e9e9;
    border-radius: 4px;
    color: #E9542A;
    cursor: pointer;
}

.hover-reset:hover {
  background-color: #e2e2e2;
  color: #D44220;
}

.spieler-input input:focus {
    border-color: #E9542A;
    background-color: #fff7f7;
    outline: none;
    color: #000;
    border-radius: 6px;
    transition: all 0.15s ease-in-out;
}

.runde-btn hover-reset {
    padding: 8px 12px;
    transition: all 0.2s ease-in-out;
    width: 100%;
    text-align: center;
    font-size: 14px;
    background-color: #e9e9e9;
    border-radius: 4px;
    color: #E9542A;
    cursor: pointer;
}

.runde-btn  {
    padding: 8px 12px;
    transition: all 0.2s ease-in-out;
    width: 100%;
    text-align: center;
    font-size: 14px;
    background-color: #e9e9e9;
    border-radius: 4px;
    color: #E9542A;
    cursor: pointer;
    
}

.runde-btn:hover {
    background-color: #e2e2e2;
    color: #D44220;
}

.runde-btn:active {
    background-color: #e9e9e9;
    color: white;
}
.runde-btn:focus {
    background-color: #e2e2e2;
    color: #E9542A;
}
.runde-btn:focus:hover {
    background-color: #e2e2e2;
    color: #E9542A;
}

/* Äußere Zellen wie gehabt */
.ergebnis-gruppe {
  background: transparent;
  padding: 10px 0;
  text-align: center;
  vertical-align: middle;
  border: none;
}

/* Allgemein: alle Wrapper gleich schmal & flach */
.ergebnis-wrapper {
  
  background-color: #E9542A;
  color: white;
  font-weight: bold;
  padding: 4px 0px;
  line-height: 1;
  height: 26px;
  font-size: 16px;
  
}

/* Nur linker Block bekommt linke Rundung */
.ergebnis-links .ergebnis-wrapper {
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  padding-right: 0px;
  padding-left: 5px;
  border-top: 0.5px solid #ccc;
    border-bottom: 0.5px solid #ccc;
    border-left: 0.5px solid #ccc;
    border-right: none;

}

/* Nur rechter Block bekommt rechte Rundung */
.ergebnis-rechts .ergebnis-wrapper {
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  padding-left: 0px;
  padding-right: 5px;
  border-top: 0.5px solid #ccc;
    border-bottom: 0.5px solid #ccc;
    border-right: 0.5px solid #ccc;
    border-left: none;

}

/* Mittlerer Block hat keine Rundung */
.ergebnis-divider .ergebnis-wrapper {
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 1px;
  border-bottom: 0.5px solid #ccc;
  border-top: 0.5px solid #ccc;
}

.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;;
}


.ergebnis-wrapper.neutral {
  background-color: #ffffff;
  color: #000;
  font-weight: normal;
  
}

.ergebnis-wrapper.neutral input[type="number"] {
  background: none;
  color: #000;
  font-weight: normal;
}

.ergebnis-wrapper.neutral:has(input.toreingabe:focus:not(:disabled)) {
  border: 0.5px solid #E9542A;
  background-color: #fff7f7;
  color: #000;
  border-radius: 6px;
  transition: all 0.15s ease-in-out;
}

.runde-heading {
    background-color: #E9542A;
    color: white;
    padding: 5px;
    text-align: center;
    border-radius: 999px;
}

.modus-btn {
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #f0f0f0;
  font-weight: bold;
  margin-right: 10px;
  cursor: pointer;
  border-radius: 4px;
}

.modus-btn.selected {
  background: #E9542A;
  color: white;
  border-color: #E9542A;
}

.modus-btn:hover {
    background-color: #D44220;
    color: #FFFFFF;
}
/* Container */
.spieltag-wrapper {
  padding: 2rem;
  background-color: white;
  border-radius: 1rem;
  margin-bottom: 2rem;
  max-width: 600px; 
}

  
.modus-auswahl .spieler-btn {
    opacity: 0.5;
    transition: all 0.2s ease;
    background-color: #888888;
  }
  
  .modus-auswahl .spieler-btn:hover {
    transition: all 0.2s ease;
    background-color: #D44220;
    opacity: 1;
  }

  .modus-auswahl .spieler-btn.selected {
    opacity: 1;
    font-weight: bold;
    background-color: #E9542A;
  }
  
  .modus-card {
  background-color: #e9e9e9;
  
  border-radius: 12px;
  padding: 1rem;
  border: 1px solid #e9e9e9;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease, transform 0.2s ease;
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.modus-card:hover {
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  border: none;
  background-color: white;
  color: #4E4D48;
  transform: scale(1.03);
  
}

.modus-card.selected {
  border-color: #E9542A;
  background: white;
  transform: scale(1.03);
  border: 1px solid #E9542A;
}

.modus-auswahl.modus-aktiv .modus-card:not(.selected) {
  opacity: 0.5;
}

.modus-icon {
  font-size: 2.2rem;
  color: #4E4D48;
  margin-bottom: 0.5rem;
  display: block;
  width: 90px;
  margin: 0 auto 6px;
}

.icon-hover {
  display: none;
}

.modus-card:hover .icon-default {
  display: none;
}

.modus-card:hover .icon-hover {
  display: block;
}


.modus-title {
  font-weight: 900;
    font-size: 1rem;
    margin-bottom: 0.6rem;
    line-height: 1.6rem;
    font-family: 'Inter', sans-serif;
    color: #4e4d48;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}




.modus-desc {
  font-size: 0.8rem;
  color: #666;
}


.modus-card:hover .modus-icon,
.modus-card.selected .modus-icon {
  color: #E9542A;
}



.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;
}

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

#spielplan_anzeige,
#rangliste_wrapper,
#export_button {
    max-width: 600px;
}

.modopt {
    color: #e9542a;
}

.tor-button {
  background: none;
  border: none;
  font-size: 48px;
  color: white;
  cursor: pointer;
  transition: transform 0.2s ease;
  padding: 0;
}
.tor-button:hover {
  transform: scale(1.2);
}

.popup-ergebnis {
  font-size: 2.8rem;
  font-weight: bold;
  color: white;
  font-family: 'Inter', sans-serif;
  min-width: 100px;
  text-align: center;
}

.ball {
    font-size: 48px;
}

#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;
}

#zeit_timer {
  font-size: 15rem; /* z.B. 128px */
  font-weight: 900;
  text-align: center;
  line-height: 1.1;
  color: white;
}

#zeit_titel {
    font-size: 2rem;
    display: block;
}

#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;
}




#champion_controls .tor-button {
  width: 80px;
  height: 80px;
  border: 3px solid white;
  background: transparent;
  color: white;
  font-size: 40px;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
  font-family: inter black;
}

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



#zeit_live_ergebnis {
    font-size: 3rem;
}


/* Klickbare Start-Zelle im thead (Plattenkönig) */
#freiermodus_spiele thead tr th.th-start-clickable{
  background-color: #efefef; /* Brand-Tint */
  color: #E9542A;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
#freiermodus_spiele thead tr th.th-start-clickable:hover{
  background-color: #ffd9ce;
}
#freiermodus_spiele thead tr th.th-start-clickable:active{
  background-color: #ffc9b8;
}
#freiermodus_spiele thead tr th.th-start-clickable:hover{ background-color:#e4e4e4; }
#freiermodus_spiele thead tr th.th-start-clickable:active{ background-color:#d9d9d9; }
#freiermodus_spiele thead tr th.th-start-clickable[aria-disabled="true"]{
  opacity: .4; cursor: not-allowed;
}
#freiermodus_spiele thead tr th.th-start-clickable .material-symbols-outlined{
  font-size: 24px; line-height: 1; vertical-align: middle;
}

/* Letzte Spalte schmal + zentriert */
#freiermodus_spiele table th:last-child,
#freiermodus_spiele table td:last-child{
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  text-align: center;
  padding: 0;              /* kein Innenabstand */
}

/* Klickbare Start-Zelle im thead (Plattenkönig) */
#freiermodus_spiele thead tr th.th-start-clickable{
  background-color: #e9e9e9;
  color: #E9542A;
  cursor: pointer;
  user-select: none;
  padding: 0;              /* bündig, damit das Icon sauber mittig wirkt */
}
#freiermodus_spiele thead tr th.th-start-clickable:hover{ background-color:#e2e2e2; }
#freiermodus_spiele thead tr th.th-start-clickable:active{ background-color:#ffc9b8; }
#freiermodus_spiele thead tr th.th-start-clickable[aria-disabled="true"]{ opacity:.4; cursor:not-allowed; }
#freiermodus_spiele thead tr th.th-start-clickable .material-symbols-outlined{
  font-size: 24px;
  line-height: 1;
  vertical-align: middle;
}

#freiermodus_spiele .thead-spacer-cell{
  height: 6px;          /* dein „klein wenig“ */
  padding: 0;
  border: none;
  background: transparent;
  font-size: 0;         /* verhindert Textzeilenhöhe */
  line-height: 0;
}


/* Klickbare Kopfzelle im Plattenkönig-Modus */
#freiermodus_spiele th.th-start-clickable {
  width: 40px; min-width: 40px; max-width: 40px;
  background: #eee;            /* hellgrau wie gewünscht */
  cursor: pointer;
  padding: 0;
  text-align: center;
  user-select: none;
  transition: background .15s ease;
}

#freiermodus_spiele th.th-start-clickable .icon-start {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  transition: transform .15s ease;
  font-size: 22px;       /* kompakt */
}
#freiermodus_spiele th.th-start-clickable:hover .icon-start {
  transform: scale(1.18);  /* leicht größer bei Hover */
}

/* kleiner Abstand unter dem thead */
#freiermodus_spiele .thead-spacer-cell {
  height: 6px;
  padding: 0;
  background: transparent;
  border: none;
}

#freiermodus_spiele th.th-start-clickable .material-symbols-outlined {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;                /* sorgt fürs vertikale Zentrieren */
  line-height: 40px;
  font-size: 22px;             /* Grundgröße */
  transition: transform .15s ease;
}
#freiermodus_spiele th.th-start-clickable:hover {
  background: #e2e2e2;         /* leicht dunkler beim Hover */
}
#freiermodus_spiele th.th-start-clickable:hover .material-symbols-outlined,
#freiermodus_spiele th.th-start-clickable:focus-visible .material-symbols-outlined {
  transform: scale(1.2);       /* Icon wächst beim Hover/Focus */
}
#freiermodus_spiele th.th-start-clickable:focus-visible {
  outline: 2px solid #E9542A;  /* Tastaturfokus sichtbar */
  outline-offset: 2px;
}

/* mini-Abstand unter dem Kopf – falls du die Spacer-Row nutzt */
#freiermodus_spiele tr.spacer-row td { padding: 4px 0; }


/* === Next-Match Toolbar === */
.next-match-toolbar{
  position: sticky; top: 6px; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid #e6e6e6; border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 4px 14px rgba(0,0,0,.06);
  margin: 6px 0 12px 0;
}
.nm-title{
  font-size: 18px; font-weight: 900; letter-spacing: .02em;
}
.nm-ghost{
  background: transparent; border: 1px solid #ddd; border-radius: 999px;
  padding: 6px 10px; font-weight: 800; cursor: pointer;
}
.nm-ghost:hover{ border-color:#cfcfcf; }
.nm-pop{
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid #e6e6e6; border-radius: 10px;
  padding: 10px; box-shadow: 0 10px 24px rgba(0,0,0,.08);
  display: none; gap: 8px; align-items: center; flex-wrap: wrap;
}
.nm-pop.open{ display: flex; }
.nm-pop label{ font-size:.85rem; color:#555; margin-right:4px; }
.nm-pop select{ min-width: 140px; }
.nm-set-btn{
  background:#efefef; border:none; border-radius:8px; padding:6px 10px; font-weight:800; cursor:pointer;
}
.nm-wrap{ position: relative; } /* Anker für Popover */
@media (max-width: 520px){
  .nm-title{ font-size:16px; }
  .nm-pop select{ min-width: 120px; }
}

/* Sticky-Control-Bar für Plattenkönig */
/* Sticky, dezente Toolbar als Accordion */
/* === Champion-Box (sticky + Accordion) === */
#champion-panel {
  position: sticky;
  top: 8px;
  z-index: 30;
  margin: 6px 0 14px;
  border-radius: 12px;
  overflow: clip;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  border: 1px solid #ececec;
}

#champion-panel > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px;
  cursor: pointer;
  user-select: none;
}
#champion-panel summary::-webkit-details-marker { display: none; }

.cp-title {
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.2;
  margin-right: auto;
}

.cp-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: #f4f4f4;
  border: 1px solid #e8e8e8;
}
.cp-badge .material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 700, 'opsz' 24;
  font-size: 20px;
  color: #444;
}

/* Body */
#champion-panel .cp-body {
  display: grid;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid #ececec;
  background: #fff;
}

.cp-row {
  display: grid;
  gap: 10px;
}

.cp-row.controls {
  grid-template-columns: 1fr 1fr auto; /* Champion | Gegner | Setzen */
  align-items: center;
}

.cp-row.actions {
  grid-template-columns: 1fr 24px 1fr auto; /* Tore L | : | Tore R | Save */
  align-items: center;
}

/* Großer Start-Button */
.cp-start {
  display: block;
  width: 100%;
  padding: 14px 16px;
  border: none;
  border-radius: 10px;
  background: #e9542a;
  color: #fff;
  font-weight: 900;
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  letter-spacing: .02em;
  box-shadow: 0 6px 14px rgba(233,84,42,.25);
}
.cp-start .material-symbols-outlined { vertical-align: -4px; }

/* wenn geschlossen → Body verborgen */
#champion-panel:not([open]) .cp-body { display: none; }

/* --- Champion-Card --- */
.champion-card{
  position: relative;
  padding: 14px 14px 18px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(0,0,0,.06);
  margin: 8px 0 16px;
}

/* Kopfzeile: Titel + kleines Badge rechts */
.champion-card .cc-head{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  margin-bottom: 12px;
}
.champion-card .cc-title{
  font-weight: 900; font-size: 22px; letter-spacing:.2px;
}
.champion-card .cc-badge{
  width: 44px; height: 44px; border-radius: 12px;
  display:grid; place-items:center;
  background:#f5f5f5; cursor:pointer; user-select:none;
}
.champion-card .cc-badge .material-symbols-outlined{ font-size:26px; color:#4b5563; }

/* Score-Row */
.champion-card .cc-row{
  display:flex; align-items:center; justify-content:center; gap:12px;
  margin: 8px 0 12px;
}

/* schicke komprimierte Toreingabe */
.cc-score{
  display:flex; align-items:center; gap:12px;
}
.cc-score .score{
  width: 90px; height: 40px;
  border: 1px solid #d1d5db; border-radius: 12px;
  display:flex; align-items:center; justify-content:center;
  background:#fff;
  transition: box-shadow .15s, border-color .15s;
}
.cc-score .score:has(input:focus){
  border-color:#E9542A; box-shadow:0 0 0 3px rgba(233,84,42,.15);
  background:#fffaf7;
}
.cc-score input[type="number"]{
  width: 58px; height: 40px; border:none; outline:none; text-align:center;
  font: 700 12px/1 'Inter', sans-serif; background:transparent; color:#111827;
  -moz-appearance: textfield;
}
.cc-score input[type="number"]::-webkit-outer-spin-button,
.cc-score input[type="number"]::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cc-score .colon{
  font-weight:900; font-size:12px; padding:0 2px; letter-spacing:.05em;
}

/* Save-Button rechts neben den Inputs */
.champion-card .cc-save{
  padding: 12px 14px; border-radius: 12px; border:none; cursor:pointer;
  background:#E9542A; color:#fff;
  display:grid; place-items:center;
}
.champion-card .cc-save i{ font-size:18px; }

/* großer Start-Button (grau, schwarzer Text, oranges Icon) */
.champion-card .cc-start{
  width:100%; border:none; border-radius: 14px; cursor:pointer;
  padding: 22px 18px; font: 900 22px/1 'Inter', sans-serif;
  background:#e9e9e9; color:#111;
  display:flex; align-items:center; justify-content:center; gap:12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  transition: background-color 0.2s ease, transform 0.15s ease;
  margin-bottom: 10px;
}

.champion-card .cc-start:hover{ 
     background-color: #d0d0d0; 
  transform: scale(1.03);
}

.champion-card .cc-start .material-symbols-outlined{ color:#E9542A; font-size:28px; }

/* Ausklappbereich für „Als nächste Begegnung setzen“ */
.champion-card details.cc-advanced{
  margin-top: 8px; border-top:1px solid #eee; padding-top:10px;
}
.champion-card details.cc-advanced summary{
  list-style:none; cursor:pointer; user-select:none;
  display:inline-flex; align-items:center; gap:8px;
  font-weight:800; font-size:14px; color:#374151;
}
.champion-card details.cc-advanced summary .material-symbols-outlined{
  font-size:20px; color:#E9542A;
}
.champion-card .cc-advanced-body{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:10px;
}
.champion-card .cc-advanced-body select{
  min-width:240px; height:44px; border-radius:10px; border:1px solid #d1d5db; padding:0 12px;
  font-weight:700;
}
.champion-card .cc-advanced-body .runde-start-btn{
  transform:translateY(0); /* dein bestehender Buttonstil bleibt */
}
:root {
  --stkv-orange: #E9542A;
  /* Höhe Save-Button & Eingaben */
  --cp-control-h: 56px;
  /* etwas flacherer Start-Button */
  --cp-start-h: 54px;
}


/* Panel-Header / Badge ist bereits da – hier nur Bedienelemente */
.cp-row{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}

.cp-row.actions{
  justify-content:center;
}

/* kompakte Toreingaben: gleicher Height wie Save-Button */
.cp-inputwrap{
  height:var(--cp-control-h);
  padding:6px 10px;
  border:1px solid #D7DBE0;
  border-radius:16px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:140px;
}

.cp-inputwrap input{
  height:100%;
  width:100%;
  min-width:110px;
  border:0;
  outline:none;
  background:transparent;
  font: 900 18px/1 'Inter',sans-serif;
  text-align:center;
}

.cp-colon{
  width:22px;
  text-align:center;
  font: 900 22px/1 'Inter',sans-serif;
}

/* Save-Button gleiche Höhe/Optik */
.cp-save{
  height:var(--cp-control-h);
  width:var(--cp-control-h);
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--stkv-orange);
  color:#fff;
  border:none;
}

.cp-save:focus-visible{ outline:2px solid #222; outline-offset:2px; }

/* Start-Button neutral grau, schwarzer Text, ORANGE Icon */
.cp-start{
  height:var(--cp-start-h);
  border-radius:14px;
  background:#E9E9E9;
  color:#111;
  border:none;
  width:100%;
  max-width:900px;
  margin:8px auto 0;
  font: 900 32px/1 'Inter',sans-serif;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.cp-start .material-symbols-outlined{ color:var(--stkv-orange); font-size:34px; }
.cp-start:focus-visible{ outline:2px solid #222; outline-offset:2px; }

/* Inputs: deutlicher Placeholder */
.cp-inputwrap input::placeholder{
  color:#9aa1aa;
  opacity:1;
}

/* Details-Summary Linie (optional zarter) */
#champion-panel summary{
  border-top:1px solid #eee;
  margin-top:12px;
  padding-top:12px;
}

/* --- Info-Button & Popup (Plattenkönig) --- */
#halbzeit_champion_wrapper { position: relative; }

/* --- Info-Button (nur Icon, farbig) --- */
.info-btn {
  background: none;
  border: none;
  padding: 0;
  margin-left: 4px;
  cursor: pointer;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.info-btn .material-symbols-outlined {
  font-size: 20px;
  color: #E9542A; /* STKV-Orange */
}

/* --- Info-Popup --- */
.info-pop {
  position: fixed;
  max-width: min(360px, calc(100vw - 24px));
  z-index: 1000;
  padding: 14px 16px 12px 16px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.08);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
}
.info-pop[hidden] { display: none !important; }

.info-pop strong {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
}

/* X oben rechts */
.info-pop .close-x {
  position: absolute;
  top: 0px;
  right: 0px;
  border: none;
  background: none;
  font-size: 18px;
  font-weight: bold;
  color: #E9542A;
  cursor: pointer;
}
.info-pop .close-x:hover,
.info-pop .close-x:focus-visible {
  outline: none;
  color: #c44320;
}

/* Icon selbst etwas vergrößern bei Hover/Fokus */
#champion_info_btn {
  transition: transform 0.15s ease-in-out;
}
#champion_info_btn:hover,
#champion_info_btn:focus-visible,
#champion_info_btn:focus {
  transform: scale(1.2);
  background: none !important; /* Falls Elementor oder anderes CSS Farbe gibt */
}


/* Label grau, wenn es ein disabled Input enthält */
.checkbox-label:has(input:disabled) {
  color: #aaa;
  cursor: not-allowed;
  opacity: 0.6;
}

#finals_stage_wrapper {
  margin: 20px 0 0 60px;          /* Einrückung unter dem Label */
  display: none;                    /* wird per JS auf flex gesetzt */
  gap: 12px;
}

#finals_stage_wrapper input[type="radio"],
#bestof3_scope_wrapper input[type="radio"] {
  accent-color: #e9542a;
  transform: scale(1.05);  
    width: 16px; height: 16px; 
}


.finals-row { display: block !important; }

.finals-row .checkbox-label {
  display: flex; align-items: center; gap: .5rem;
}

#bo3_scope_wrapper,
  #bestof3_scope_wrapper {
    display: flex;
    flex-wrap: wrap;       /* <— erlaubt Zeilenumbruch */
    gap: .5rem 1rem;       /* vertikal / horizontal */
    align-items: center;
    max-width: 100%;
  }
  #bo3_scope_wrapper label,
  #bestof3_scope_wrapper label {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin: 0;
    white-space: nowrap;   /* jedes Label bleibt als Block zusammen … */
  }
  /* … auf sehr schmalen Screens darf der Text im Label selbst umbrechen */
  @media (max-width: 360px) {
    #bo3_scope_wrapper label,
    #bestof3_scope_wrapper label {
      white-space: normal;
    }
  }
  
  
  #platz3_wrapper input[type="checkbox"],
  #bestof3_row   input[type="checkbox"] {
    transform: scale(1.2);
    transform-origin: left center;
  }

@media screen and (max-width: 900px) {

#timer_controls {
  display: flex; gap: 16px; justify-content: center; margin-top: 16px;
}
#timer_controls button {
  width: 76px; height: 76px; border-radius: 50%;
  border: 2px solid #fff; background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
}
#timer_controls button .material-symbols-outlined { font-size: 28px; }



.player-name {
  font-size: 1rem;
  font-weight: bold;
  color: #E9542A;
  margin-bottom: 0.3rem;
  text-align: center;
}

.player-score {
  font-size: 2rem;
  font-weight: bold;
  color: white;
  margin-bottom: 0.5rem;
}

.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;
}

 #zeit_popup {
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 1rem;
    box-sizing: border-box;
    overflow: hidden;
  }


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

#zeit_titel {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
    text-align: center;
  }

#zeit_timer {
  font-size: 8rem;
  margin-bottom: 1rem;
}

#champion_controls {
    flex-direction: column;
    gap: 1rem;
  }
  
#champion_controls .tor-button {
    width: 60px;
    height: 60px;
    font-size: 28px;
    border-width: 2px;
  }  
  
  #zeit_live_ergebnis {
    font-size: 2rem;
    margin: 1rem 0;
  }
  
  #pause_button,
  #close_timer {
    width: 48px;
    height: 48px;
  }
  
.desktop-layout {
    margin-bottom: 0;
}

.mobile-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}

#mobile_controls {
  display: flex;
  gap: 1rem;
}

#mobile_controls button {
  width: 48px;
  height: 48px;
  font-size: 1.5rem;
  border: 2px solid white;
  background: transparent;
  color: white;
  border-radius: 50%;
  cursor: pointer;
}

#mobile_controls button:hover {
  background: rgba(255, 255, 255, 0.2);
}

#champion_timer_container.fullbleed {
    /* Full-bleed Trick: bricht aus dem 600px-Wrapper aus */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    width: 100vw;
    padding: 0 12px;                 /* etwas Innenabstand links/rechts */
  }
  
    #champion_timer_container .runde-start-btn {
    display: block;
    width: 100%;
    padding: 14px 16px;
    font-size: 18px;                 /* größer auf Mobile */
  }
  
    #champion_timer_container .stoppuhr-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;         /* zentriert */
    gap: 8px;
  }
  
  /* (Optional) auf größeren Screens dezent größer lassen */
#champion_timer_container .runde-start-btn {
  transform-origin: center;
  transition: transform .15s ease;
}
#champion_timer_container .runde-start-btn:hover {
  transform: scale(1.03);
}

#champion_timer_container {
    width: 100%;
    padding: 0 8px;           /* etwas seitlicher Atemraum */
    box-sizing: border-box;
  }
  
   #champion_timer_container .runde-start-btn {
    display: flex;            /* damit der Inhalt zentriert werden kann */
    width: 100%;              /* volle Breite */
    min-height: 48px;         /* angenehme Touch-Zielgröße */
  }
  #champion_timer_container .stoppuhr-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;  /* Icon/Text mittig */
  }


}/* End custom CSS */