/* ============================================================
   BeachCup — Bootstrap 5.2.3 Custom-Overrides
   Wird NACH bootstrap.css geladen. bootstrap.css selbst bleibt
   unverändertes Original der offiziellen Distribution.
   Zum Zurückschalten auf reinen Bootstrap-Standard: nur das
   <link> auf diese Datei entfernen/auskommentieren.
   ============================================================ */

/* ── Linkfarben ── */
:root {
  --bs-link-color: var(--bs-blue);
  --bs-link-hover-color: var(--bs-yellow);
}

a {
  text-decoration: none;
}

/* ── Legacy-Reset (historisch übernommen, kein Bootstrap-Original) ── */
html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* ── Orga-Content-Bereich ── */
.orgacontent {
  background: #FFF;
  width: 98%;
  margin-top: 60px;
  margin-bottom: 100px;
  margin-right: auto;
}

.orgacontent table {
  border-collapse: collapse;
}

.orgacontent table th {
  border-bottom: 2px solid lightgrey;
}

.orgacontent table td {
  border-bottom: 1px solid lightgrey;
}

/* ── Dropdown-Submenu (Desktop-Hover + Mobile) ── */
@media all and (min-width: 980px) {
  .dropdown-menu li {
    position: relative;
  }
  .dropdown-menu .submenu {
    display: none;
    position: absolute;
    left: 100%;
    top: -7px;
  }
  .dropdown-menu .submenu-left {
    right: 100%;
    left: auto;
  }
  .dropdown-menu > li:hover {
    background-color: var(--bs-gray-500);
  }
  .dropdown-menu > li:hover > .submenu {
    display: block;
  }
}
@media (max-width: 980px) {
  .dropdown-menu .dropdown-menu {
    margin-left: 0.7rem;
    margin-right: 0.7rem;
    margin-bottom: .5rem;
  }
}

/* ── Dropdown-Dark-Variante: Active-Hintergrund ── */
.dropdown-menu-dark {
  --bs-dropdown-link-active-bg: var(--bs-gray-500);
}

/* ── Navbar-Dark-Variante: Toggler-Rahmenfarbe ── */
.navbar-dark {
  --bs-navbar-toggler-border-color: rgba(255, 255, 255, 0.55) /* Bootstrap-Original: rgba(255, 255, 255, 0.1) */;
}

/* ── Button-Success: altes Bootstrap-4-Grün statt BS5-Standardgrün ── */
.btn-success {
  --bs-btn-bg: #28a745;
  --bs-btn-border-color: #28a745;
  --bs-btn-hover-bg: #218838;
  --bs-btn-hover-border-color: #1e7e34;
  --bs-btn-disabled-bg: #28a745;
  --bs-btn-disabled-border-color: #28a745;
}

/* ============================================================
   Breakpoint-Anpassungen (Container, Columns, Table-responsive,
   Dropdown-Positionierung, Navbar-Expand): sm/md/lg-Schwellen auf
   320/1000/1000px statt Bootstrap-Standard 576/768/992px.
   Nur diese bereits angepassten Komponenten — alle anderen
   Bootstrap-Komponenten (Modal, Offcanvas, Card-Group, Sticky-Top,
   generische -sm-/-md-/-lg--Utilities) bleiben bewusst auf
   Bootstrap-Standard.
   ============================================================ */
/* ── Container ── */
@media (min-width: 320px) {
  .container-sm,
  .container {
    max-width: 540px;
  }
}
@media (min-width: 1000px) {
  .container-md,
  .container-sm,
  .container {
    max-width: 720px;
  }
}
@media (min-width: 1000px) {
  .container-lg,
  .container-md,
  .container-sm,
  .container {
    max-width: 960px;
  }
}

/* ── Columns-Basis ── */
@media (min-width: 320px) {
  .col-sm {
    flex: 1 0 0%;
  }
  .row-cols-sm-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-sm-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-sm-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-sm-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-sm-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-sm-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-sm-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-sm-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-sm-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-sm-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-sm-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-sm-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-sm-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-sm-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-sm-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-sm-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-sm-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-sm-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-sm-0 {
    margin-left: 0;
  }
  .offset-sm-1 {
    margin-left: 8.33333333%;
  }
  .offset-sm-2 {
    margin-left: 16.66666667%;
  }
  .offset-sm-3 {
    margin-left: 25%;
  }
  .offset-sm-4 {
    margin-left: 33.33333333%;
  }
  .offset-sm-5 {
    margin-left: 41.66666667%;
  }
  .offset-sm-6 {
    margin-left: 50%;
  }
  .offset-sm-7 {
    margin-left: 58.33333333%;
  }
  .offset-sm-8 {
    margin-left: 66.66666667%;
  }
  .offset-sm-9 {
    margin-left: 75%;
  }
  .offset-sm-10 {
    margin-left: 83.33333333%;
  }
  .offset-sm-11 {
    margin-left: 91.66666667%;
  }
  .g-sm-0,
  .gx-sm-0 {
    --bs-gutter-x: 0;
  }
  .g-sm-0,
  .gy-sm-0 {
    --bs-gutter-y: 0;
  }
  .g-sm-1,
  .gx-sm-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-sm-1,
  .gy-sm-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-sm-2,
  .gx-sm-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-sm-2,
  .gy-sm-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-sm-3,
  .gx-sm-3 {
    --bs-gutter-x: 1rem;
  }
  .g-sm-3,
  .gy-sm-3 {
    --bs-gutter-y: 1rem;
  }
  .g-sm-4,
  .gx-sm-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-sm-4,
  .gy-sm-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-sm-5,
  .gx-sm-5 {
    --bs-gutter-x: 3rem;
  }
  .g-sm-5,
  .gy-sm-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1000px) {
  .col-md {
    flex: 1 0 0%;
  }
  .row-cols-md-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-md-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-md-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-md-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-md-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-md-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-md-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-md-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-md-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-md-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-md-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-md-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-md-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-md-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-md-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-md-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-md-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-md-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-md-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-md-0 {
    margin-left: 0;
  }
  .offset-md-1 {
    margin-left: 8.33333333%;
  }
  .offset-md-2 {
    margin-left: 16.66666667%;
  }
  .offset-md-3 {
    margin-left: 25%;
  }
  .offset-md-4 {
    margin-left: 33.33333333%;
  }
  .offset-md-5 {
    margin-left: 41.66666667%;
  }
  .offset-md-6 {
    margin-left: 50%;
  }
  .offset-md-7 {
    margin-left: 58.33333333%;
  }
  .offset-md-8 {
    margin-left: 66.66666667%;
  }
  .offset-md-9 {
    margin-left: 75%;
  }
  .offset-md-10 {
    margin-left: 83.33333333%;
  }
  .offset-md-11 {
    margin-left: 91.66666667%;
  }
  .g-md-0,
  .gx-md-0 {
    --bs-gutter-x: 0;
  }
  .g-md-0,
  .gy-md-0 {
    --bs-gutter-y: 0;
  }
  .g-md-1,
  .gx-md-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-md-1,
  .gy-md-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-md-2,
  .gx-md-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-md-2,
  .gy-md-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-md-3,
  .gx-md-3 {
    --bs-gutter-x: 1rem;
  }
  .g-md-3,
  .gy-md-3 {
    --bs-gutter-y: 1rem;
  }
  .g-md-4,
  .gx-md-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-md-4,
  .gy-md-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-md-5,
  .gx-md-5 {
    --bs-gutter-x: 3rem;
  }
  .g-md-5,
  .gy-md-5 {
    --bs-gutter-y: 3rem;
  }
}
@media (min-width: 1000px) {
  .col-lg {
    flex: 1 0 0%;
  }
  .row-cols-lg-auto > * {
    flex: 0 0 auto;
    width: auto;
  }
  .row-cols-lg-1 > * {
    flex: 0 0 auto;
    width: 100%;
  }
  .row-cols-lg-2 > * {
    flex: 0 0 auto;
    width: 50%;
  }
  .row-cols-lg-3 > * {
    flex: 0 0 auto;
    width: 33.3333333333%;
  }
  .row-cols-lg-4 > * {
    flex: 0 0 auto;
    width: 25%;
  }
  .row-cols-lg-5 > * {
    flex: 0 0 auto;
    width: 20%;
  }
  .row-cols-lg-6 > * {
    flex: 0 0 auto;
    width: 16.6666666667%;
  }
  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
  }
  .col-lg-1 {
    flex: 0 0 auto;
    width: 8.33333333%;
  }
  .col-lg-2 {
    flex: 0 0 auto;
    width: 16.66666667%;
  }
  .col-lg-3 {
    flex: 0 0 auto;
    width: 25%;
  }
  .col-lg-4 {
    flex: 0 0 auto;
    width: 33.33333333%;
  }
  .col-lg-5 {
    flex: 0 0 auto;
    width: 41.66666667%;
  }
  .col-lg-6 {
    flex: 0 0 auto;
    width: 50%;
  }
  .col-lg-7 {
    flex: 0 0 auto;
    width: 58.33333333%;
  }
  .col-lg-8 {
    flex: 0 0 auto;
    width: 66.66666667%;
  }
  .col-lg-9 {
    flex: 0 0 auto;
    width: 75%;
  }
  .col-lg-10 {
    flex: 0 0 auto;
    width: 83.33333333%;
  }
  .col-lg-11 {
    flex: 0 0 auto;
    width: 91.66666667%;
  }
  .col-lg-12 {
    flex: 0 0 auto;
    width: 100%;
  }
  .offset-lg-0 {
    margin-left: 0;
  }
  .offset-lg-1 {
    margin-left: 8.33333333%;
  }
  .offset-lg-2 {
    margin-left: 16.66666667%;
  }
  .offset-lg-3 {
    margin-left: 25%;
  }
  .offset-lg-4 {
    margin-left: 33.33333333%;
  }
  .offset-lg-5 {
    margin-left: 41.66666667%;
  }
  .offset-lg-6 {
    margin-left: 50%;
  }
  .offset-lg-7 {
    margin-left: 58.33333333%;
  }
  .offset-lg-8 {
    margin-left: 66.66666667%;
  }
  .offset-lg-9 {
    margin-left: 75%;
  }
  .offset-lg-10 {
    margin-left: 83.33333333%;
  }
  .offset-lg-11 {
    margin-left: 91.66666667%;
  }
  .g-lg-0,
  .gx-lg-0 {
    --bs-gutter-x: 0;
  }
  .g-lg-0,
  .gy-lg-0 {
    --bs-gutter-y: 0;
  }
  .g-lg-1,
  .gx-lg-1 {
    --bs-gutter-x: 0.25rem;
  }
  .g-lg-1,
  .gy-lg-1 {
    --bs-gutter-y: 0.25rem;
  }
  .g-lg-2,
  .gx-lg-2 {
    --bs-gutter-x: 0.5rem;
  }
  .g-lg-2,
  .gy-lg-2 {
    --bs-gutter-y: 0.5rem;
  }
  .g-lg-3,
  .gx-lg-3 {
    --bs-gutter-x: 1rem;
  }
  .g-lg-3,
  .gy-lg-3 {
    --bs-gutter-y: 1rem;
  }
  .g-lg-4,
  .gx-lg-4 {
    --bs-gutter-x: 1.5rem;
  }
  .g-lg-4,
  .gy-lg-4 {
    --bs-gutter-y: 1.5rem;
  }
  .g-lg-5,
  .gx-lg-5 {
    --bs-gutter-x: 3rem;
  }
  .g-lg-5,
  .gy-lg-5 {
    --bs-gutter-y: 3rem;
  }
}

/* ── Table-responsive ── */
@media (max-width: 320px) {
  .table-responsive-sm {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1000px) {
  .table-responsive-md {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
@media (max-width: 1000px) {
  .table-responsive-lg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Dropdown-Positionierung ── */
@media (min-width: 320px) {
  .dropdown-menu-sm-start {
    --bs-position: start;
  }
  .dropdown-menu-sm-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-sm-end {
    --bs-position: end;
  }
  .dropdown-menu-sm-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1000px) {
  .dropdown-menu-md-start {
    --bs-position: start;
  }
  .dropdown-menu-md-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-md-end {
    --bs-position: end;
  }
  .dropdown-menu-md-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}
@media (min-width: 1000px) {
  .dropdown-menu-lg-start {
    --bs-position: start;
  }
  .dropdown-menu-lg-start[data-bs-popper] {
    right: auto;
    left: 0;
  }
  .dropdown-menu-lg-end {
    --bs-position: end;
  }
  .dropdown-menu-lg-end[data-bs-popper] {
    right: 0;
    left: auto;
  }
}

/* ── Navbar-Expand ── */
@media (min-width: 320px) {
  .navbar-expand-sm {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-sm .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-sm .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-sm .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
  .navbar-expand-sm .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-sm .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1000px) {
  .navbar-expand-md {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-md .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-md .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-md .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-md .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-md .navbar-toggler {
    display: none;
  }
  .navbar-expand-md .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-md .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}
@media (min-width: 1000px) {
  .navbar-expand-lg {
    flex-wrap: nowrap;
    justify-content: flex-start;
  }
  .navbar-expand-lg .navbar-nav {
    flex-direction: row;
  }
  .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: absolute;
  }
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: var(--bs-navbar-nav-link-padding-x);
    padding-left: var(--bs-navbar-nav-link-padding-x);
  }
  .navbar-expand-lg .navbar-nav-scroll {
    overflow: visible;
  }
  .navbar-expand-lg .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
  .navbar-expand-lg .navbar-toggler {
    display: none;
  }
  .navbar-expand-lg .offcanvas {
    position: static;
    z-index: auto;
    flex-grow: 1;
    width: auto !important;
    height: auto !important;
    visibility: visible !important;
    background-color: transparent !important;
    border: 0 !important;
    transform: none !important;
    transition: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-header {
    display: none;
  }
  .navbar-expand-lg .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    padding: 0;
    overflow-y: visible;
  }
}


/* ============================================================
   vHost-spezifischer Vorspann (vormals vor dem Bootstrap-Header
   direkt in bootstrap.css einmontiert)
   ============================================================ */

/* Freigabe aktiv (früher: style="background-color:green;") */
select.freigabe-aktiv {
  background-color: var(--bs-teal);
  color: var(--bs-black);
}

/* Freigabe gesperrt (früher: style="background-color:red;") */
select.freigabe-gesperrt {
  background-color: var(--bs-red);
  color: var(--bs-white);
}

.clock {
  font-size: 24px;
}

.orga_content {
  position: relative;
  width: 100%;
  padding-top: 5px;
  margin-top: 35px;
  margin-bottom: 165px;
}

.navi_staffeln_e,
.navi_staffeln_e_gbo,
.navi_staffeln_j,
.navi_staffeln_s {
  background-color: var(--bs-dark);
  z-index: 1;
  margin-left: auto;
  margin-right: auto;
  position: fixed;
  bottom: 0px;
  width: 100%;
  padding-top: 2px;
  padding-bottom: 2px;
}

.navi_staffeln_e,
.navi_staffeln_s {
  height: 105px;
}

.navi_staffeln_e_gbo,
.navi_staffeln_j {
  height: 165px;
}

.textmannschaftnormal,
.navi_staffeln_buttoninaktiv,
.textmannschaftgewonnen {
  color: var(--bs-black);
}

.textmannschaftverloren,
.navi_staffeln_buttonaktiv {
  color: var(--bs-red);
}

.auswahlbuttonok,
.auswahlbuttonausfall {
  height: 30px;
  width: 100px;
  color: var(--bs-black);
  font-size: 14px;
}

.srloeschenbutton {
  height: 30px;
  width: 50px;
  color: var(--bs-black);
  font-size: 14px;
}

.auswahlbuttonok,
.tabelspielefertig,
.spielstatusfertig,
.tabelspielplanausfallok,
.spielstatusgruen,
.green1,
.green2 {
  background-color: var(--bs-teal);
}
.auswahlbuttonausfall,
.tabelspieleoffen,
.spielstatusausfallaus,
.tabelspielplanausfallaus,
.tabelspielplankampffehl,
.tabelspielplanschirifehl,
.spielstatusrot,
.zeilenfarbeausfall,
.srloeschenbutton,
.red {
  background-color: var(--bs-red);
  color: var(--bs-white);
}
.tabelspielelaeuft,
.spielstatuslaeuft,
.spielstatusgelb {
  background-color: var(--bs-yellow);
}
.tabelspielekommentar,
.spielstatusoffen,
.spielstatusblau {
  background-color: var(--bs-info);
}
.spielstatusorange {
  background-color: var(--bs-orange);
}

.tabelspielplanausfallok,
.tabelspielplanausfallaus {
  border: none;
  text-align: left;
  font-size: 18px;
  width: 50px;
  text-align: center;
}

.tabelspielplanfeld {
  border: none;
  text-align: center;
  font-size: 18px;
  background-color: var(--bs-blue);
  color: #ff0;
  width: 40px;
}

.tabelspielplankampffehl {
  border: none;
  text-align: left;
  font-size: 18px;
  width: 125px;
}

.tabelspielplanschirifehl,
.tabelspielplanschirige,
.tabelspielplanschiriug,
.tabelspielplankampfge,
.tabelspielplankampfug {
  border: none;
  text-align: left;
  font-size: 18px;
  width: 115px;
}

.tabelspielplanschirige,
.zeilenfarbegerade,
.tabelspielplankampfge,
.tabelspielplanteamge,
.tabelspielplantagge,
.tabelspielplanzeitge,
.tabelspieletopugec,
.tabelspieletopuge,
.zeile_ge {
  background-color: var(--bs-gray-500);
}

.tabelspielplanschiriug,
.zeilenfarbeungerade,
.tabelspielplankampfug,
.tabelspielplanteamug,
.tabelspielplantagug,
.tabelspielplanzeitug,
.tabelspieletopuugc,
.tabelspieletopuug,
.zeile_ug {
  background-color: var(--bs-white);
}

.spielplansavebutton,
.srsavebutton,
.spielberichtdruckbuttonok,
.spielberichtdruckbuttonoffen {
  font-size: 12px;
  width: 60px;
  height: 25px;
}

.spielberichtdruckbuttonok {
  color: var(--bs-blue);
}

.spielberichtdruckbuttonoffen {
  color: var(--bs-red);
}

.spielstatusoffen,
.spielstatuslaeuft,
.spielstatusfertig,
.spielstatusausfallaus {
  font-size: 20px;
}

.tabelspielplanteamge,
.tabelspielplanteamug {
  border: none;
  text-align: left;
  font-size: 18px;
  width: 325px;
}

.tabelspielplantagge,
.tabelspielplantagug {
  border: none;
  text-align: left;
  font-size: 18px;
  width: 40px;
}

.tabelspielplanzeitge,
.tabelspielplanzeitug {
  border: none;
  text-align: left;
  font-size: 18px;
  width: 65px;
}

.tabelspieletopugec,
.tabelspieletopuugc {
  font-size: 18px;
}

.tabelspieletopuge,
.tabelspieletopuug {
  border: none;
  text-align: center;
  font-size: 22px;
  width: 30px;
}

.tablespiele {
  border-collapse: collapse;
  border-color: #999;
  border: 1px;
}

.spaltentitel,
.tabellen_spaltentitel {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
}

.tabellen_tabelleninhalt {
  font-size: 20px;
}

.zeile_ge,
.zeile_ug,
.green1,
.green2,
.red,
.auswahlliste {
  font-size: 16px;
}

.auswahlliste {
  height: 30px;
  width: 175px;
  color: var(--bs-black);
}

.navi_staffeln_buttonaktiv,
.navi_staffeln_buttoninaktiv {
  font-size: 16px;
  height: 30px;
  width: 70px;
  text-align: center;
}

#meldung {
  visibility: hidden;
  background-color: var(--bs-info);
  color: #ff0;
  position: fixed;
  z-index: 2;
  height: 400px;
  width: 400px;
  top: 300px;
  left: 700px;
}

a.infobox {
  text-decoration: none;
  color: var(--bs-black);
}

a.infobox:hover {
  color: var(--bs-black);
  background: var(--bs-info);
}

a.infobox span {
  visibility: hidden;
  position: absolute;
  left: 10px;
  margin-top: 50px;
  padding: 10px;
  text-decoration: none;
}

a.infobox:hover span,
a.infobox:focus span,
a.infobox:active span {
  visibility: visible;
  left: 325px;
  border: 2px solid var(--bs-red);
  color: var(--bs-black);
  background: var(--bs-info);
  margin-top: 20px;
}

.footermenubuttonaktiv,
.footermenubuttoninaktiv,
.spielstartbutton {
  border: 2px solid var(--bs-white);
  font-size: 16px;
  height: 30px;
  width: 120px;
  text-align: center;
}

.footermenubuttonaktiv {
  color: var(--bs-blue);
}

.footermenubuttoninaktiv,
.countclosefenster {
  color: var(--bs-red);
}

.spielstartbutton {
  color: #ff0;
  background-color: var(--bs-red);
}

.countdowntext {
  font-size: 14px;
  text-align: center;
}

.countclosefenster {
  font-size: 1px;
  text-align: left;
}

.countdown {
  font-size: 38px;
  text-align: center;
}

.content_tblinks,
.content_tbmitte,
.content_tbrechts {
  background: #fff;
  float: left;
  width: 32%;
  margin-right: 2%;
  padding: 20px;
  box-sizing: border-box;
}

.clearing {
  clear: both;
}