/* =========================================================
   THEME: DARK FUTURISTIC (Standard)
   Datei: css/style.css
   ========================================================= */

:root {
  --color-bg: #0e1628;
  --color-bg-surface: rgba(15, 25, 45, 0.6);
  --color-bg-surface-strong: rgba(10, 20, 35, 0.9);
  --color-border: rgba(0, 188, 212, 0.2);
  --color-border-strong: rgba(0, 188, 212, 0.3);
  --color-text: #f5f9ff;
  --color-text-muted: rgba(240, 248, 255, 0.65);
  --color-accent: #00e5ff;
  --color-accent-strong: #00bcd4;
  --color-success: #00e676;
  --color-warning: #ffc107;
  --color-danger: #ff5252;
  --glass-light: rgba(255, 255, 255, 0.05);
  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.4);
  --glow-accent: 0 0 20px rgba(0, 188, 212, 0.6);
  --font-family-base: "Inter", "Segoe UI", Roboto, sans-serif;
}

/* Beispiel: Grundlayout */
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family-base);
}

/* =========================================================
   NAVIGATION – FUTURISTISCHE DARK VARIANTE
   ========================================================= */

/* Basis-Navigation */
.navbar {
  background: rgba(15, 25, 45, 0.75) !important; 
  /* halbtransparenter Hintergrund mit Tiefenwirkung */
  backdrop-filter: blur(10px);
  /* Glas-Effekt */
  border-bottom: 1px solid rgba(0, 188, 212, 0.25);
  /* dezente Cyan-Linie für Struktur */
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  /* Tiefe */
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Brand / Logo */
.navbar-brand {
  color: #00e5ff !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.navbar-brand .bi {
  font-size: 1.2rem;
  color: #00e5ff;
}

/* Links allgemein */
.navbar .nav-link {
  color: #e8f6ff !important;
  font-weight: 500;
  border-radius: 0.375rem;
  transition: color 0.25s ease, background 0.25s ease, transform 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.75rem;
}

/* Hover-Zustand */
.navbar .nav-link:hover {
  color: #00e5ff !important;
  background-color: rgba(0, 188, 212, 0.1);
  transform: translateY(-1px);
}

/* Aktives Element */
.navbar .nav-link.active {
  background-color: rgba(0, 188, 212, 0.15) !important;
  border-radius: 0.375rem;
  color: #ffffff !important;
  font-weight: 600;
  box-shadow: 0 0 8px rgba(0, 188, 212, 0.25);
}

/* Aktives Icon */
.navbar .nav-link.active .bi {
  color: #00e5ff !important;
}

/* Icons */
.navbar .nav-link .bi {
  font-size: 1rem;
  color: rgba(0, 188, 212, 0.85);
  transition: color 0.3s ease;
}

/* Hover Icons */
.navbar .nav-link:hover .bi {
  color: #00e5ff;
}

/* Toggler (Hamburger Menü) */
.navbar-toggler {
  border: 1px solid rgba(0, 188, 212, 0.4);
  border-radius: 8px;
  transition: all 0.3s ease;
}

.navbar-toggler-icon {
  filter: brightness(1.5) invert(1);
}

.navbar-toggler:hover {
  background-color: rgba(0, 188, 212, 0.1);
}

/* =========================================================
   MOBILE DARSTELLUNG
   ========================================================= */
@media (max-width: 991.98px) {
  .navbar .navbar-nav .nav-link {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .navbar .nav-link .bi {
    font-size: 1.1rem;
  }

  .navbar .collapse.show {
    background-color: rgba(10, 20, 35, 0.9);
    backdrop-filter: blur(10px);
  }
}

/* =========================================================
   DESKTOP FEINTUNING
   ========================================================= */
@media (min-width: 992px) {
  .navbar .nav-link {
    margin-right: 0.3rem;
  }

  .navbar .nav-link .bi {
    margin-right: 0.4rem;
  }
}








/* =========================================================
   GLOBAL SETTINGS
   ========================================================= */
body {
  background: radial-gradient(circle at top, #0e1628 0%, #05080f 100%);
  /* Dunkler Verlauf für futuristische Tiefe */
  color: #d6e2ff;
  /* Standardtext in leichtem Blauton */
  font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  /* Moderne, klare Typografie */
}

/* Scrollbars etwas dezenter gestalten (optional) */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 188, 212, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 188, 212, 0.6);
}

/* =========================================================
   NAVBAR STYLING
   ========================================================= */
.navbar {
  background: rgba(15, 25, 45, 0.75);
  backdrop-filter: blur(8px);
  /* Glas-Effekt für moderne Tiefe */
  border-bottom: 1px solid rgba(0, 188, 212, 0.2);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

.navbar-brand {
  color: #00bcd4 !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.nav-link {
  color: #d0d9f0 !important;
  transition: color 0.3s, transform 0.2s;
}

.nav-link:hover {
  color: #00bcd4 !important;
  transform: translateY(-1px);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn-primary {
  background: linear-gradient(135deg, #00bcd4, #007ea7);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 500;
  transition: all 0.25s ease;
  box-shadow: 0 0 10px rgba(0, 188, 212, 0.4);
}

.btn-primary:hover {
  box-shadow: 0 0 20px rgba(0, 188, 212, 0.7);
  transform: translateY(-1px);
  background: linear-gradient(135deg, #00e5ff, #00bcd4);
}

.btn-danger {
  background: rgba(255, 99, 99, 0.15);
  border: 1px solid rgba(255, 99, 99, 0.4);
  color: #ff7b7b;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.btn-danger:hover {
  background: rgba(255, 99, 99, 0.25);
  color: #ffb0b0;
}

/* =========================================================
   TABLE DESIGN (Tourenübersicht)
   ========================================================= */
.table {
  background: rgba(20, 30, 50, 0.4);
  border-radius: 10px;
  overflow: hidden;
  color: #c9d9f0;
}

.table thead {
  background: rgba(0, 188, 212, 0.1);
  color: #00e5ff;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.table tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 0.2s;
}

.table tbody tr:hover {
  background: rgba(0, 188, 212, 0.08);
}

/* =========================================================
   CARD / BOXES
   ========================================================= */
.card {
  background: rgba(15, 25, 45, 0.6);
  border: 1px solid rgba(0, 188, 212, 0.15);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.card-title {
  color: #00e5ff;
  font-weight: 600;
}

/* =========================================================
   HEADINGS
   ========================================================= */
h1, h2, h3, h4 {
  color: #e0ecff !important;
  letter-spacing: 0.5px;
  font-weight: 600;
}

/* =========================================================
   FOOTER / INFO-TEXT
   ========================================================= */
footer {
  color: #7a859e;
  font-size: 0.9rem;
  padding: 20px;
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

/* =========================================================
   ANIMATIONEN (optional, für futuristische Haptik)
   ========================================================= */

/* Leuchtender Hover-Effekt für interaktive Elemente */
a:hover, button:hover {
  filter: brightness(1.15);
}

/* Sanfter Fade-In bei Seitenaufbau */
body {
  animation: fadeIn 0.6s ease-in;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}


/* =========================================================
   TABELLENSTYLING – FUTURISTISCHE DARK VARIANTE (HELLERE SCHRIFT)
   ========================================================= */

/* Allgemeine Tabellenstruktur */
.table {
  background: rgba(15, 25, 45, 0.55) !important;
  color: #f5f9ff; /* deutlich hellere Schriftfarbe */
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 188, 212, 0.15);
}

/* Tabellenkopf */
.table thead {
  background: linear-gradient(
    135deg,
    rgba(0, 188, 212, 0.18),
    rgba(0, 188, 212, 0.07)
  ) !important;
  color: #e5faff; /* helles Cyan-Weiß für Header */
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(0, 188, 212, 0.3);
}

/* Kopfzellen */
.table thead th {
  padding: 14px 16px;
  font-size: 0.85rem;
  text-align: left;
  background-color: transparent !important;
}

/* Tabellenzellen im Body */
.table tbody td {
  padding: 8px 10px;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  vertical-align: middle;
  color: #f5f9ff; /* heller Text */
  transition: background 0.25s ease, color 0.25s ease;
}

/* Hover-Effekt */
.table tbody tr:hover td {
  background: rgba(0, 188, 212, 0.08) !important;
  color: #ffffff; /* pure white on hover */
  cursor: pointer;
}

/* Abwechselnde Zeilenfarben */
.table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.02) !important;
}

/* Tabellenränder */
.table-bordered {
  border: 1px solid rgba(0, 188, 212, 0.15);
  border-radius: 12px;
}

/* =========================================================
   ICONS / AKTIONEN IN TABELLEN
   ========================================================= */

.table .btn-danger {
  background: transparent;
  border: none;
  color: #ff8080;
  transition: all 0.2s ease;
}

.table .btn-danger:hover {
  color: #ffc1c1;
  transform: scale(1.15);
}

/* =========================================================
   RESPONSIVE ANPASSUNG
   ========================================================= */
@media (max-width: 768px) {
  .table thead {
    font-size: 0.75rem;
  }
  .table tbody td {
    padding: 10px 12px;
    font-size: 0.8rem;
  }
}


/* =========================================================
   CARD-STYLING – DARK MODE FIX (Bootstrap Override)
   ========================================================= */

/* Gesamte Card auf dunklen, transparenten Hintergrund umstellen */
.card {
  background-color: rgba(15, 25, 45, 0.6) !important; /* ersetzt #fff */
  color: #f5f9ff !important; /* deutlich heller Text */
  border: 1px solid rgba(0, 188, 212, 0.15);
  border-radius: 14px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.45);
  transition: all 0.3s ease;
}

/* Hover-Effekt – weiches Aufleuchten */
.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 35px rgba(0, 188, 212, 0.18);
  border-color: rgba(0, 188, 212, 0.25);
}

/* Card-Header auf dunkle Glasoptik umstellen */
.card-header {
  background-color: rgba(0, 188, 212, 0.08) !important;
  background-image: linear-gradient(
    135deg,
    rgba(0, 188, 212, 0.2),
    rgba(0, 188, 212, 0.05)
  ) !important;
  color: #e8faff !important;
  border-bottom: 1px solid rgba(0, 188, 212, 0.25);
  font-weight: 600;
  letter-spacing: 0.4px;
  text-shadow: 0 0 4px rgba(0, 188, 212, 0.3);
}

/* Card-Body: transparent und hellen Text erzwingen */
.card-body {
  background-color: transparent !important;
  color: #f5f9ff !important;
}

/* Innerhalb des Bodys: Labels und Werte */
.card-body strong {
  color: #eaf3ff;
  font-weight: 600;
}

.card-body span {
  color: #f5f9ff;
}

/* Farbige Akzente */
.card-body .text-primary {
  color: #00e5ff !important;
  font-weight: 600;
}

.card-body .text-success {
  color: #5cffc7 !important;
  font-weight: 600;
}

/* Hover-Highlight für Infozellen */
.card-body .row.g-2 > [class*="col-"]:hover {
  background-color: rgba(0, 188, 212, 0.07) !important;
  border-radius: 8px;
}

/* =========================================================
   MOBILE OPTIMIERUNG
   ========================================================= */
@media (max-width: 768px) {
  .card-header h6 {
    font-size: 0.95rem;
  }
  .card-body strong,
  .card-body span {
    font-size: 0.9rem;
  }
}


/* =========================================================
   MODALS / DIALOGE – FUTURISTISCHE DARK VARIANTE
   ========================================================= */

/* Overlay-Hintergrund (leicht transparentes Schwarz mit Blur) */
.modal-backdrop.show {
  background-color: rgba(5, 10, 20, 0.8);
  backdrop-filter: blur(4px);
}

/* Modal selbst */
.modal-content {
  background: rgba(15, 25, 45, 0.7) !important;
  border: 1px solid rgba(0, 188, 212, 0.2);
  border-radius: 14px;
  color: #f5f9ff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

/* Modal Header */
.modal-header {
  background: linear-gradient(
    135deg,
    rgba(0, 188, 212, 0.12),
    rgba(0, 188, 212, 0.04)
  );
  border-bottom: 1px solid rgba(0, 188, 212, 0.15);
  color: #e8faff;
  font-weight: 600;
  letter-spacing: 0.4px;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  padding: 0.75rem 1rem;
}

.modal-header .modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: #e8faff;
}

.modal-header .btn-close {
  filter: invert(1) brightness(1.2);
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.modal-header .btn-close:hover {
  opacity: 1;
}

/* Modal Body */
.modal-body {
  color: #f5f9ff;
  background: transparent;
  padding: 1.25rem 1.5rem;
}

/* Modal Footer */
.modal-footer {
  border-top: 1px solid rgba(0, 188, 212, 0.15);
  background: rgba(15, 25, 45, 0.5);
}

/* =========================================================
   FORMULARELEMENTE – DARK / FUTURISTISCH
   ========================================================= */

/* Label */
.form-label {
  color: #d6e2ff;
  font-weight: 500;
}

/* Eingabefelder */
.form-control,
.form-select {
  background-color: rgba(20, 30, 50, 0.7) !important;
  color: #f5f9ff !important;
  border: 1px solid rgba(0, 188, 212, 0.25);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  transition: all 0.25s ease;
}

/* Placeholder leicht transparent */
.form-control::placeholder {
  color: rgba(220, 230, 255, 0.4);
}

/* Hover-Effekt */
.form-control:hover,
.form-select:hover {
  border-color: rgba(0, 188, 212, 0.4);
  background-color: rgba(25, 35, 60, 0.8);
}

/* Fokuszustand */
.form-control:focus,
.form-select:focus {
  border-color: #00e5ff;
  box-shadow: 0 0 8px rgba(0, 188, 212, 0.5);
  outline: none;
  background-color: rgba(25, 35, 60, 0.9);
}

/* Checkboxen & Radios */
.form-check-input {
  background-color: rgba(30, 40, 60, 0.7);
  border: 1px solid rgba(0, 188, 212, 0.4);
}

.form-check-input:checked {
  background-color: #00e5ff;
  border-color: #00e5ff;
  box-shadow: 0 0 6px rgba(0, 188, 212, 0.5);
}

/* Select-Dropdowns */
.form-select option {
  background: #101828;
  color: #f5f9ff;
}

/* =========================================================
   BUTTONS IM DIALOG
   ========================================================= */
.modal-footer .btn-primary {
  background: linear-gradient(135deg, #00bcd4, #007ea7);
  border: none;
  border-radius: 8px;
  color: #fff;
  font-weight: 500;
  transition: all 0.25s ease;
  box-shadow: 0 0 10px rgba(0, 188, 212, 0.4);
}

.modal-footer .btn-primary:hover {
  box-shadow: 0 0 20px rgba(0, 188, 212, 0.7);
  background: linear-gradient(135deg, #00e5ff, #00bcd4);
}

.modal-footer .btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f5f9ff;
  border-radius: 8px;
}

.modal-footer .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
}


/* =========================================================
   PLACEHOLDER-TEXTE – LESBAR, ABER DEZENT
   ========================================================= */

/* Allgemein für alle Input-Typen */
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder {
  color: rgba(240, 248, 255, 0.65) !important;
  /* helleres, aber leicht transparentes Weiß (ähnlich #f0f8ff) */
  font-weight: 400;
  opacity: 1; /* verhindert, dass Browser eigene Transparenz anwenden */
}

/* Beim Hover etwas intensiver (dezent) */
.form-control:hover::placeholder {
  color: rgba(240, 248, 255, 0.75) !important;
}

/* Beim Fokus noch leicht heller, um zu signalisieren, dass das Feld aktiv ist */
.form-control:focus::placeholder {
  color: rgba(240, 248, 255, 0.85) !important;
}


/* =========================================================
   BUTTONS – FUTURISTISCHES DARK THEME
   ========================================================= */

/* Basiseinstellungen für alle Buttons */
.btn {
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  box-shadow: 0 0 0 transparent;
}

/* =========================================================
   PRIMARY BUTTON – (Standardaktion)
   ========================================================= */
.btn-primary {
  background: linear-gradient(135deg, #00bcd4, #007ea7);
  border: none;
  color: #ffffff !important;
  box-shadow: 0 0 10px rgba(0, 188, 212, 0.3);
}

.btn-primary:hover {
  background: linear-gradient(135deg, #00e5ff, #00bcd4);
  box-shadow: 0 0 20px rgba(0, 188, 212, 0.6);
  transform: translateY(-1px);
}

/* =========================================================
   SUCCESS BUTTON – (z. B. „Neue Fahrt eintragen“)
   ========================================================= */
.btn-success {
  background: linear-gradient(135deg, #00e676, #00bfa5);
  border: none;
  color: #ffffff !important;
  box-shadow: 0 0 12px rgba(0, 230, 118, 0.3);
}

.btn-success:hover {
  background: linear-gradient(135deg, #5cffc7, #00e676);
  box-shadow: 0 0 22px rgba(0, 230, 118, 0.6);
  transform: translateY(-1px);
}

/* =========================================================
   SECONDARY BUTTON – neutrale Aktionen
   ========================================================= */
.btn-secondary {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: #f5f9ff;
}

.btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.25);
}

/* =========================================================
   DANGER BUTTON – Warn- oder Löschaktionen
   ========================================================= */
.btn-danger {
  background: linear-gradient(135deg, #ff4f4f, #b71c1c);
  border: none;
  color: #fff;
  box-shadow: 0 0 10px rgba(255, 79, 79, 0.3);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #ff7b7b, #ff5252);
  box-shadow: 0 0 20px rgba(255, 79, 79, 0.6);
}

/* =========================================================
   OUTLINE VARIANTEN – dezente Alternativen
   ========================================================= */
.btn-outline-primary {
  background: transparent;
  border: 1px solid rgba(0, 188, 212, 0.5);
  color: #00e5ff;
}

.btn-outline-primary:hover {
  background: rgba(0, 188, 212, 0.1);
  box-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
  color: #ffffff;
}

.btn-outline-success {
  background: transparent;
  border: 1px solid rgba(0, 230, 118, 0.5);
  color: #5cffc7;
}

.btn-outline-success:hover {
  background: rgba(0, 230, 118, 0.1);
  box-shadow: 0 0 10px rgba(0, 230, 118, 0.5);
  color: #ffffff;
}

/* =========================================================
   ICONS IN BUTTONS
   ========================================================= */
.btn .bi {
  font-size: 1rem;
  transition: transform 0.25s ease;
}

.btn:hover .bi {
  transform: scale(1.1);
}



/* Theme-Switch allgemein */
.form-switch .form-check-input {
  width: 2.6em;
  height: 1.4em;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  transition: all 0.3s ease;
}

/* Aktiver Zustand (Dark Mode aktiv) */
.form-switch .form-check-input:checked {
  background-color: #00e5ff;
  border-color: #00e5ff;
  box-shadow: 0 0 10px rgba(0, 188, 212, 0.5);
}

/* Label (Sonne / Mond) */
.form-switch .form-check-label {
  font-size: 0.9rem;
  margin-left: 0.5rem;
  color: var(--color-text);
  user-select: none;
}

.form-switch .bi {
  font-size: 1rem;
  vertical-align: middle;
}

/* =========================================================
   LIST-GROUP – DARK MODE OVERRIDE
   Bootstrap-Standard überschreiben für dunkles Theme
   ========================================================= */

/* Basis-Listenelement: dunkler Hintergrund, helle Schrift */
.list-group-item {
  background-color: rgba(15, 25, 45, 0.6) !important;
  color: #f5f9ff !important;
  border-color: rgba(0, 188, 212, 0.12) !important;
  transition: background 0.2s ease;
}

/* Hover-Effekt für Listenelemente */
.list-group-item:hover {
  background-color: rgba(0, 188, 212, 0.08) !important;
}

/* Text-Elemente innerhalb der Liste */
.list-group-item strong {
  color: #e8faff;
}

.list-group-item small,
.list-group-item .text-muted {
  color: rgba(240, 248, 255, 0.6) !important;
}

/* Badges innerhalb der Liste besser sichtbar machen */
.list-group-item .badge {
  font-weight: 500;
  letter-spacing: 0.3px;
}

/* =========================================================
   TEXT-MUTED – DARK MODE OVERRIDE
   Bootstrap .text-muted (#6c757d) ist zu dunkel auf dark bg
   ========================================================= */
.text-muted {
  color: rgba(240, 248, 255, 0.55) !important;
}

/* =========================================================
   ALERT – DARK MODE OVERRIDE
   ========================================================= */
.alert {
  border-radius: 10px;
}

/* =========================================================
   BG-WARNING OPACITY FIX FÜR CARD-HEADER
   ========================================================= */
.card-header.bg-warning.bg-opacity-25 {
  background-color: rgba(255, 193, 7, 0.15) !important;
  color: #ffc107 !important;
  border-bottom: 1px solid rgba(255, 193, 7, 0.25);
}

.card-header.bg-warning.bg-opacity-25 h6,
.card-header.bg-warning.bg-opacity-25 .bi {
  color: #ffc107 !important;
}

/* Border-Warning Card im Dark Mode */
.card.border-warning {
  border-color: rgba(255, 193, 7, 0.35) !important;
}