@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
:root {
  --farbe-haupt: #444a57;
  --farbe-haupt-transparent: rgba(68,74,87,0.12);
  --farbe-akzent: #23242a;
  --farbe-hintergrund: #19191a;
  --farbe-panel: #23242a;
  --farbe-panel-alt: #23242a;
  --farbe-text: #f3f4f6;
  --farbe-text-alt: #e3e8ee;
  --farbe-text-muted: #b0b3b8;
  --farbe-akzent2: #444a57;
  --farbe-success: #19c37d;
  --farbe-success-bg: #b8f2cc;
  --farbe-success-text: #0b2412;
  --farbe-success-border: #0b2412;
  --farbe-border: #292b33;
  --farbe-border-alt: #292b33;
  --farbe-shadow: 0 2px 16px 0 rgba(0,0,0,0.25);
  --farbe-shadow-card: 0 8px 36px 0 rgba(0,0,0,0.25);
  --farbe-shadow-card-alt: 0 8px 36px 0 rgba(0,0,0,0.15);
  --farbe-shadow-btn: 0 2px 16px 0 rgba(0,0,0,0.15);
  --farbe-shadow-btn2: 0 2px 16px 0 rgba(0,0,0,0.20);
  --farbe-shadow-btn3: 0 2px 16px 0 rgba(0,0,0,0.10);
  --farbe-shadow-btn-hover: 0 2px 16px 0 rgba(0,0,0,0.25);
  --farbe-shadow-btn-hover2: 0 2px 16px 0 rgba(0,0,0,0.30);
  --radius: 12px;
  --shadow: 0 2px 16px 0 rgba(0,0,0,0.22);
  --farbe-input-bg: #23242a;
  --farbe-gradient-haupt: linear-gradient(90deg, #444a57 60%, #444a57 100%);
  --farbe-gradient-haupt2: linear-gradient(90deg, #444a57 70%, #444a57 100%);
  --farbe-gradient-akzent: linear-gradient(90deg, #21232b 60%, #21232b 100%);
  --farbe-white: #fff;
  --farbe-black: #000;
  --farbe-warning: #ffbe46;
  --farbe-haupt-transparent2: rgba(68,74,87,0.05);
  --farbe-hintergrund-transparent: rgba(5,52,171,0.05);
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--farbe-hintergrund);
  color: var(--farbe-text);
  margin: 0;
  padding: 0;
}

.card, .dashboard-card, .dashboard-tile, .dashboard-ligen-card {
  border: none !important;
  background: var(--farbe-panel);
  border-radius: var(--radius);
  box-shadow: var(--farbe-shadow);
  border: 1px solid var(--farbe-border);
  color: var(--farbe-text);
  
  width: 100%;
  box-sizing: border-box;
}

/* Flexbox-Fix für Bootstrap-Grid */
.row > [class^='col-'] {
  min-width: 0;
}

.table-responsive {
  width: 100%;
  overflow-x: auto;
}

.table {
  background: var(--farbe-panel);
  color: var(--farbe-text);
  border-radius: var(--radius);
  border: 1px solid var(--farbe-border);
  overflow: hidden;
  
  width: 100%;
  box-sizing: border-box;
}

input:not([type="radio"]):not([type="checkbox"]), select, textarea {
  background: var(--farbe-input-bg);
  color: var(--farbe-text);
  border: 1px solid var(--farbe-border);
  border-radius: var(--radius);
  padding: 0.5em 0.7em;
  transition: border 0.2s, box-shadow 0.2s;
}

/* Spezifische Stile für Radio-Buttons */
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin: 0 8px 0 0;
  padding: 0;
  border: 2px solid var(--farbe-haupt, #ff4655) !important;
  border-radius: 50% !important;
  background: var(--farbe-panel, #232a34) !important;
  position: relative;
  cursor: pointer;
  vertical-align: middle;
  box-sizing: border-box;
}

input[type="radio"]:checked {
  background: var(--farbe-panel, #232a34) !important;
  border-color: var(--farbe-success, #19c37d) !important;
}

input[type="radio"]:checked::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--farbe-success, #19c37d);
}

input[type="radio"]:focus {
  outline: none;
  box-shadow: 0 0 0 2.5px var(--farbe-haupt, #ff4655);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--farbe-haupt);
  box-shadow: 0 0 0 2px var(--farbe-haupt-transparent);
}



.table {
  background: var(--farbe-panel);
  color: var(--farbe-text);
  border-radius: var(--radius);
  border: 1px solid var(--farbe-border);
  overflow: hidden;
}
.table th {
  background: var(--farbe-panel);
  color: var(--farbe-haupt);
  font-weight: 700;
  border-bottom: 2px solid var(--farbe-haupt-transparent);
}
.table td {
  border-top: 1px solid var(--farbe-border);
}

/* Trend-Anzeige Farben */
span.cell-sieg {
  color: #3bb273 !important;
  font-weight: bold;
}
span.cell-unentschieden {
  color: #d6b900 !important;
  font-weight: bold;
}
span.cell-niederlage {
  color: #c0392b !important;
  font-weight: bold;
}
.cell-trend-leer {
  opacity: 0.3
}

.alert {
  border-radius: var(--radius);
  background: var(--farbe-haupt-transparent);
  color: var(--farbe-haupt);
  border: 1px solid var(--farbe-haupt);
}

::-webkit-scrollbar {
  width: 10px;
  background: var(--farbe-input-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--farbe-haupt-transparent);
  border-radius: 8px;
}


hr {
  border: none;
  border-top: 1px solid var(--farbe-border);
  margin: 1.5em 0;
}

/* Tooltip modern */
.tooltip-inner {
  background: var(--farbe-panel);
  color: var(--farbe-text);
  border-radius: var(--radius);
  border: 1px solid var(--farbe-haupt-transparent);
}

/* Akzent-Elemente */
.badge, .highlight, .accent {
  background: var(--farbe-haupt-transparent);
  color: var(--farbe-haupt);
  border-radius: 8px;
  padding: 0.2em 0.6em;
  font-weight: 600;
}

/* Fokus und Auswahl */
input:focus, select:focus, textarea:focus, .btn:focus, button:focus {
  outline: 2px solid #444a57;
  outline-offset: 1px;
}

/* Schatten für moderne Tiefe */
.shadow {
  box-shadow: var(--shadow) !important;
}

/* Tabellenzeilen Hover */
.table tbody tr:hover {
  background: var(--farbe-panel);
  color: var(--farbe-haupt);
}

/* Erfolg, Warnung, Fehler */
.alert-success {
  background: var(--farbe-success-bg);
  color: var(--farbe-success-text);
  border: 1px solid var(--farbe-success-border);
}
.alert-danger, .alert-error {
  background: var(--farbe-haupt-transparent2);
  color: var(--farbe-haupt);
  border: 1px solid var(--farbe-haupt);
}
.alert-warning {
  background: var(--farbe-warning);
  color: var(--farbe-text);
  border: 1px solid var(--farbe-warning);
}

/* Runde Ecken für alle Cards und Modals */
.card, .modal-content, .dashboard-card, .dashboard-tile {
  border-radius: var(--radius);
}

/* Auffällige Badge für Navigation/Benachrichtigungen */
.badge {
  background: #e84545 !important;
  color: #fff !important;
  border-radius: 12px !important;
  padding: 2px 8px !important;
  font-size: 1em !important;
  font-weight: bold !important;
  margin-left: 6px;
  vertical-align: middle;
  box-shadow: 0 0 8px #e84545cc;
  display: inline-block;
  min-width: 24px;
  text-align: center;
}

/* Inputs mit Icon (falls verwendet) */
.input-group-text {
  background: var(--farbe-panel);
  color: var(--farbe-haupt);
  border: none;
}

/* Checkboxen und Radios */

.form-check-input[type="radio"] {
  width: 1.25em;
  height: 1.25em;
  border: 2px solid #ffa807;
  background: #181c24;
  border-radius: 50%;
  margin-right: 0.6em;
  vertical-align: middle;
  outline: none;
  box-shadow: 0 1px 3px #0002;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.form-check-input[type="radio"]:checked {
  background: radial-gradient(circle at center, #ffa807 60%, #181c24 61%);
  border-color: #ffa807;
  box-shadow: 0 0 0 3px #ffa80744;
}
.form-check-input[type="radio"]:focus {
  outline: 2px solid #734d31;
  box-shadow: 0 0 0 2px #444a5744;
}

.form-check-input:checked {
  background-color: var(--farbe-haupt);
  border-color: var(--farbe-haupt);
}




.form-check-label, label[for] {
  color: var(--farbe-text);
}

/* Für bessere Lesbarkeit */
::selection {
  background: var(--farbe-haupt-transparent);
  color: var(--farbe-haupt);
}

/* Dezent animierte Übergänge */
*, *:before, *:after {
  transition: background 0.18s, color 0.18s, border 0.18s;
}

/* --- Erzwinge dunkles Theme für alle Flächen, neutralisiere Rot als Flächenfarbe --- */
body,
.modern-dark,
.container,
.container-fluid,
.main-content,
.card,
.card-body,
.dashboard-card,
.dashboard-tile,
.modal-content {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
  box-shadow: none !important;
}

/* Überschreibe versehentlich rote Flächen (legacy, Bootstrap, alte Styles) */
.bg-danger,
.bg-warning,
.bg-success,
.bg-primary,
.bg-secondary,
.bg-light,
.bg-white,
.alert-danger,
.alert-warning,
.alert-primary,
.alert-secondary,
.alert-light,
.table-danger,
.table-warning,
.table-success,
.table-primary,
.table-secondary,
.table-light,
.table-white {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
}
/* Überschreibe versehentlich rote Flächen (legacy, Bootstrap, alte Styles) */

.alert-success
{
  background: var(--farbe-panel) !important;
  color: #198754d9 !important;
}

/* --- Zusätzliche Überschreibungen für rote Flächen, Header, Tabs, Panels, Tabellen --- */
.card-header,
.panel,
.panel-heading,
.tab-content,
.nav,
.nav-tabs,
.nav-pills,
.navbar,
.table thead,
.table-danger thead,
.table-primary thead,
.table-secondary thead,
.table-warning thead,
.table-success thead,
.table-info thead,
.badge,
.alert,
.alert-danger,
.alert-primary,
.alert-secondary,
.alert-warning,
.alert-success {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
  border: none !important;
}

/* Akzentfarbe Rot nur für Rahmen, Icons, Buttons, aktive Tabs */
.card-header.active,
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active,
.btn-danger,
.btn-primary,
.badge-danger,
.badge-primary {
  background: transparent !important;
  color: var(--farbe-haupt) !important;
  border-bottom: 2px solid var(--farbe-haupt) !important;
  font-weight: bold;
}

/* Tabellenlinien und Rahmen dezent */
table, th, td {
  border-color: var(--farbe-border-alt) !important;
}





/* Dashboard Buttons: Keine Unterstreichung */
.dashboard-btn-vertical-group a.button, .dashboard-btn-horizontal-group a.button {
  color: var(--farbe-white) !important;
  text-decoration: none !important;
  text-underline-offset: unset !important;
}

/* --- Responsive Dashboard Layout --- */
.elo-success {
  color: var(--farbe-success) !important;
  border: 2px solid var(--farbe-success) !important;
  background: none !important;
  border-radius: 8px;
  font-weight: 600;
  padding: 0.9em 1.2em;
  margin: 0.7em 0;
  box-shadow: none;
}

@media (max-width: 900px) {
  .dashboard-row-flex {
    flex-direction: column !important;
    gap: 1.2em !important;
  }
  .dashboard-header-flex {
    flex-direction: column !important;
    gap: 0.8em !important;
    align-items: flex-start !important;
  }
  .dashboard-card-row {
    flex-direction: column !important;
    gap: 1em !important;
    align-items: stretch !important;
  }
  .dashboard-card, .countdown-card, .dashboard-tile {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
 
  .dashboard-btn-horizontal-group {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.5em !important;
  }
}
@media (max-width: 600px) {
  .dashboard-header-flex,
  .dashboard-btn-horizontal-group {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5em !important;
  }
  .dashboard-card,
  .countdown-card,
  .dashboard-tile,
  .dashboard-ligen-card {
    min-width: 98vw !important;
    max-width: 100vw !important;
    width: 100% !important;
    padding: 0.7em 0.5em !important;
    font-size: 0.98em !important;
  }
  .dashboard-ligen-card {
    margin-top: 0 !important;
    padding: 0.9em 0.5em !important;
  }
  .dashboard-btn, .button, button {
    font-size: 1em !important;
    padding: 0.5em 1em !important;
    min-width: 90vw !important;
    max-width: 100vw !important;
    width: 100% !important;
    margin: 0.1em 0 !important;
  }
}
.row > [class^="col-"] { border: none !important; }

.container {
  max-width: 100vw !important;
  width: 100vw !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 400px) {
  .dashboard-card, .countdown-card, .dashboard-tile, .dashboard-ligen-card {
    padding: 0.5em 0.2em !important;
    font-size: 0.95em !important;
  }
  .dashboard-btn, .button, button {
    font-size: 0.95em !important;
    padding: 0.4em 0.4em !important;
  }
  .dashboard-header-flex h1, .dashboard-header-flex .accent {
    font-size: 1.1em !important;
  }
  table, th, td {
    font-size: 0.95em !important;
    padding: 0.3em 0.2em !important;
    word-break: break-word;
  }
  .container {
    padding-left: 0.2em !important;
    padding-right: 0.2em !important;
  }
  .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  h1, h2, h3 {
    font-size: 1.13em !important;
  }
}

/* Zusätzliche mobile Optimierung */
@media (max-width: 600px) {
  .table-responsive {
    width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table {
    min-width: 480px;
  }
  .dashboard-card, .countdown-card, .dashboard-tile, .dashboard-ligen-card {
    margin-bottom: 0.8em !important;
    font-size: 0.98em !important;
  }
  h1, h2, h3 {
    font-size: 1.17em !important;
  }
}

/* Modern Dark Theme Styles */

main .elo-headline, .elo-headline {
  color: #ff512f !important;
  text-shadow: 0 0 8px #ff914d99, 0 0 2px #fff2;
}
main .elo-headline i, .elo-headline i {
  color: #ff512f !important;
  text-shadow: 0 0 8px #ff914d99, 0 0 2px #fff2;
}

.modern-dark-modal {
  background: var(--farbe-akzent) !important;
  color: var(--farbe-text) !important;
  border-radius: 1.1em !important;
  border: none;
  box-shadow: 0 8px 36px 0 #2228 !important;
}

/* --- Universelle Textfarbe für alle Content-Bereiche --- */
.card, .card.mb-4, .spielmeldung-card, .messages-container > .card {
  border: none;
  background: var(--farbe-akzent) !important;
  border-radius: 10px !important;
  padding: 0.8em 1em !important;
  margin-bottom: 0.8em !important;
  color: var(--farbe-text) !important;
  box-shadow: var(--farbe-shadow-card-alt);
  position: relative;
}

.dashboard-tile {
  border: none;
  background: var(--farbe-akzent) !important;
  border-radius: 10px !important;
  box-shadow: var(--farbe-shadow-card-alt);
  padding: 1em 1em 0.8em 1em !important;
  margin-bottom: 1em !important;
  min-width: 180px;
  position: relative;
  overflow: visible;
}

.dashboard-tile .tile-title {
  color: var(--farbe-border);
  font-size: 1em;
  font-weight: 600;
  margin-bottom: 0.5em;
}
.dashboard-tile .tile-value {
  color: var(--farbe-haupt);
  font-size: 2em;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.dashboard-tile .tile-icon {
  font-size: 2.3em;
  color: var(--farbe-border);
  margin-bottom: 0.3em;
}

.dashboard-section {
  border: none;
  border-radius: 10px !important;
  background: var(--farbe-panel-alt) !important;
  margin-top: -0.8em;
  margin-bottom: 1em;
  padding: 0.8em 1em 1em 1em;
  position: relative;
  z-index: 2;
}

.dashboard-section .section-title {
  color: var(--farbe-border);
  font-size: 1.08em;
  font-weight: bold;
  margin-bottom: 0.8em;
}

.dashboard-btn, .dashboard-section button, .dashboard-section .btn {
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.98em;
  padding: 0.38em 1.1em 0.38em 0.9em;
  margin-bottom: 0.15em;
  margin-right: 0.2em;
  box-shadow: var(--farbe-shadow-btn2);
  border: none;
  transition: all 0.16s, box-shadow 0.18s;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 0.44em;
  text-shadow: 0 1px 8px #7b7373, 0 0px 2px #000000;
  outline: none;
  color: var(--farbe-white) !important;
  text-decoration: none !important;
}
.dashboard-btn:hover, .dashboard-btn:focus, .dashboard-btn-gradient:hover, .dashboard-btn-gradient:focus {
  filter: brightness(1.10) saturate(1.09);
  box-shadow: var(--farbe-shadow-btn-hover2);
  text-decoration: none;
  outline: 2px solid #444a57;
}
.dashboard-btn-gradient {
  text-shadow: 0 1px 8px #7b7373, 0 0px 2px #000000;
  background: var(--farbe-gradient-haupt2);
  color: var(--farbe-haupt);
}
.dashboard-btn-red {
  background: linear-gradient(90deg, #444a57 60%, #444a57 100%) !important;
  color: var(--farbe-haupt) !important;
  text-shadow: 0 1px 8px #000, 0 0px 2px #fff2;
}
.dashboard-btn-turquoise {
  background: var(--farbe-haupt);
  color: var(--farbe-black);
}
.dashboard-btn-turquoise:hover, .dashboard-btn-turquoise:focus {
  background: var(--farbe-haupt);
  color: var(--farbe-haupt);
}
.dashboard-btn-gradient {
  text-shadow: 0 1px 8px #7b7373, 0 0px 2px #000000;
  background: var(--farbe-gradient-haupt2);
}
.dashboard-btn-gradient:hover, .dashboard-btn-gradient:focus {
  background: var(--farbe-gradient-haupt);
  color: var(--farbe-black);
}
.dashboard-btn-yellow {
  background: var(--farbe-haupt);
  color: var(--farbe-black);
}
.dashboard-btn-yellow:hover, .dashboard-btn-yellow:focus {
  background: var(--farbe-haupt);
  color: var(--farbe-black);
}
.dashboard-btn-red {
  background: var(--farbe-haupt);
  color: var(--farbe-haupt);
}
.dashboard-btn-red:hover, .dashboard-btn-red:focus {
  background: var(--farbe-haupt);
  color: var(--farbe-haupt);
}

.dashboard-btn-blue {
  background: linear-gradient(90deg, #444a57 70%, #444a57 100%);
  color: var(--farbe-haupt);
}
.dashboard-btn-blue:hover {
  background: var(--farbe-gradient-haupt);
  color: var(--farbe-black);
}
.dashboard-btn-yellow {
  background: linear-gradient(90deg, #444a57 70%, #444a57 100%);
  color: var(--farbe-black);
}
.dashboard-btn-yellow:hover {
  background: var(--farbe-gradient-haupt);
  color: var(--farbe-black);
}

.dashboard-table, .dashboard-section .table {
  background: var(--farbe-akzent) !important;
  color: var(--farbe-text) !important;
  border-radius: 8px;
  border: none;
  margin-bottom: 0;
}
.dashboard-table th, .dashboard-section .table th {
  color: var(--farbe-haupt) !important;
  border-bottom: 1px solid var(--farbe-haupt) !important;
}
.dashboard-table td, .dashboard-section .table td {
  color: var(--farbe-text) !important;
  border-bottom: 1px solid var(--farbe-akzent) !important;
}

.spielmeldung-ergebnis {
  font-size: 1.2em;
  font-weight: bold;
  color: var(--farbe-success) !important;
  margin-bottom: 0.4em;
  letter-spacing: 0.5px;
}

/* Bestätigungs-/Erfolgsboxen in Spielmeldungen */
.alert-success, .alert-bestätigt, .spielmeldung-bestaetigt {
  background: var(--farbe-success-bg) !important;
  color: var(--farbe-success-text) !important;
  font-weight: bold;
  font-size: 1.08em;
  border: 1px solid var(--farbe-success-border) !important;
  border-radius: 7px;
  margin-bottom: 0.5em;
  line-height: 1.6;
  box-shadow: 0 2px 8px 0 #0002;
}

.bearbeitungshistorie, .spielmeldung-historie, .alert-historie {
  background: transparent !important;
  color: var(--farbe-success-text) !important;
  font-weight: bold;
  border-left: 3px solid var(--farbe-success-border);
  padding: 0.7em 1em 0.7em 1.2em;
  margin-bottom: 0.5em;
  box-shadow: none !important;
}

.messages-container {
  padding: 0.5em 0.3em !important;
  margin-bottom: 1.2em !important;
  background: none !important;
  border: none !important;
}

.card, .card *,
.main-content, .main-content *,
.container-fluid, .container-fluid *,
.messages-container, .messages-container *,
.game-info, .game-info *,
.card-body, .card-body *,
p, span, label {
  color: var(--farbe-text) !important;
}

.card, .card-body {
  --bs-card-color: var(--farbe-text) !important;
  color: var(--farbe-text) !important;
}

h1, h2, h3, h4, h5, h6, label, .form-label, .card-header, .modal-title {
  color: var(--farbe-haupt) !important;
  letter-spacing: 0.01em;
}

.text-dark, .text-body, .form-text, .form-check-label, .form-label, label {
  color: var(--farbe-text-alt) !important;
}

.form-check {
  display: flex;
  align-items: center;
  margin-bottom: 0.5em;
}


.form-check-label, label[for] {
  color: var(--farbe-text-alt) !important;
  font-size: 1.06em;
  font-weight: 400;
  margin-bottom: 0;
}

/* Info-Alert oben: Schwarz, weiße Schrift */
.alert-info {
  background: var(--farbe-hintergrund) !important;
  color: var(--farbe-white) !important;
  border: none;
  border-radius: 0 0 6px 6px !important;
}



main.main-content {
  flex: 1 0 auto;
}

.footer {
  flex-shrink: 0;
  outline: none !important;
  /* pointer-events entfernt */
}
.page-content {
  flex: 1 0 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.page-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.page-content .col-lg-6,
.page-content .col-lg-5,
.page-content .col-lg-7 {
  display: flex;
  flex-direction: column;
}

.header, .navbar {
  background: #232a34cc;
  padding: 1rem 2rem;
}

.navbar, .header, .navbar-nav, .nav-link, .navbar-brand, .navbar a, .navbar * {
  color: var(--farbe-text) !important;
  fill: var(--farbe-text) !important;
}

.navbar a:hover, .nav-link:hover, .navbar-brand:hover {
  color: var(--farbe-haupt) !important;
  text-decoration: underline;
}

main.container, .container, .container-fluid, .main-content, .page-header, .footer, .layout-wrapper {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.elo-card {
  background: transparent;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 0 16px #0003;
  padding: 2.5rem 2rem;
  margin-bottom: 2em;
}

.card {
  background: transparent;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 0 16px #0003;
}

a, .accent {
  color: var(--farbe-border);
  transition: color 0.2s;
}

.button, button {
  color: var(--farbe-white) !important;
  text-decoration: none !important;
  background: var(--farbe-gradient-haupt);
  color: var(--farbe-haupt);
  border: none;
  border-radius: 0.7em;
  padding: 0.7em 1.5em;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: var(--farbe-shadow-btn3);
  transition: none;
}

input, select, textarea {
  background: var(--farbe-akzent) !important;
  color: var(--farbe-white) !important;
  border: none;
  border-radius: 0.5em;
  padding: 0.5em 1em;
  font-size: 1.05em;
  transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--farbe-haupt) !important;
  box-shadow: 0 0 0 2px #444a5788;
  outline: none;
}
.table, .table, .table-striped, .table-responsive table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2em;
  background: var(--farbe-hintergrund) !important;
  color: var(--farbe-text);
  font-size: 1.07em;
  border-radius: 0.7em;
  overflow: hidden;
  --bs-table-bg: var(--farbe-hintergrund) !important;
}

.table th, th {
  background: var(--farbe-akzent, #232a34);
  color: var(--farbe-text, #f8fafd) !important;
  font-weight: 600;
  border-bottom: 2px solid var(--farbe-hintergrund, #232b3b);
}

.table td, td, .table th, th {
  color: var(--farbe-text, #f8fafd) !important;
  opacity: 1 !important;
  border-bottom: 1px solid var(--farbe-hintergrund, #232b3b);
}

.table thead th, thead th {
  color: var(--farbe-text, #f8fafd) !important;
  background: var(--farbe-akzent, #232a34) !important;
  font-weight: 600;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: var(--farbe-hintergrund, #1c2029);
}

.table tbody tr:hover, tr:hover {
  background: var(--farbe-akzent, #232a34);
  color: var(--farbe-text, #fff) !important;
  transition: background 0.15s;
}

.table .text-muted, .table .placeholder, .table .text-secondary {
  color: #bfc9da !important;
  opacity: 1 !important;
}

.table th {
  background: var(--farbe-hintergrund, #222836);
  color: var(--farbe-border, #444a57);
}

.table tr:hover {
  background: var(--farbe-hintergrund, #22304a);
}

::-webkit-scrollbar {
  width: 10px;
  background: var(--farbe-hintergrund, #222836);
}
::-webkit-scrollbar-thumb {
  background: var(--farbe-akzent2, #444a57);
  border-radius: 6px;
}
.tooltip {
  background: var(--farbe-hintergrund, #222836);
  color: var(--farbe-border, #444a57);
  border-radius: 0.5em;
  padding: 0.5em 1em;
  box-shadow: 0 0 8px #444a57;
  font-size: 0.95em;
}
/* Sticky Footer Fix: Spalten sollen Mindesthöhe haben */
.page-content > .container > .row > [class^="col-"] {
  min-height: 70vh;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
}




.elo-form .form-check-label {
  color: #fff;
  font-size: 1.12em;
  cursor: pointer;
  vertical-align: middle;
}
.elo-form .form-check {
  margin-bottom: 0.7em;
  display: flex;
  align-items: center;
}

td span.cell-sieg,
td span.cell-unentschieden,
td span.cell-niederlage {
  color: #3bb273 !important;
  font-weight: bold;
}
td span.cell-unentschieden {
  color: #d6b900 !important;
}
td span.cell-niederlage {
  color: #c0392b !important;
}