@import url('https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap');
:root {
  --farbe-haupt: #23242a;
  --farbe-haupt-transparent: rgba(35,36,42,0.03);
  --farbe-akzent: #e9edf5;
  --farbe-hintergrund: #f7f8fa;
  --farbe-panel: #fff;
  --farbe-panel-alt: #f3f6fa;
  --farbe-text: #23242a;
  --farbe-text-alt: #555a69;
  --farbe-text-muted: #a0a4b0;
  --farbe-akzent2: #e9edf5;
  --farbe-success: #19c37d;
  --farbe-success-bg: #d5fbe5;
  --farbe-success-text: #0b2412;
  --farbe-success-border: #19c37d;
  --farbe-border: #e0e4ea;
  --farbe-border-alt: #e0e4ea;
  --farbe-shadow: 0 2px 16px 0 rgba(35,36,42,0.07);
  --farbe-shadow-card: 0 8px 36px 0 rgba(35,36,42,0.08);
  --farbe-shadow-card-alt: 0 8px 36px 0 rgba(35,36,42,0.03);
  --farbe-shadow-btn: 0 2px 16px 0 rgba(35,36,42,0.04);
  --farbe-shadow-btn2: 0 2px 16px 0 rgba(35,36,42,0.05);
  --farbe-shadow-btn3: 0 2px 16px 0 rgba(35,36,42,0.03);
  --farbe-shadow-btn-hover: 0 2px 16px 0 rgba(35,36,42,0.09);
  --farbe-shadow-btn-hover2: 0 2px 16px 0 rgba(35,36,42,0.12);
  --radius: 12px;
  --shadow: 0 2px 16px 0 rgba(35,36,42,0.04);
  --farbe-input-bg: #fff;
  --farbe-gradient-haupt: linear-gradient(90deg, #f7f8fa 60%, #e9edf5 100%);
  --farbe-gradient-haupt2: linear-gradient(90deg, #e9edf5 70%, #f7f8fa 100%);
  --farbe-gradient-akzent: linear-gradient(90deg, #e9edf5 60%, #f7f8fa 100%);
  --farbe-white: #fff;
  --farbe-black: #000;
  --farbe-warning: #ffbe46;
  --farbe-haupt-transparent2: rgba(35,36,42,0.02);
  --farbe-hintergrund-transparent: rgba(233,237,245,0.02);
}


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  /* display: flex; entfernt für Bootstrap-Kompatibilität */
}

body {
  min-height: 100vh;
  display: block; /* Für Bootstrap-Modal-Kompatibilität */
  margin: 0;
  padding: 0;
}

.card, .dashboard-card, .dashboard-tile, .dashboard-ligen-card, .ergebnis-card, .modal-content, .offcanvas, .panel, .dashboard-header-bar, .dashboard-success-message, .sidebar {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
  box-shadow: var(--farbe-shadow-card);
}

input, textarea, select, .form-control, .form-select {
  background: var(--farbe-input-bg) !important;
  color: var(--farbe-text) !important;
  border: 1px solid var(--farbe-border);
}

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

table, th, td {
  border-color: var(--farbe-border-alt) !important;
}

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


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

table, th, td {
  border-color: var(--farbe-border-alt) !important;
}

h1, h2, h3, h4, h5, h6, label, .form-label, .card-header, .modal-title {
  color: var(--farbe-haupt) !important;
  letter-spacing: 0.01em;
}
/* --- Light-Theme: gezielte starke Überschreibungen für dunkle Bereiche, Bootstrap und Inline-Styles --- */
body .card,
body .dashboard-card,
body .dashboard-tile,
body .dashboard-ligen-card,
body .ergebnis-card,
body .modal-content,
body .offcanvas,
body .panel,
body .sidebar,
body .bg-dark,
body .bg-secondary,
body .bg-gradient,
body .bg-black,
body [style*="background:#232a34"],
body [style*="background:#222733"],
body [style*="background: #232a34"],
body [style*="background: #222733"] {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
  border-color: var(--farbe-border) !important;
  box-shadow: var(--farbe-shadow-card) !important;
}

body .text-white,
body .text-light,
body [style*="color:#fff"],
body [style*="color: #fff"] {
  color: var(--farbe-text) !important;
}

body input,
body textarea,
body select,
body .form-control,
body .form-select {
  background: var(--farbe-input-bg) !important;
  color: var(--farbe-text) !important;
  border: 1px solid var(--farbe-border) !important;
}

body .alert,
body .table,
body .modal-content {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
}
/* --- Light-Theme: Tabellen und Panels radikal überschreiben --- */
body table,
body .table,
body .table-dark,
body .table-striped tbody tr,
body .table-striped tbody tr:nth-of-type(odd),
body .table-striped tbody tr:nth-of-type(even),
body .table-dark tbody tr,
body .table-dark tbody tr:nth-of-type(odd),
body .table-dark tbody tr:nth-of-type(even) {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
}

body .table-hover tbody tr:hover {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
}

body .table-dark th,
body .table-dark td,
body .table-dark tr {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
}

body .bg-dark,
body .bg-black,
body .bg-secondary,
body .table-dark {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
}

/* Panels, Offcanvas, Sidebar noch einmal extra */
body .panel,
body .offcanvas,
body .sidebar {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
}
body .table.table-dark td,
body .table.table-dark th,
body .table.table-dark thead th,
body .table.table-dark tbody tr,
body .table.table-dark tbody td,
body .table.table-dark tbody th {
  background: var(--farbe-panel) !important;
  color: var(--farbe-text) !important;
  border-color: var(--farbe-border) !important;
}
body .table.table-dark td,
body .table.table-dark th,
body .table.table-dark thead th,
body .table.table-dark tbody tr,
body .table.table-dark tbody td,
body .table.table-dark tbody th,
body .dashboard-ligen-card .table.table-dark td,
body .dashboard-ligen-card .table.table-dark th,
body .dashboard-ligen-card .table.table-dark thead th,
body .dashboard-ligen-card .table.table-dark tbody tr,
body .dashboard-ligen-card .table.table-dark tbody td,
body .dashboard-ligen-card .table.table-dark tbody th {
  background: #fff !important;
  color: #23242a !important;
  border-color: #e0e4ea !important;
  box-shadow: none !important;
}
body .dashboard-ligen-card,
body .dashboard-ligen-card .card,
body .dashboard-ligen-card .panel,
body .dashboard-ligen-card .offcanvas,
body .dashboard-ligen-card .sidebar,
body .dashboard-spielmeldungen-card,
body .dashboard-spielmeldungen-card .card,
body .dashboard-spielmeldungen-card .panel,
body .dashboard-spielmeldungen-card .offcanvas,
body .dashboard-spielmeldungen-card .sidebar {
  background: #fff !important;
  color: #23242a !important;
  border-color: #e0e4ea !important;
  box-shadow: none !important;
}
/* --- Light-Theme: Alerts, Panels, Offcanvas, Footer etc. --- */
body .alert,
body .alert-warning,
body .alert-danger,
body .alert-info,
body .alert-success,
body .bg-dark,
body .bg-black,
body .bg-secondary,
body .panel,
body .offcanvas,
body .footer,
body .card-footer,
body .modal-footer,
body .dashboard-spielmeldungen-card .card-footer,
body .dashboard-spielmeldungen-card .panel,
body .dashboard-spielmeldungen-card .alert,
body .dashboard-spielmeldungen-card .bg-dark,
body [style*="background:#232a34"],
body [style*="background:#222733"],
body [style*="background: #232a34"],
body [style*="background: #222733"] {
  background: #fff !important;
  color: #23242a !important;
  border-color: #e0e4ea !important;
  box-shadow: none !important;
}

body .alert-warning,
body .alert-danger,
body .alert-info,
body .alert-success {
  color: #23242a !important;
  /* Optional: für leichten Farbakzent */
  background: #fffbe6 !important; /* warning */
  border-color: #ffe58f !important;
}
/* --- Light-Theme: Inline-Styles für Cards/Panels radikal überschreiben --- */
body .spielmeldung-maincard[style],
body .ergebnis-card[style],
body .spielzeiten-card[style],
body .hinweis-card[style],
body .spielmeldung-maincard,
body .ergebnis-card,
body .spielzeiten-card,
body .hinweis-card {
  background: #fff !important;
  color: #23242a !important;
  border-color: #e0e4ea !important;
  box-shadow: 0 2px 16px 0 rgba(35,36,42,0.07) !important;
}

body .card-body {
  width: 100% !important;
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* --- Light-Theme: Buttons mit Inline- und Bootstrap-Styles überschreiben --- */
body button,
body .btn,
body .btn-dark,
body .btn-lg,
body .btn-primary,
body .btn-secondary,
body .btn-outline-dark,
body .btn-outline-secondary,
body .dashboard-spielmeldungen-card button,
body .dashboard-spielmeldungen-card .btn {
  background: linear-gradient(90deg, #f7f8fa 60%, #e9edf5 100%) !important;
  color: #23242a !important;
  border: 1px solid #e0e4ea !important;
  box-shadow: 0 2px 8px 0 rgba(35,36,42,0.07) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  transition: background 0.2s, color 0.2s;
}

/* Falls Buttons im Hover dunkler werden sollen: */
body button:hover,
body .btn:hover {
  background: #e9edf5 !important;
  color: #23242a !important;
  border-color: #d0d4da !important;
}

/* --- Light-Theme: Navigation, Navbar, Sidebar, Offcanvas, Header --- */
body .navbar,
body .navbar-dark,
body .navbar-brand,
body .navbar-nav,
body .navbar-toggler,
body .nav,
body .main-header,
body .header-bar,
body .navigation,
body .offcanvas,
body .sidebar {
  background: #fff !important;
  color: #23242a !important;
  border-color: #e0e4ea !important;
  box-shadow: 0 2px 8px 0 rgba(35,36,42,0.07) !important;
}
body .navbar a,
body .navbar-dark a,
body .navbar-nav .nav-link,
body .nav-link,
body .sidebar a,
body .offcanvas a {
  color: #23242a !important;
}
body .navbar .active,
body .navbar-nav .active,
body .nav-link.active,
body .sidebar .active {
  background: #e9edf5 !important;
  color: #23242a !important;
  border-radius: 8px !important;
}
body .navbar-toggler {
  border-color: #e0e4ea !important;
}

/* --- Responsive Helper: Medien, Container, Tabellen --- */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
}
.container, .container-fluid, main, .page-content {
  max-width: 100%;
  width: 100%;
}
.table { width: 100%; }
.table, .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Dashboard-Buttons im Light-Theme */
.dashboard-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;
  display: inline-flex;
  align-items: center;
  gap: 0.44em;
  text-decoration: none !important;
}

.dashboard-btn-gradient {
  background: var(--farbe-gradient-haupt2);
  color: var(--farbe-haupt);
}

.dashboard-btn-red {
  background: linear-gradient(90deg, #d32f2f 0%, #b71c1c 100%) !important;
  color: #ffffff !important;
}

.dashboard-btn-red:hover,
.dashboard-btn-red:focus {
  background: linear-gradient(90deg, #f44336 0%, #c62828 100%) !important;
  color: #ffffff !important;
}