/* Electric Devils – Custom Styles */
/* Hauptfarben: Electric Devils Orange (#f05423), Dunkelgrau (#1e1e1e) */

:root {
  --ed-orange: #f05423;
  --ed-dark: #1e1e1e;
  --ed-light: #f8f9fa;
}

/* Gesamtbereich */
.devils-face {
  background: var(--ed-dark);
  color: var(--ed-light);
  min-height: 60vh;
}

/* Tabs */
.devils-face .nav-tabs {
  border-bottom: 2px solid var(--ed-orange);
}

.devils-face .nav-tabs .nav-link {
  color: var(--ed-light);
  border: none;
  border-bottom: 3px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.devils-face .nav-tabs .nav-link.active {
  border-bottom-color: var(--ed-orange);
  color: var(--ed-orange);
  background: transparent;
}

/* Karten (Mitgliederübersicht) */
.df-card .card {
  background: #2b2b2b;
  color: var(--ed-light);
  border-radius: 10px;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  border: 1px solid #333;
}

.df-card .card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
}

/* Profilbilder im Grid */
.df-card img {
  width: 100%;
  height: 200px;            /* Fester Platz, kein Layoutspringen */
  object-fit: cover;
  display: block;
  transition: opacity 0.3s ease;
}

/* Karteninhalt */
.df-card .card-body {
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
}

/* Symbole in Karten */
.df-card i {
  color: var(--ed-orange);
  font-size: 0.9rem;
}

/* Filter-Button-Leiste */
.filter-btn {
  border: 1px solid #444;
  color: #bbb;
  background: transparent;
  transition: all 0.2s ease;
}

.filter-btn:hover,
.filter-btn.active {
  color: var(--ed-orange);
  border-color: var(--ed-orange);
  background: rgba(240,84,35,0.1);
}

/* Suchfeld */
#df-search {
  background: #222;
  border: 1px solid #444;
  color: #eee;
}

#df-search:focus {
  border-color: var(--ed-orange);
  box-shadow: none;
  color: #fff;
}

/* Modale Fenster */
.modal-content {
  background: #2b2b2b;
  color: #eee;
  border: 1px solid #444;
}

.modal-header {
  border-bottom: 1px solid #444;
}

/* Mein Bike Bereich */
.bike-photo {
  width: 100%;
  max-width: 800px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  margin: 0 auto 10px;
}

.bike-pro-contra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.bike-pro-contra h6 {
  color: var(--ed-orange);
}

/* Debug-Felder */
#debugReload, #debugDOM {
  font-family: monospace;
  font-size: 12px;
  opacity: 0.9;
}

/* Verhindert Transition-Flackern */
.card, .card img {
  transition: none !important;
}