/* ============================================================
   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);
}

.srsavebutton,
.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);
}
/* Höhere Spezifität: .btn überschreibt sonst background-color + zentriert Text */
.btn.srloeschenbutton {
  background-color: var(--bs-red);
  color: var(--bs-white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.btn.srsavebutton {
  background-color: var(--bs-teal);
  color: var(--bs-black);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.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,
.spielberichtdruckbuttonok,
.spielberichtdruckbuttonoffen {
  font-size: 12px;
  width: 60px;
  height: 25px;
  border-radius: 0.375rem;
  border: 1px solid currentColor;
  cursor: pointer;
  background-color: transparent;
}

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

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

/* Seiteninhalt-Buttons: Bootstrap btn-sm btn-outline-secondary Optik */
.btn-ergebnis-save,
.btn-uebernahme,
#btn-weiterkommer-toggle {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  border: 1px solid #6c757d;
  border-radius: 0.375rem;
  cursor: pointer;
  background-color: transparent;
  color: #6c757d;
  white-space: nowrap;
}

.btn-ergebnis-save:hover,
.btn-uebernahme:hover,
#btn-weiterkommer-toggle:hover {
  background-color: #6c757d;
  color: #fff;
}

.btn-uebernahme:disabled,
.btn-uebernahme[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Spielplan/Ergebnisse Selects: abgerundete Ecken, Statusfarben unverändert */
.select-zeit,
.select-feld,
.select-sr1,
.select-sr2,
.select-kg,
.select-ausfall,
.select-reset,
.bc-ergebnis-select {
  border-radius: 0.375rem;
}

.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);
  border-radius: 6px;
}

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


/* ============================================================
   vHost-spezifisch: Druckansicht (vormals in Bootstraps eigenen
   @media print-Block hineingemischt)
   ============================================================ */
@media print {
  /* Druckvorlagen: Navbar-Abstände entfernen */
  body {
    padding-top: 0 !important;
  }
  .orgacontent {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Navigation beim Drucken ausblenden */
  div.navi_main {
    visibility: hidden;
  }
  div.navi_staffeln_e {
    visibility: hidden;
  }
  div.navi_staffeln_e_GBO {
    visibility: hidden;
  }
  div.navi_staffeln_j {
    visibility: hidden;
  }
  div.navi_staffeln_s {
    visibility: hidden;
  }
  div#content.offene_spiele {
    visibility: hidden;
  }
  .navi_staffeln,
  .navi_staffeln_fab {
    display: none !important;
  }
}
/* ── Staffelnavigation (Bootstrap-Redesign) ─────────────────────────────── */
/* Show/Hide via Bootstrap-Utility-Klassen (d-none d-md-block / d-flex d-md-none) */

.navi_staffeln {
  background-color: var(--bs-dark);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  padding: 4px 0;
  border-top: 1px solid #343a40;
}

.navi_staffeln_tabs {
  display: flex;
  gap: 3px;
  justify-content: center;
  align-items: flex-end;
  border-bottom: 1px solid #495057;
  padding: 0 12px;
  margin-bottom: 3px;
}

.navi_staffeln_buttons {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  flex-wrap: nowrap;
  padding: 0 12px;
}

.navi_staffeln_sep {
  color: #495057;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1;
}

.navi_staffeln_fab {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 1035;
  background: #212529;
  color: #fff;
  border: 1px solid #495057;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 13px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
  cursor: pointer;
}

.navi_staffeln_fab:hover {
  background: #343a40;
  color: #fff;
}

/* ── Outdoor-Theme (Sonnenlicht-Modus) ──────────────────────────────────── */

html[data-theme="outdoor"] #mainNavbar {
  background-color: #fff !important;
  border-bottom: 2px solid #212529;
}

html[data-theme="outdoor"] #mainNavbar .navbar-text,
html[data-theme="outdoor"] #mainNavbar .nav-link,
html[data-theme="outdoor"] #mainNavbar .btn {
  color: #212529 !important;
}

html[data-theme="outdoor"] #mainNavbar .btn-outline-secondary {
  border-color: #6c757d !important;
}

html[data-theme="outdoor"] #mainNavbar .btn-secondary,
html[data-theme="outdoor"] #mainNavbar .btn-outline-secondary:hover,
html[data-theme="outdoor"] #mainNavbar .btn-outline-secondary:focus-visible,
html[data-theme="outdoor"] #mainNavbar .btn-outline-secondary:active {
  color: #fff !important;
}

html[data-theme="outdoor"] #mainNavbar select:not(.freigabe-aktiv):not(.freigabe-gesperrt) {
  color: #212529;
  background-color: #f8f9fa;
}

html[data-theme="outdoor"] #mainNavbar .navi-row2 {
  border-top-color: rgba(0, 0, 0, .15) !important;
}

html[data-theme="outdoor"] #mainNavbar .navbar-toggler {
  border-color: rgba(0, 0, 0, .2) !important;
}

html[data-theme="outdoor"] #mainNavbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280%2C 0%2C 0%2C 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

.bc-jahr-text {
  color: yellow;
}

/* Staffelnav Rundenauswahl: Dark-Mode */
.navi-runden-select {
  background-color: #343a40;
  color: #ccc;
  border-color: #495057;
}

/* Staffelnav Rundenauswahl: Outdoor-Mode hell */
html[data-theme="outdoor"] .navi-runden-select {
  background-color: #f8f9fa;
  color: #212529;
  border-color: #ced4da;
}

html[data-theme="outdoor"] .bc-jahr-text {
  color: #d97706 !important;
}

html[data-theme="outdoor"] .navi_staffeln {
  background-color: #e9ecef !important;
  border-top-color: #adb5bd !important;
}

html[data-theme="outdoor"] .navi_staffeln_tabs {
  border-bottom-color: #adb5bd !important;
}

html[data-theme="outdoor"] .navi_staffeln_sep {
  color: #6c757d !important;
}

html[data-theme="outdoor"] .navi_staffeln_fab {
  background: #e9ecef !important;
  color: #212529 !important;
  border-color: #adb5bd !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important;
}

html[data-theme="outdoor"] .navi_staffeln_fab:hover {
  background: #dee2e6 !important;
}

html[data-theme="outdoor"] .offcanvas {
  background-color: #f8f9fa !important;
  color: #212529 !important;
}

/* Runde-Info-Block: im Dark-Mode gelb */
#mainNavbar .bc-runde-info {
  color: yellow !important;
}

/* Runde-Info-Block: im Outdoor-Mode amber (gleich wie Jahreszahl) */
html[data-theme="outdoor"] #mainNavbar .bc-runde-info {
  color: #d97706 !important;
}

/* ── Light-Theme User-Bereich ───────────────────────────────────────────── */

/* Basis-Klassen: Label-Texte im User-Dropdown und Guest-Anmeldestart */
.bc-user-label {
  color: rgba(255, 255, 255, .6);
}

.bc-guest-anmeldestart {
  color: yellow;
}

/* Navbar-Hintergrund + Trennlinie */
html[data-theme="light"] #userNavbar,
html[data-theme="light"] #userNavbarGuest {
  background-color: #fff !important;
  border-bottom: 2px solid #212529;
}

/* Nav-Links, Buttons, Navbar-Text → dunkle Schrift */
html[data-theme="light"] #userNavbar .nav-link,
html[data-theme="light"] #userNavbar .btn,
html[data-theme="light"] #userNavbar .navbar-text,
html[data-theme="light"] #userNavbarGuest .btn {
  color: #212529 !important;
}

/* .text-white überschreiben */
html[data-theme="light"] #userNavbar .text-white {
  color: #212529 !important;
}

/* btn-outline-secondary: Rahmen sichtbar */
html[data-theme="light"] #userNavbar .btn-outline-secondary,
html[data-theme="light"] #userNavbarGuest .btn-outline-secondary {
  border-color: #6c757d !important;
}

/* btn-outline-light: Rahmen im Light-Mode sichtbar machen */
html[data-theme="light"] #userNavbarGuest .btn-outline-light {
  border-color: #6c757d !important;
}

/* Hover/Active → weiße Schrift auf gefülltem Hintergrund */
html[data-theme="light"] #userNavbar .btn-outline-secondary:hover,
html[data-theme="light"] #userNavbar .btn-outline-secondary:focus-visible,
html[data-theme="light"] #userNavbar .btn-outline-secondary:active,
html[data-theme="light"] #userNavbar .btn-outline-secondary.show,
html[data-theme="light"] #userNavbarGuest .btn-outline-secondary:hover,
html[data-theme="light"] #userNavbarGuest .btn-outline-secondary:focus-visible,
html[data-theme="light"] #userNavbarGuest .btn-outline-secondary:active {
  color: #fff !important;
}

/* Navbar-Toggler */
html[data-theme="light"] #userNavbar .navbar-toggler,
html[data-theme="light"] #userNavbarGuest .navbar-toggler {
  border-color: rgba(0, 0, 0, .2) !important;
}

html[data-theme="light"] #userNavbar .navbar-toggler-icon,
html[data-theme="light"] #userNavbarGuest .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280%2C 0%2C 0%2C 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}

/* Dropdown-Menüs: hell */
html[data-theme="light"] #userNavbar .dropdown-menu-dark,
html[data-theme="light"] #userNavbarGuest .dropdown-menu-dark {
  background-color: #fff !important;
  border-color: rgba(0, 0, 0, .175) !important;
}

html[data-theme="light"] #userNavbar .dropdown-menu-dark .dropdown-item,
html[data-theme="light"] #userNavbarGuest .dropdown-menu-dark .dropdown-item {
  color: #212529 !important;
}

html[data-theme="light"] #userNavbar .dropdown-menu-dark .dropdown-item:hover,
html[data-theme="light"] #userNavbar .dropdown-menu-dark .dropdown-item:focus,
html[data-theme="light"] #userNavbarGuest .dropdown-menu-dark .dropdown-item:hover,
html[data-theme="light"] #userNavbarGuest .dropdown-menu-dark .dropdown-item:focus {
  background-color: #dee2e6 !important;
  color: #212529 !important;
}

html[data-theme="light"] #userNavbar .dropdown-menu-dark .dropdown-item.disabled,
html[data-theme="light"] #userNavbarGuest .dropdown-menu-dark .dropdown-item.disabled {
  color: #adb5bd !important;
}

html[data-theme="light"] #userNavbar .dropdown-menu-dark .dropdown-item-text,
html[data-theme="light"] #userNavbarGuest .dropdown-menu-dark .dropdown-item-text {
  color: #212529 !important;
}

html[data-theme="light"] #userNavbar .dropdown-menu-dark .dropdown-divider,
html[data-theme="light"] #userNavbarGuest .dropdown-menu-dark .dropdown-divider {
  border-color: rgba(0, 0, 0, .15) !important;
}

/* bc-user-label: im Dark-Mode weiß, im Light-Mode grau */
html[data-theme="light"] #userNavbar .bc-user-label {
  color: rgba(0, 0, 0, .5);
}

/* Login-Inputs in der Guest-Navbar */
html[data-theme="light"] #userNavbarGuest .form-control {
  background-color: #f8f9fa;
  color: #212529;
  border-color: #ced4da;
}

/* Anmeldestart-Text in der Guest-Navbar */
html[data-theme="light"] #userNavbarGuest .bc-guest-anmeldestart {
  color: #d97706;
}


/* ============================================================
   BeachCup User-Bereich — Projektspezifische CSS-Ergänzungen
   ============================================================ */

/* Dunkel-Abschnittsbalken (meinedaten, teammeldung, sranmeldung) */
.bc-section-header {
    display: block;
    width: 100%;
    background-color: #212529;
    color: white;
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 4px 8px;
    margin-bottom: 8px;
}

/* Anwesenheitsblöcke (meinedaten.php – SR-Bereich) */
.anwesenheit-content { visibility: visible; }
.anwesenheit-hidden  { visibility: hidden; }

/* Meldestatus-Farben am Abgesagt-Select (meinedaten.php) */
.bc-status-abgesagt { background-color: var(--bs-red); color: #fff; }
.bc-status-aktiv    { background-color: var(--bs-teal); }

/* Ja/Nein-Einfärbung: Select (geschlossen) + gewählte Option (offen), andere Optionen neutral */
select.bc-opt-ja,  option.bc-opt-ja   { background-color: var(--bs-teal);   color: var(--bs-black); }
select.bc-opt-nein, option.bc-opt-nein { background-color: var(--bs-red);    color: #fff; }
select.bc-opt-gbo,  option.bc-opt-gbo  { background-color: var(--bs-orange); color: #000; }

/* Turnier-Dropdown: auto-Breite ab Desktop (teammeldung.php) */
@media (min-width: 992px) {
    #teammeldung select.form-select { width: auto; max-width: 100%; }
}

/* Regelkarten-Komponente (index.php, spielerdaten.php u.a.) */
.regelkarte-advanced {
    border: 2px solid #212529;
    border-radius: 12px;
    overflow: hidden;
    background: #f8f9fa;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}
.regelkarte-header {
    background: #212529;
    color: #f8f9fa;
    padding: 14px 18px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.rk-icon { font-size: 1.4rem; }
.regelkarte-body { padding: 20px; }
.regelkarte-body ul { list-style: none; padding: 0; margin: 0; }
.regelkarte-body li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 12px;
    line-height: 1.45;
    font-size: 1rem;
}
.rk-li-icon { font-size: 1.25rem; width: 26px; text-align: center; }
.regelkarte-downloads {
    margin-top: 20px;
    padding: 16px 18px;
    background: #f8f9fa;
    border-top: 2px solid #212529;
    border-radius: 0 0 12px 12px;
}
.rk-download-title {
    font-size: 1.05rem;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rk-download-icon { font-size: 1.3rem; }
.rk-download-list { list-style: none; padding: 0; margin: 0; }
.rk-download-list li { margin-bottom: 10px; }
.rk-download-list a {
    text-decoration: none;
    font-size: 1rem;
    color: #212529;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
@media (max-width: 600px) {
    .regelkarte-body li { font-size: 0.95rem; }
    .rk-li-icon { font-size: 1.1rem; width: 22px; }
    .rk-download-list a { font-size: 0.95rem; }
}