/* =====================================================
   GARAGENGOLD – HÄNDLERMODUS
   Dark Racing Theme
   ===================================================== */

/* --- CSS Variables (Light = Default) --- */
:root {
  --bg-primary:    #f0f1f3;
  --bg-secondary:  #e4e6ea;
  --bg-card:       #ffffff;
  --bg-card-hover: #f8f8fa;
  --bg-input:      #f8f8fa;
  --border:        #d0d2d8;
  --border-bright: #b8bcc4;

  --accent: #e8760a;
  --accent-dark: #b85c08;
  --accent-glow: rgba(232, 118, 10, 0.12);

  --text-primary:   #111318;
  --text-secondary: #4a4e58;
  --text-muted:     #8a8f9e;

  --success: #2ea84f;
  --danger: #c0392b;
  --warning: #e8a00a;
  --info: #2980b9;

  /* Rarity Colors */
  --rarity-common: #888888;
  --rarity-uncommon: #2ea84f;
  --rarity-rare: #2980b9;
  --rarity-mythic: #9b59b6;
  --rarity-unicorn: #e8c30a;

  /* Faction Colors */
  --faction-sportscar: #e83b2e;
  --faction-street: #2980b9;
  --faction-supercar: #e8c30a;
  --faction-hypercar: #e80ab5;
  --faction-movie: #e8760a;

  --bg-hud: #1e1e1e;
  --bg-image: #d4d6da;

  --font-title: 'Oswald', sans-serif;
  --font-mono: 'Courier New', monospace;

  --hud-height: 56px;
  --nav-height: 48px;
  --radius: 6px;
  --radius-lg: 10px;
}

/* --- Dark Theme Override --- */
[data-theme="dark"] {
  --bg-primary: #0d0d0d;
  --bg-secondary: #161616;
  --bg-card: #1a1a1a;
  --bg-card-hover: #222222;
  --bg-input: #111111;
  --border: #2a2a2a;
  --border-bright: #3a3a3a;

  --accent-glow: rgba(232,118,10,0.25);

  --text-primary: #e8e8e8;
  --text-secondary: #888;
  --text-muted: #555;

  --bg-hud: #0a0a0a;
  --bg-image: #111111;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: 13px;
  overflow-x: hidden;
}

/* --- HUD --- */
#hud {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--hud-height);
  background: var(--bg-hud);
  border-bottom: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.2rem;
  z-index: 100;
  gap: 1rem;
}

.hud-left {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
  flex-shrink: 0;
}

.hud-logo {
  height: 54px;
  width: auto;
  display: block;
  object-fit: contain;
}

.hud-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.hud-level {
  font-size: 0.75rem;
  color: #ddd;
  background: #2a2a2a;
  border: 1px solid #3a3a3a;
  padding: 1px 5px;
  border-radius: 3px;
}

.hud-center {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.hud-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.hud-label {
  font-size: 0.65rem;
  color: #ddd; /*var(--text-muted);*/
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.hud-value {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: var(--accent);
}

.hud-value.cash { color: var(--success); }

.hud-right {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  justify-content: flex-end;
  flex-shrink: 0;
}

.hud-day {
  font-family: var(--font-title);
  font-size: 0.9rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

/* --- Buttons --- */
.btn-primary, .btn-secondary, .btn-danger, .btn-success {
  font-family: var(--font-title);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  padding: 0.45rem 0.9rem;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--accent);
  color: #000;
  font-weight: 600;
}
.btn-primary:hover { background: #ff8c20; transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-bright);
}
.btn-secondary:hover { color: var(--text-primary); border-color: var(--accent); }

.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover { background: #e74c3c; }

.btn-success {
  background: var(--success);
  color: #fff;
}
.btn-success:hover { background: #27ae60; }

.btn-advance {
  font-size: 0.85rem;
  padding: 0.5rem 1.1rem;
  box-shadow: 0 0 12px var(--accent-glow);
}

button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none !important;
}

/* --- NAV --- */
#main-nav {
  position: fixed;
  top: var(--hud-height);
  left: 0; right: 0;
  height: var(--nav-height);
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  z-index: 90;
  gap: 0.25rem;
  overflow-x: auto;
}

.nav-btn {
  font-family: var(--font-title);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0.65rem 0.9rem;
  transition: all 0.15s ease;
  white-space: nowrap;
  height: 100%;
}

.nav-btn:hover { color: var(--text-primary); }
.nav-btn.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.nav-btn.locked {
  color: var(--text-muted);
  cursor: not-allowed;
  position: relative;
}
.nav-btn.locked::after {
  content: '🔒';
  font-size: 0.65rem;
  margin-left: 0.3rem;
}

/* --- Main Content --- */
#content {
  margin-top: calc(var(--hud-height) + var(--nav-height));
  padding: 1.2rem;
  min-height: calc(100vh - var(--hud-height) - var(--nav-height));
}

.view { display: block; }
.view.hidden { display: none; }

/* --- View Header --- */
.view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.view-header h2 {
  font-family: var(--font-title);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0.05em;
}

.view-header h3 {
  font-family: var(--font-title);
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.view-subtitle {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.view-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

select {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  cursor: pointer;
}
select:focus { outline: 1px solid var(--accent); }

input[type="number"], input[type="text"] {
  background: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  padding: 0.35rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  width: 100%;
}
input:focus { outline: 1px solid var(--accent); border-color: var(--accent); }

/* --- Card Grid --- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}

.card-grid.small {
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
}

/* --- Vehicle Card --- */
.vehicle-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}

.vehicle-card:hover {
  border-color: var(--accent);
  background: var(--bg-card-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}

.vehicle-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-glow);
}

.card-image-wrap {
  position: relative;
  width: 100%;
  height: 130px;
  overflow: hidden;
  background: var(--bg-image);
}

.card-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  opacity: 0.5;
}

.card-rarity-strip {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}

.card-faction-badge {
  position: absolute;
  bottom: 6px;
  right: 6px;
  font-size: 0.6rem;
  font-family: var(--font-title);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: rgba(0,0,0,0.7);
  border: 1px solid currentColor;
}

.card-condition-bar {
  position: absolute;
  bottom: 0; left: 0;
  height: 3px;
  transition: width 0.3s ease;
}

.card-body {
  padding: 0.6rem 0.75rem 0.75rem;
}

.card-name {
  font-family: var(--font-title);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.card-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}

.card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.2rem 0.5rem;
  margin-bottom: 0.6rem;
}

.card-stat {
  display: flex;
  justify-content: space-between;
  gap: 0.3rem;
}

.card-stat-label {
  color: var(--text-muted);
  font-size: 0.68rem;
  text-transform: uppercase;
}

.card-stat-value {
  color: var(--text-primary);
  font-size: 0.72rem;
  font-weight: bold;
}

.card-price {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.card-price.sell { color: var(--success); }
.card-price.buy  { color: var(--accent); }

.card-condition-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.condition-good  { color: var(--success); }
.condition-ok    { color: var(--warning); }
.condition-bad   { color: var(--danger); }

.card-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.card-actions .btn-primary,
.card-actions .btn-secondary,
.card-actions .btn-success,
.card-actions .btn-danger {
  flex: 1;
  font-size: 0.72rem;
  padding: 0.35rem 0.5rem;
  text-align: center;
}

.card-expires {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-align: right;
  margin-top: 0.3rem;
}

/* Rarity colors on cards */
.rarity-common    .card-rarity-strip { background: var(--rarity-common); }
.rarity-uncommon  .card-rarity-strip { background: var(--rarity-uncommon); }
.rarity-rare      .card-rarity-strip { background: var(--rarity-rare); }
.rarity-mythic    .card-rarity-strip { background: var(--rarity-mythic); }
.rarity-unicorn   .card-rarity-strip { background: var(--rarity-unicorn); }

.rarity-common    { border-color: #333; }
.rarity-uncommon:hover  { border-color: var(--rarity-uncommon); }
.rarity-rare:hover      { border-color: var(--rarity-rare); }
.rarity-mythic:hover    { border-color: var(--rarity-mythic); }
.rarity-unicorn         { border-color: rgba(232,195,10,0.4); }
.rarity-unicorn:hover   { border-color: var(--rarity-unicorn); box-shadow: 0 0 15px rgba(232,195,10,0.2); }

/* Faction badge colors */
.faction-sportscar { color: var(--faction-sportscar); }
.faction-street    { color: var(--faction-street); }
.faction-supercar  { color: var(--faction-supercar); }
.faction-hypercar  { color: var(--faction-hypercar); }
.faction-movie     { color: var(--faction-movie); }

/* --- Trends Bar --- */
.trends-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.trend-chip {
  font-size: 0.7rem;
  font-family: var(--font-title);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.trend-chip.up   { color: var(--success); border-color: var(--success); }
.trend-chip.down { color: var(--danger);  border-color: var(--danger); }
.trend-chip.neutral { color: var(--text-muted); }

/* --- Workshop --- */
/* Zeile 1: aktive Workshop-Slots + leere Slot-Platzhalter nebeneinander */
.workshop-slots-row {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  align-items: flex-start;
  margin-bottom: 1.2rem;
}

.workshop-jobs {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.workshop-jobs .vehicle-card {
  width: 240px;
  flex-shrink: 0;
}

.workshop-empty-slots {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* Zeile 2: Garage-Fahrzeuge zum Hinzufügen */
.workshop-add-section {
  margin-bottom: 1.5rem;
}

.workshop-add-title {
  font-family: var(--font-title);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  margin-bottom: 0.8rem;
}

.workshop-slot {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  min-height: 120px;
}

.workshop-slot.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  border-style: dashed;
  flex-direction: column;
  gap: 0.5rem;
  width: 240px;
  flex-shrink: 0;
  min-height: 300px;
}

.ws-slot-icon { font-size: 2rem; opacity: 0.4; }
.ws-slot-label { font-family: var(--font-title); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; }

.workshop-slot.active {
  border-color: var(--accent);
}

.workshop-job-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.6rem;
}

.workshop-job-name {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: var(--text-primary);
}

.workshop-job-type {
  font-size: 0.65rem;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.workshop-progress {
  margin: 0.6rem 0;
}

.progress-bar {
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 0.25rem;
}

.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.progress-fill.green { background: var(--success); }

.workshop-job-info {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}

/* --- Auctions --- */
.auction-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.auction-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: grid;
  grid-template-columns: 180px 1fr auto;
  gap: 1rem;
  align-items: center;
}

.auction-item:hover { border-color: var(--border-bright); }

.auction-image {
  width: 180px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-image);
}

.auction-placeholder {
  width: 180px;
  height: 100px;
  border-radius: var(--radius);
  background: var(--bg-image);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--text-muted);
}

.auction-info h3 {
  font-family: var(--font-title);
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.auction-bids {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin: 0.5rem 0;
}

.auction-bid-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.auction-bid-row .bid-value {
  color: var(--accent);
  font-weight: bold;
}

.auction-time-left {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.auction-time-left.urgent { color: var(--danger); }

.auction-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: flex-end;
  min-width: 160px;
}

.auction-actions input[type="number"] {
  width: 150px;
  text-align: right;
}

.auction-status {
  font-family: var(--font-title);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 3px;
}

.auction-status.active { color: var(--success); background: rgba(46,168,79,0.1); }
.auction-status.won    { color: var(--accent);  background: rgba(232,118,10,0.1); }
.auction-status.lost   { color: var(--danger);  background: rgba(192,57,43,0.1); }

/* --- Dealership --- */
.dealership-info {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  margin-bottom: 1.5rem;
}

.dealership-level-display {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dealership-level-badge {
  font-family: var(--font-title);
  font-size: 2rem;
  color: var(--accent);
  background: var(--bg-secondary);
  border: 2px solid var(--accent);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dealership-level-info h3 {
  font-family: var(--font-title);
  font-size: 1.2rem;
  color: var(--text-primary);
}

.dealership-level-info p {
  font-size: 0.8rem;
  color: var(--text-muted);
}

.dealership-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.dealership-stat {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.dealership-stat-label {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.dealership-stat-value {
  font-family: var(--font-title);
  font-size: 1.1rem;
  color: var(--text-primary);
}

.rep-bar-wrap {
  margin-top: 0.5rem;
}

.rep-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.rep-bar {
  height: 8px;
  background: var(--bg-secondary);
  border-radius: 4px;
  overflow: hidden;
}

.rep-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent));
  border-radius: 4px;
  transition: width 0.4s ease;
}

.upgrades-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8rem;
}

.upgrade-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.upgrade-card.owned {
  border-color: var(--success);
  opacity: 0.7;
}

.upgrade-card.unavailable {
  opacity: 0.5;
}

.upgrade-name {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: var(--text-primary);
}

.upgrade-effect {
  font-size: 0.75rem;
  color: var(--text-secondary);
  flex: 1;
}

.upgrade-cost {
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--accent);
}

.upgrade-req {
  font-size: 0.65rem;
  color: var(--text-muted);
}

/* --- Modal --- */
#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

#modal-overlay.hidden { display: none; }

#modal-box {
  background: var(--bg-secondary);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius);
  transition: color 0.15s;
}
.modal-close:hover { color: var(--text-primary); }

.modal-title {
  font-family: var(--font-title);
  font-size: 1.3rem;
  color: var(--text-primary);
  margin-bottom: 1rem;
  padding-right: 2rem;
}

.modal-vehicle-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.modal-vehicle-img {
  width: 200px;
  height: 130px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-image);
}

.modal-vehicle-placeholder {
  width: 200px;
  height: 130px;
  border-radius: var(--radius);
  background: var(--bg-image);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--text-muted);
}

.modal-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

.modal-info-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  gap: 0.5rem;
}

.modal-info-label { color: var(--text-muted); }
.modal-info-value { color: var(--text-primary); font-weight: bold; }

.modal-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin: 1rem 0;
}

.modal-stat-box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  text-align: center;
}

.modal-stat-label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.2rem;
}

.modal-stat-value {
  font-family: var(--font-title);
  font-size: 1.05rem;
  color: var(--text-primary);
}

.modal-ability {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.75rem;
  margin: 0.8rem 0;
}

.modal-ability-name {
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--accent);
  margin-bottom: 0.3rem;
}

.modal-ability-text {
  font-size: 0.75rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.modal-section-title {
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 1rem 0 0.5rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.3rem;
}

.modal-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 1.2rem;
}

.modal-actions .btn-primary,
.modal-actions .btn-secondary,
.modal-actions .btn-danger,
.modal-actions .btn-success {
  flex: 1;
  min-width: 120px;
  padding: 0.6rem 1rem;
  font-size: 0.82rem;
}

.modal-workshop-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0.8rem 0;
}

.workshop-option {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.workshop-option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.workshop-option-name {
  font-family: var(--font-title);
  font-size: 0.9rem;
  color: var(--text-primary);
}

.workshop-option-cost {
  font-size: 0.8rem;
  color: var(--accent);
}

.workshop-option-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.workshop-input-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.workshop-input-row label {
  font-size: 0.72rem;
  color: var(--text-secondary);
  white-space: nowrap;
}

.workshop-input-row input {
  width: 100px;
}

/* Workshop job detail */
.upgrade-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.upgrade-list li {
  font-size: 0.75rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.upgrade-list li::before {
  content: '⬡';
  color: var(--accent);
  font-size: 0.6rem;
}

/* --- Notifications --- */
#notifications {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  pointer-events: none;
  max-width: 320px;
}

.notification {
  background: var(--bg-secondary);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  font-size: 0.8rem;
  color: var(--text-primary);
  animation: slideIn 0.25s ease;
  pointer-events: all;
  border-left-width: 3px;
}

.notification.success { border-left-color: var(--success); }
.notification.error   { border-left-color: var(--danger); }
.notification.warning { border-left-color: var(--warning); }
.notification.info    { border-left-color: var(--info); }

@keyframes slideIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; transform: translateY(5px); }
}

/* --- Day Advance Overlay --- */
#day-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

#day-overlay.hidden { display: none; }

.day-overlay-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.day-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.day-log {
  max-height: 300px;
  overflow-y: auto;
  text-align: center;
  max-width: 400px;
}

.day-log-entry {
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding: 0.2rem 0;
  animation: fadeIn 0.3s ease;
}

.day-log-entry.highlight {
  color: var(--accent);
  font-family: var(--font-title);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Empty State --- */
.empty-state {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 3rem;
  margin-bottom: 0.8rem;
  opacity: 0.5;
}

.empty-state-text {
  font-family: var(--font-title);
  font-size: 1rem;
  margin-bottom: 0.4rem;
  color: var(--text-secondary);
}

.empty-state-sub {
  font-size: 0.78rem;
}

/* --- Misc --- */
.label-rarity {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-title);
}

.rarity-common    .label-rarity { color: var(--rarity-common); }
.rarity-uncommon  .label-rarity { color: var(--rarity-uncommon); }
.rarity-rare      .label-rarity { color: var(--rarity-rare); }
.rarity-mythic    .label-rarity { color: var(--rarity-mythic); }
.rarity-unicorn   .label-rarity { color: var(--rarity-unicorn); }

.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-accent  { color: var(--accent); }
.text-muted   { color: var(--text-muted); }

hr.divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0.8rem 0;
}

.flex-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.tag {
  display: inline-block;
  font-size: 0.62rem;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-bright); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Responsive tweaks */
@media (max-width: 700px) {
  .auction-item {
    grid-template-columns: 1fr;
  }
  .auction-image, .auction-placeholder {
    width: 100%;
    height: 120px;
  }
  .modal-vehicle-header {
    grid-template-columns: 1fr;
  }
  .modal-vehicle-img, .modal-vehicle-placeholder {
    width: 100%;
    height: 160px;
  }
  .hud-center { display: none; }
}

/* =====================================================
   HISTORICAL MODE ADDITIONS
   ===================================================== */

/* --- HUD Date & Time Buttons --- */
.hud-date {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-shadow: 0 0 8px var(--accent-glow);
}

.hud-time-buttons {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin-right: 100px;
}

.btn-advance-year {
  background: transparent;
  border: 1px solid var(--accent-dark);
  color: var(--accent);
  padding: 0.45rem 0.9rem;
  font-size: 0.8rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: var(--font-title);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-advance-year:hover { background: var(--accent-dark); color: #fff; }
.btn-advance-year:disabled { opacity: 0.4; cursor: not-allowed; }

/* --- Scenario Screen --- */
#start-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  overflow-y: auto;
  padding: 2rem 1rem;
}

#start-screen.hidden { display: none; }

.start-buttons {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  max-width: 400px;
  margin: 0 auto;
}

.start-buttons .btn-primary,
.start-buttons .btn-secondary {
  width: 100%;
}

.btn-new-game {
  font-size: 1.1rem;
}

#scenario-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 400;
  overflow-y: auto;
  padding: 2rem 1rem;
}

#scenario-screen.hidden { display: none; }

.scenario-header-small {
  text-align: center;
  margin-bottom: 1.5rem;
}

.scenario-back-row {
  text-align: center;
  margin-top: 1.5rem;
}

.scenario-box {
  max-width: 960px;
  width: 100%;
}

.scenario-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.scenario-title {
  font-family: var(--font-title);
  font-size: 2.8rem;
  color: var(--accent);
  letter-spacing: 0.15em;
  margin-bottom: 0.3rem;
  text-shadow: 0 0 30px var(--accent-glow);
}

.scenario-subtitle {
  font-family: var(--font-title);
  font-size: 0.85rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

.scenario-intro {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 520px;
  margin: 0 auto;
}

.scenario-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.scenario-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  position: relative;
  overflow: hidden;
}

.scenario-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  opacity: 0;
  transition: opacity 0.15s;
}

.scenario-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.4);
}
.scenario-card:hover::before { opacity: 1; }

.scenario-year-badge {
  font-family: var(--font-title);
  font-size: 3rem;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 0.4rem;
  opacity: 0.9;
}

.scenario-name {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.6rem;
}

.scenario-desc {
  font-size: 0.73rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin-bottom: 0.7rem;
}

.scenario-hint {
  font-size: 0.7rem;
  color: var(--warning);
  font-style: italic;
  border-left: 2px solid var(--warning);
  padding-left: 0.5rem;
  margin-bottom: 0.8rem;
  line-height: 1.4;
}

.scenario-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--border);
  padding-top: 0.65rem;
}

.scenario-cash {
  font-family: var(--font-title);
  color: var(--success);
  font-size: 1.05rem;
}

.scenario-diff {
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.diff-einstieg { color: var(--success); border: 1px solid var(--success); }
.diff-leicht   { color: var(--info);    border: 1px solid var(--info); }
.diff-mittel   { color: var(--warning); border: 1px solid var(--warning); }
.diff-experte  { color: var(--danger);  border: 1px solid var(--danger); }

/* --- Market Sentiment Bar --- */
.sentiment-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.sentiment-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-family: var(--font-title);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.sentiment-boom    { color: #ff9800; border-color: #ff9800; background: rgba(255,152,0,0.08); }
.sentiment-up      { color: var(--success); border-color: var(--success); background: rgba(46,168,79,0.08); }
.sentiment-stable  { color: var(--text-muted); }
.sentiment-down    { color: var(--danger); border-color: var(--danger); background: rgba(192,57,43,0.08); }
.sentiment-crash   { color: #fff; border-color: var(--danger); background: var(--danger); animation: pulse-crash 1.5s infinite; }

@keyframes pulse-crash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.sentiment-year-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  margin-left: auto;
  font-family: var(--font-mono);
}

/* --- Price History Chart --- */
.price-chart {
  margin-top: 1rem;
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.9rem;
}

.price-chart-title {
  font-family: var(--font-title);
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.7rem;
}

.price-chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 90px;
  padding-bottom: 0;
}

.price-chart-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.price-chart-bar-wrap {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: flex-end;
}

.price-chart-bar {
  width: 100%;
  min-height: 2px;
  background: var(--border-bright);
  border-radius: 2px 2px 0 0;
  cursor: default;
  position: relative;
  transition: background 0.15s;
}

.price-chart-bar:hover { background: var(--text-secondary); }

.price-chart-bar::after {
  content: attr(data-price);
  position: absolute;
  bottom: 105%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-secondary);
  border: 1px solid var(--border-bright);
  color: var(--text-primary);
  font-size: 0.62rem;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.15s;
}

.price-chart-bar:hover::after { opacity: 1; }

.price-chart-col.bar-purchased .price-chart-bar { background: var(--warning); }
.price-chart-col.bar-current   .price-chart-bar { background: var(--accent); box-shadow: 0 0 6px var(--accent-glow); }
.price-chart-col.bar-future    .price-chart-bar { background: var(--bg-secondary); border: 1px dashed var(--border); }

.price-chart-year {
  font-size: 0.55rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1;
}

.price-chart-col.bar-current   .price-chart-year { color: var(--accent); font-weight: bold; }
.price-chart-col.bar-purchased .price-chart-year { color: var(--warning); }

.price-chart-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.5rem;
  padding-top: 0.4rem;
  border-top: 1px solid var(--border);
  font-size: 0.7rem;
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: 0.3rem;
}

.price-chart-gain {
  font-family: var(--font-title);
  font-size: 0.85rem;
}

/* --- Garage card value overlay --- */
.card-gain {
  font-size: 0.7rem;
  margin-top: 0.2rem;
}

.gain-positive { color: var(--success); }
.gain-negative { color: var(--danger); }

/* --- Historical Event Notifications --- */
.notification.boom {
  border-left-color: #ff9800;
  background: rgba(255,152,0,0.08);
}

.notification.crash {
  border-left-color: var(--danger);
  background: rgba(192,57,43,0.1);
  color: #ffaaaa;
}

.notification.boom-full {
  border-left-color: #ff9800;
  background: linear-gradient(90deg, rgba(255,152,0,0.15), var(--bg-secondary));
  max-width: 380px;
  padding: 0.8rem 1.1rem;
}

.notification.crash-full {
  border-left-color: var(--danger);
  background: linear-gradient(90deg, rgba(192,57,43,0.2), var(--bg-secondary));
  max-width: 380px;
  padding: 0.8rem 1.1rem;
}

.notif-title {
  font-family: var(--font-title);
  font-size: 0.85rem;
  margin-bottom: 0.2rem;
}

.notif-body {
  font-size: 0.72rem;
  color: var(--text-secondary);
  line-height: 1.4;
}


/* ===== ERGÄNZENDE STYLES (generierte Spiellogik) ===== */

/* Condition colors */
.cond-excellent { color: #2ecc71; font-weight: 600; }
.cond-great     { color: #27ae60; }
.cond-good      { color: #f39c12; }
.cond-fair      { color: #e67e22; }
.cond-poor      { color: #e74c3c; }

/* Profit/Loss */
.profit-pos { color: #2ecc71; font-weight: 600; }
.profit-neg { color: #e74c3c; font-weight: 600; }

/* Trend labels inline */
.trend-up      { color: #2ecc71; }
.trend-neutral { color: var(--text-muted); }
.trend-down    { color: #e74c3c; }
.trend-label   { font-size: 0.72rem; margin-left: 0.4rem; }
.true-value    { font-size: 0.7rem; color: var(--text-muted); margin-top: 0.2rem; }

/* Card condition line */
.card-condition {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0.25rem 0;
}

/* Badges */
.badge-workshop, .badge-owned, .badge-ok, .badge-locked, .badge-ended {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 3px;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.badge-workshop { background: rgba(243,156,18,0.15); color: #f39c12; border: 1px solid #f39c12; }
.badge-owned    { background: rgba(46,204,113,0.15);  color: #2ecc71; border: 1px solid #2ecc71; }
.badge-ok       { background: rgba(46,204,113,0.12);  color: #27ae60; border: 1px solid #27ae60; }
.badge-locked   { background: rgba(100,100,100,0.15); color: var(--text-muted); border: 1px solid var(--border); }
.badge-ended    { background: rgba(192,57,43,0.15);   color: #e74c3c; border: 1px solid #e74c3c; margin-right: 0.5rem; }

/* Rarity & Faction badges on card */
.rarity-badge, .faction-badge {
  position: absolute;
  font-size: 0.6rem;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-title);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  line-height: 1;
}
.rarity-badge  { top: 0.5rem; left: 0.5rem; background: rgba(0,0,0,0.7); color: #fff; }
.faction-badge { top: 0.5rem; right: 0.5rem; background: rgba(0,0,0,0.7); color: var(--accent); }

/* Sentiment bar items */
.sentiment-item {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.7rem;
  gap: 0.1rem;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
}
.sentiment-item.hot     { color: #e74c3c; border-color: #e74c3c; background: rgba(231,76,60,0.1); }
.sentiment-item.warm    { color: #e8a00a; border-color: #e8a00a; background: rgba(232,160,10,0.1); }
.sentiment-item.neutral { color: var(--text-muted); }
.sentiment-item.cool    { color: #5ba3d9; border-color: #5ba3d9; background: rgba(91,163,217,0.1); }
.sentiment-item.cold    { color: #3498db; border-color: #3498db; background: rgba(52,152,219,0.1); }

/* Workshop items (garage list in workshop) */
.workshop-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
}
.workshop-item-name    { font-family: var(--font-title); font-size: 0.95rem; color: var(--text-primary); margin-bottom: 0.2rem; }
.workshop-item-meta    { font-size: 0.75rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.workshop-item-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* Workshop job card */
.workshop-job {
  background: var(--bg-card);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
}
.job-info { font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.3rem; }
.job-meta { font-size: 0.75rem; color: var(--text-muted); }
.job-info .badge { background: rgba(189,114,0,0.2); color: var(--warning); border: 1px solid var(--warning); margin-left: 0.5rem; }

/* Dealership */
.dealership-stats {
  display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.2rem;
}
.ds-stat {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.6rem 1rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 120px;
}
.ds-stat span   { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ds-stat strong { font-family: var(--font-title); color: var(--text-primary); font-size: 0.95rem; }
.dealership-upgrade-level {
  background: var(--bg-card); border: 1px solid var(--accent); border-radius: var(--radius);
  padding: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin-bottom: 1.2rem; font-size: 0.9rem;
}
.dealership-maxed { text-align: center; color: var(--success); font-family: var(--font-title); padding: 1rem; }

/* Upgrade card desc */
.upgrade-desc { font-size: 0.75rem; color: var(--text-secondary); margin: 0.3rem 0 0.6rem; flex: 1; }

/* Auction items */
.auction-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.2rem; margin-bottom: 0.7rem;
}
.auction-item.auction-ended { opacity: 0.75; border-color: var(--border); }
.auction-vehicle  { font-size: 0.9rem; color: var(--text-primary); margin-bottom: 0.4rem; }
.auction-bids     { font-size: 0.82rem; color: var(--text-secondary); margin-bottom: 0.5rem; }
.auction-meta     { display: flex; align-items: center; gap: 0.7rem; font-size: 0.8rem; flex-wrap: wrap; }
.auction-vehicle-list { display: flex; flex-direction: column; gap: 0.5rem; }
.auction-vehicle-row  {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  background: var(--bg-secondary); border-radius: var(--radius); padding: 0.5rem 0.8rem;
  font-size: 0.85rem; flex-wrap: wrap;
}

/* Modal extras */
.modal-actions { margin-top: 1.2rem; display: flex; gap: 0.7rem; justify-content: flex-end; flex-wrap: wrap; }
.detail-grid   { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 1rem 0; }
@media (max-width: 600px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-image img { width: 100%; border-radius: 8px; object-fit: cover; max-height: 220px; }
.detail-info  { font-size: 0.85rem; }
.stats-table  { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.stats-table td { padding: 0.25rem 0.4rem; border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.stats-table td:first-child { color: var(--text-muted); width: 40%; }
.stats-table td:last-child  { color: var(--text-primary); font-weight: 500; }
.ability-box  {
  margin-top: 0.8rem; background: rgba(189,114,0,0.1); border: 1px solid var(--warning);
  border-radius: var(--radius); padding: 0.6rem 0.8rem; font-size: 0.8rem; line-height: 1.5;
}
.ability-box strong { color: var(--warning); display: block; margin-bottom: 0.2rem; }
.flavor-text  {
  margin-top: 0.8rem; font-style: italic; font-size: 0.75rem;
  color: var(--text-muted); border-left: 2px solid var(--border); padding-left: 0.7rem;
  line-height: 1.5;
}

/* Scenario screen additions */
.btn-continue {
  font-size: 1rem; padding: 0.8rem 1.2rem;
}
.scenario-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.scenario-card-name   { font-family: var(--font-title); font-size: 1.1rem; color: var(--text-primary); }
.scenario-card-desc   { font-size: 0.78rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: 0.6rem; }
.scenario-card-stats  { display: flex; gap: 1rem; font-size: 0.78rem; color: var(--accent); }
.scenario-difficulty  {
  font-size: 0.65rem; padding: 2px 8px; border-radius: 3px;
  font-family: var(--font-title); text-transform: uppercase; letter-spacing: 0.06em;
}
.diff-normal { color: var(--success); border: 1px solid var(--success); }
.diff-schwer { color: var(--warning); border: 1px solid var(--warning); }

/* Notification fade */
.notification.fade-out { opacity: 0; transition: opacity 0.4s; }

/* Btn disabled state */
.btn-disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== SZENARIO-AUSWAHL ===== */

.scenario-section-title {
  font-family: var(--font-title);
  font-size: 1.3rem;
  color: var(--accent);
  text-align: center;
  margin: 2rem 0 1.5rem;
}

.scenario-category {
  margin-bottom: 1.5rem;
}

.scenario-category-title {
  font-family: var(--font-title);
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.2rem;
  padding-left: 0.2rem;
}

.scenario-category-sub {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
  padding-left: 0.2rem;
}

.scenario-category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.8rem;
}

.diff-leicht { color: var(--success); border: 1px solid var(--success); }
.diff-mittel { color: var(--warning); border: 1px solid var(--warning); }
.diff-schwer { color: var(--danger);  border: 1px solid var(--danger); }

/* Endgame: Szenario-Conditions */
.eg-scenario-conditions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.8rem;
}
.eg-cond-item {
  font-size: 0.8rem;
  padding: 0.25rem 0.7rem;
  border-radius: 4px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
}
.eg-cond-item.eg-cond-ok { color: var(--success); border-color: var(--success); }
.eg-cond-item.eg-cond-fail { color: var(--danger); border-color: var(--danger); }
.eg-cond-item.eg-cond-info { color: var(--text-secondary); }

.eg-scenario-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1.5rem;
}

/* Budget-Bar im Car-Picker */
.eg-budget-bar {
  margin-top: 0.8rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.eg-budget-bar.eg-budget-ok span { color: var(--success); }
.eg-budget-bar.eg-budget-over span { color: var(--danger); }
.eg-budget-track {
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  margin-top: 0.3rem;
  overflow: hidden;
}
.eg-budget-fill {
  height: 100%;
  background: var(--success);
  border-radius: 3px;
  transition: width 0.3s;
}
.eg-budget-over .eg-budget-fill { background: var(--danger); }

/* HUD Scenario Label */
.hud-scenario {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  max-width: 200px;
}
.hud-scenario-name {
  font-size: 0.65rem;
  color: var(--success);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-scenario-goals {
  font-size: 0.65rem;
  color: var(--success);
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== ERGÄNZENDE STYLES ===== */

/* Scenario completed */
.scenario-card.scenario-done {
  opacity: 0.5;
}
.scenario-card.scenario-done:hover {
  opacity: 0.75;
}
.scenario-completed {
  color: #4caf50;
  font-size: 1.2rem;
  font-weight: bold;
  flex-shrink: 0;
  margin-right: 0.5rem;
  text-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
}

/* Garage empty slot placeholders */
.garage-slot.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--text-muted);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  min-height: 280px;
}
.gs-slot-icon { font-size: 2rem; opacity: 0.4; }
.gs-slot-label { font-family: var(--font-title); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; }

/* Workshop garage list card tweaks */
#workshop-garage-list .spec-discount-badge {
  display: block;
  margin: 0 0 0.4rem 0;
  width: fit-content;
}
#workshop-garage-list .workshop-item-actions {
  margin-top: 0.3rem;
}
#workshop-garage-list .btn-secondary.btn-small {
  font-size: 0.7rem;
  padding: 0.3rem 0.5rem;
  width: 100%;
  text-align: center;
}

/* Auction Thumbnails */
.auction-thumb { width:80px; height:50px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.auction-vehicle-row-info { display:flex; flex-direction:column; gap:.3rem; flex:1; }
.auction-duration-btns    { display:flex; flex-wrap:wrap; gap:.3rem; }

/* External Auction (Kaufseite) */
.ext-auction-item {
  display:flex; gap:.8rem; align-items:flex-start;
  background:var(--bg-secondary); border:1px solid var(--border);
  border-radius:var(--radius); padding:.8rem; margin-bottom:.5rem; flex-wrap:wrap;
}
.ext-auction-img   { width:100px; height:65px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.ext-auction-info  { flex:1; display:flex; flex-direction:column; gap:.25rem; font-size:.82rem; }
.ext-auction-bid   { display:flex; gap:.4rem; align-items:center; flex-wrap:wrap; margin-top:.3rem; }
.ext-auction-bid input {
  width:120px; padding:.3rem .5rem; background:var(--bg-tertiary);
  border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-primary); font-size:.82rem;
}
.ext-auction-won   { color:var(--success); font-weight:600; }
.ext-auction-ended { opacity:.6; }

/* Auction Tab Panels */
.auction-tab-panel  { }
.auction-tab-panel.hidden { display:none; }
.nav-tab-btn {
  background:transparent; border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-secondary); padding:.3rem .8rem; cursor:pointer; font-size:.8rem;
  transition:all .15s;
}
.nav-tab-btn:hover  { border-color:var(--accent); color:var(--accent); }
.nav-tab-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Auth Overlay */
.auth-overlay {
  position:fixed; inset:0; z-index:1000; background:var(--bg-primary);
  display:flex; align-items:center; justify-content:center;
}
.auth-overlay.hidden { display:none; }
.auth-box {
  background:var(--bg-secondary); border:1px solid var(--border-bright);
  border-radius:var(--radius-lg); padding:2.5rem 2rem; width:100%; max-width:420px;
  display:flex; flex-direction:column; gap:1.2rem;
}
.auth-title {
  font-family:var(--font-title); font-size:2rem; color:var(--accent);
  letter-spacing:.1em; text-align:center; margin:0;
}
.auth-sub {
  text-align:center; color:var(--text-muted); font-size:.8rem;
  letter-spacing:.12em; text-transform:uppercase; margin-top:-.8rem;
}
.auth-field { display:flex; flex-direction:column; gap:.3rem; }
.auth-field label { font-size:.7rem; color:var(--text-muted); text-transform:uppercase; }
.auth-field input {
  padding:.6rem .8rem; background:var(--bg-tertiary);
  border:1px solid var(--border); border-radius:var(--radius);
  color:var(--text-primary); font-size:.9rem; width:100%; box-sizing:border-box;
}
.auth-btn   { width:100%; }
.auth-error { color:var(--danger); font-size:.78rem; }
.auth-error.hidden { display:none; }
.auth-logo { display:block; max-width:220px; margin:0 auto 0.5rem; }
.auth-code-sent { color:var(--success); font-size:.78rem; margin-top:.4rem; }
.auth-code-sent.hidden { display:none; }
.auth-offline { border-top:1px solid var(--border); padding-top:1rem; text-align:center; }
.auth-offline button { background:transparent; border:none; color:var(--text-muted); font-size:.78rem; cursor:pointer; text-decoration:underline; }
.auth-offline button:hover { color:var(--text-secondary); }
.hud-auth   { display:flex; align-items:center; gap:.5rem; }
.hud-user-email { font-size:.68rem; color:var(--text-muted); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ===== ENDGAME / TRAUMGARAGE / HIGHSCORE ===== */

#endgame-overlay {
  position: fixed; inset: 0; z-index: 1100;
  background: var(--bg-primary);
  overflow-y: auto;
  display: flex; justify-content: center;
}
#endgame-overlay.hidden { display: none; }

#endgame-content {
  width: 100%; max-width: 900px;
  padding: 2.5rem 1.5rem 4rem;
  box-sizing: border-box;
}

.eg-intro { text-align: center; margin-bottom: 2rem; }

.eg-year-badge {
  display: inline-block;
  font-family: var(--font-title); font-size: 1rem; letter-spacing: .2em;
  color: var(--accent); border: 1px solid var(--accent);
  padding: .25rem 1rem; border-radius: 999px; margin-bottom: 1rem;
}
.eg-title {
  font-family: var(--font-title); font-size: 2.4rem;
  color: var(--text-primary); margin: 0 0 .5rem;
}
.eg-sub { color: var(--text-secondary); font-size: .9rem; line-height: 1.6; margin: .5rem 0 0; }
.eg-stats-preview { font-size: .85rem; color: var(--text-muted); margin-top: .8rem; }

.eg-section-title {
  font-family: var(--font-title); font-size: 1.1rem; letter-spacing: .08em;
  color: var(--text-secondary); text-transform: uppercase;
  margin: 0 0 1rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}

/* --- Tier-Auswahl --- */
.eg-tier-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem; margin-bottom: 1.5rem;
}
.eg-tier-card {
  background: var(--bg-secondary); border: 1px solid var(--border-bright);
  border-radius: var(--radius-lg); padding: 1.5rem 1.2rem;
  display: flex; flex-direction: column; gap: .6rem;
  transition: border-color .2s;
}
.eg-tier-card:hover { border-color: var(--accent); }
.eg-tier-disabled { opacity: .45; pointer-events: none; }
.eg-tier-name { font-family: var(--font-title); font-size: 1.2rem; color: var(--accent); }
.eg-tier-slots { font-size: .8rem; color: var(--text-muted); letter-spacing: .05em; }
.eg-tier-desc { font-size: .8rem; color: var(--text-secondary); flex: 1; }
.eg-tier-cost { font-size: 1.1rem; font-weight: 700; color: var(--cash-color, #4ade80); }
.eg-cant-afford { color: var(--danger) !important; }
.eg-cant-afford-label { font-size: .75rem; color: var(--danger); }

.eg-skip { text-align: center; margin-top: .5rem; }

/* --- Fahrzeugauswahl --- */
.eg-picker-header { margin-bottom: 1rem; }
.eg-car-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.5rem; }
.eg-car-row {
  display: flex; align-items: center; gap: .8rem;
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .6rem .8rem;
}
.eg-car-row.eg-car-selected { border-color: var(--accent); background: rgba(232,93,4,.08); }
.eg-car-row.eg-car-disabled { opacity: .4; }
.eg-car-thumb {
  width: 80px; height: 52px; object-fit: cover;
  border-radius: var(--radius); flex-shrink: 0;
}
.eg-car-info { flex: 1; }
.eg-car-meta { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; }
.eg-cond-ok  { color: #4ade80; }
.eg-cond-bad { color: var(--danger); }
.eg-picker-footer { text-align: center; }
.eg-preview-actions {
  display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border);
}

/* --- Namenseingabe --- */
.eg-name-form {
  display: flex; flex-direction: column; align-items: center; gap: 1rem;
  max-width: 400px; margin: 2rem auto;
}
.eg-name-input {
  width: 100%; padding: .75rem 1rem; font-size: 1.1rem;
  background: var(--bg-secondary); border: 1px solid var(--border-bright);
  border-radius: var(--radius); color: var(--text-primary); box-sizing: border-box;
  text-align: center;
}
.eg-name-input:focus { outline: none; border-color: var(--accent); }

/* --- Endstatistiken --- */
.eg-stats-page {}

.eg-wealth-banner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: .8rem; margin: 1.5rem 0;
}
.eg-wealth-item {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 1rem 1.2rem; text-align: center;
}
.eg-wealth-total {
  border-color: var(--accent); background: rgba(232,93,4,.06);
}
.eg-wealth-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.eg-wealth-val { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin-top: .2rem; }
.eg-wealth-total .eg-wealth-val { color: var(--accent); font-size: 1.3rem; }

.eg-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem; margin-top: 1.2rem;
}
.eg-stat-block {
  background: var(--bg-secondary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.2rem;
}
.eg-stat-label { font-size: .68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.eg-stat-val { font-size: 1.05rem; font-weight: 600; color: var(--text-primary); margin-top: .15rem; }

.eg-top-row {
  display: flex; align-items: center; gap: .5rem;
  padding: .25rem 0; border-bottom: 1px solid var(--border);
}
.eg-top-row:last-child { border-bottom: none; }
.eg-top-rank { font-size: .7rem; color: var(--accent); font-weight: 700; min-width: 1.2rem; }
.eg-top-name { flex: 1; font-size: .8rem; color: var(--text-secondary); }
.eg-top-count { font-size: .75rem; color: var(--text-muted); }

/* --- Traumgarage Summary --- */
.eg-dream-summary {
  background: var(--bg-secondary); border: 1px solid var(--accent);
  border-radius: var(--radius-lg); padding: 1.2rem 1.5rem; margin-bottom: 1rem;
}
.eg-dream-name { font-family: var(--font-title); font-size: 1.3rem; color: var(--accent); }
.eg-dream-detail { font-size: .8rem; color: var(--text-muted); margin: .25rem 0 .8rem; }
.eg-dream-cars { display: flex; flex-wrap: wrap; gap: .4rem; }
.eg-dream-car {
  background: var(--bg-tertiary); border: 1px solid var(--border);
  border-radius: var(--radius); padding: .2rem .6rem; font-size: .78rem;
  color: var(--text-secondary);
}

/* --- Highscore-Tabelle --- */
.hs-table {
  width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: .5rem;
}
.hs-table th {
  text-align: left; color: var(--text-muted); font-size: .7rem;
  text-transform: uppercase; letter-spacing: .06em;
  padding: .4rem .6rem; border-bottom: 1px solid var(--border-bright);
}
.hs-table td { padding: .45rem .6rem; border-bottom: 1px solid var(--border); }
.hs-table tbody tr:hover { background: var(--bg-secondary); }
.hs-highlight { background: rgba(232,93,4,.12) !important; }
.hs-highlight td { color: var(--accent); }
.hs-wealth { font-weight: 700; color: var(--text-primary); }
.hs-score  { font-weight: 700; color: var(--accent); }
.hs-endyear { color: var(--text-muted); font-size: .78rem; }
.hs-dealer-name { font-size: .72rem; color: var(--text-muted); font-weight: 400; margin-top: .1rem; }
.hs-dream-thumbs { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
.hs-car-thumb {
  width: 44px;
  height: 33px;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--border);
  transition: transform .15s;
}
.hs-car-thumb:hover { transform: scale(1.6); z-index: 10; border-color: var(--accent); }
.hs-thumb-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 33px;
  border-radius: 3px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  font-size: .7rem;
  color: var(--text-muted);
  font-weight: 600;
}
.hs-row { cursor: pointer; }
.hs-row:hover td { background: var(--bg-secondary); }

/* --- Gruppierte Bestenliste --- */
.hs-category { margin-bottom: 1.8rem; }
.hs-cat-title {
  font-family: var(--font-title);
  font-size: 1.15rem;
  color: var(--accent);
  margin: 0 0 .8rem 0;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--accent);
}
.hs-scenario-block { margin-bottom: 1.2rem; }
.hs-scenario-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: .6rem 0 .4rem 0;
}
.hs-scenario-meta {
  font-weight: 400;
  font-size: .75rem;
  color: var(--text-muted);
}

/* --- Score-Banner im Endgame --- */
.eg-score-banner {
  background: linear-gradient(135deg, rgba(232,118,10,.15), rgba(232,118,10,.05));
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.eg-score-main { display: flex; flex-direction: column; gap: .15rem; min-width: 140px; }
.eg-score-label { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; }
.eg-score-val { font-family: var(--font-title); font-size: 2.2rem; color: var(--accent); line-height: 1; }
.eg-score-parts { display: flex; flex-direction: column; gap: .3rem; font-size: .78rem; color: var(--text-secondary); }
.eg-score-parts strong { color: var(--text-primary); }

/* --- HUD-Extra-Buttons --- */
.btn-hud-donate, .btn-hud-hs, .btn-hud-end {
  padding: .25rem .55rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-bright);
  cursor: pointer;
  font-size: .85rem;
  transition: background .15s, border-color .15s;
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.btn-hud-hs:hover  { background: var(--bg-card-hover); border-color: var(--accent); }
.btn-hud-end       { border-color: var(--danger); color: var(--danger); }
.btn-hud-end:hover { background: rgba(192,57,43,.2); }
.btn-hud-donate {
  margin-left: 0.5rem;
  padding: 0.15rem 0.4rem;
  background: transparent;
  border-color: transparent;
}
.btn-hud-donate img {
  height: 22px;
  width: auto;
  display: block;
  opacity: 0.7;
  transition: opacity .15s;
}
.btn-hud-donate:hover {
  background: transparent;
  border-color: transparent;
}
.btn-hud-donate:hover img {
  opacity: 1;
}

/* Donate Modal */
.donate-presets {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.2rem;
}
.donate-preset {
  flex: 1;
  padding: 0.6rem 1rem;
  font-size: 1.05rem;
  font-family: var(--font-title);
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border-bright);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .15s;
}
.donate-preset:hover {
  border-color: var(--accent);
  color: var(--text-primary);
}
.donate-preset.active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  font-weight: 600;
}

/* Donation Reward Modal */
.donation-reward-modal {
  text-align: center;
  padding: 0.5rem 0;
}
.donation-reward-icon {
  font-size: 3rem;
  line-height: 1;
  margin-bottom: 0.3rem;
}
.donation-reward-title {
  font-family: var(--font-title);
  font-size: 1.4rem;
  color: var(--accent);
  margin-bottom: 0.4rem;
}
.donation-reward-text {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.donation-reward-cars {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.reward-card {
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 0.5rem;
  width: 180px;
  text-align: center;
}
.reward-card-img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 0.5rem;
}
.reward-card-name {
  font-family: var(--font-title);
  font-size: 0.95rem;
  color: var(--text-primary);
  line-height: 1.2;
}
.reward-card-rarity {
  font-size: 0.7rem;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: 0.2rem;
}

/* --- Scenario-Screen Buttons --- */
.scenario-main-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: nowrap;
}
.scenario-main-btns .btn-primary {
  flex: 1;
  min-width: 180px;
  max-width: 280px;
  align-self: stretch;
}
.scenario-hs-row {
  margin-top: 0.5rem;
  text-align: center;
}
.btn-hs-scenario {
  font-size: .85rem;
  padding: .5rem 1.2rem;
}

/* --- Modal über Endgame-Overlay --- */
#modal-overlay { z-index: 1200; }

.eg-final-buttons { text-align: center; margin-top: 2.5rem; }

/* =====================================================
   LIGHT THEME = DEFAULT (variables in :root)
   Light-specific component styles below
   ===================================================== */

/* Light (default): Nav setzt sich vom HUD ab */
#main-nav {
  background: #fff;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
[data-theme="dark"] #main-nav {
  background: var(--bg-secondary);
  border-bottom: none;
  box-shadow: none;
}

/* Light (default): Kartenrahmen etwas klarer */
.vehicle-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
.vehicle-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
[data-theme="dark"] .vehicle-card {
  box-shadow: none;
}
[data-theme="dark"] .vehicle-card:hover {
  box-shadow: none;
}

/* Light (default): Unicorn-Karte */
.rarity-unicorn {
  border-color: rgba(200,160,0,.5);
}

/* Light (default): Workshop, Auktionen – ähnliche Karten */
.workshop-slot,
.auction-item,
.upgrade-card,
.dealership-info,
.scenario-card {
  box-shadow: 0 1px 4px rgba(0,0,0,.07);
}
[data-theme="dark"] .workshop-slot,
[data-theme="dark"] .auction-item,
[data-theme="dark"] .upgrade-card,
[data-theme="dark"] .dealership-info,
[data-theme="dark"] .scenario-card {
  box-shadow: none;
}

/* Light (default): Modal-Box */
#modal-box {
  box-shadow: 0 8px 32px rgba(0,0,0,.16);
}

/* Light (default): Scrollbar */
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: var(--border-bright); }

/* Light (default): HUD-Zahlen anpassen (HUD-bg bleibt dunkel) */
.hud-label { color: #ddd; }
.hud-level { background: #2a2a2a; border-color: #3a3a3a; }
.btn-advance-year { border-color: var(--accent-dark); }

/* Light (default): Auth-Box */
.auth-box { background: #fff; border-color: var(--border); }
[data-theme="dark"] .auth-box { background: var(--bg-card); border-color: var(--border); }

/* =====================================================
   SETTINGS BUTTON & MODAL
   ===================================================== */
.btn-hud-settings {
  padding: .25rem .55rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-bright);
  cursor: pointer;
  font-size: .85rem;
  transition: background .15s, border-color .15s, transform .15s;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  line-height: 1;
}
.btn-hud-settings:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--text-primary);
  transform: rotate(30deg);
}

.btn-hud-music {
  padding: .25rem .55rem;
  border-radius: var(--radius);
  border: 1px solid var(--border-bright);
  cursor: pointer;
  font-size: .85rem;
  transition: background .15s, border-color .15s;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  line-height: 1;
}
.btn-hud-music:hover {
  background: var(--bg-card-hover);
  border-color: var(--accent);
  color: var(--text-primary);
}
.btn-hud-music.playing {
  border-color: var(--accent);
  color: var(--accent);
  text-shadow: 0 0 6px var(--accent-glow);
}

/* Settings modal content */
.settings-section-title {
  font-family: var(--font-title);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: .8rem;
}

.settings-theme-picker {
  display: flex;
  gap: 1rem;
}

.settings-theme-btn {
  flex: 1;
  background: var(--bg-card);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: .8rem;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
  text-align: center;
  color: var(--text-primary);
  font-family: var(--font-mono);
  font-size: .82rem;
}
.settings-theme-btn:hover {
  border-color: var(--accent);
}
.settings-theme-btn.settings-theme-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}

/* Mini-Vorschau innerhalb des Buttons */
.settings-theme-preview {
  width: 100%;
  height: 70px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: .6rem;
  border: 1px solid var(--border);
}

.stp-hud {
  height: 14px;
}
.stp-body {
  padding: 5px;
  display: flex;
  gap: 4px;
}
.stp-card {
  flex: 1;
  height: 32px;
  border-radius: 3px;
}

/* Dark-Preview */
.settings-theme-preview-dark          { background: #0d0d0d; }
.settings-theme-preview-dark .stp-hud { background: #0a0a0a; border-bottom: 1px solid #e8760a; }
.settings-theme-preview-dark .stp-card { background: #1a1a1a; border: 1px solid #2a2a2a; }

/* Light-Preview */
.settings-theme-preview-light          { background: #f0f1f3; }
.settings-theme-preview-light .stp-hud { background: #1e1e1e; border-bottom: 1px solid #e8760a; }
.settings-theme-preview-light .stp-card { background: #ffffff; border: 1px solid #d0d2d8; }

.settings-theme-label {
  font-family: var(--font-title);
  font-size: .9rem;
  letter-spacing: .05em;
  color: var(--text-primary);
  margin-bottom: .25rem;
}
.settings-theme-check {
  font-size: .72rem;
  color: var(--accent);
}

/* ===== SPEZIALISIERUNG ===== */
.workshop-specialization {
  margin: 1rem 0 0;
}
.spec-header {
  font-family: var(--font-title);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  margin-bottom: .5rem;
}
.spec-list {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}
.spec-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  padding: .35rem .6rem;
  border-radius: 6px;
}
.spec-row.spec-active {
  background: color-mix(in srgb, var(--success) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 35%, transparent);
}
.spec-row.spec-progress {
  background: color-mix(in srgb, var(--warning) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
}
.spec-icon { font-size: .9rem; flex-shrink: 0; }
.spec-label { flex: 1; color: var(--text-primary); }
.spec-count { color: var(--text-muted); font-size: .75rem; }
.spec-bonus {
  font-family: var(--font-title);
  font-size: .75rem;
  color: var(--success);
  white-space: nowrap;
}
.spec-hint {
  font-size: .75rem;
  color: var(--warning);
  white-space: nowrap;
}
.spec-hint-general {
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
  padding: .4rem 0;
}
.spec-discount-badge {
  display: inline-block;
  margin-left: .5rem;
  font-size: .65rem;
  padding: 1px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--success) 20%, transparent);
  color: var(--success);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
  font-family: var(--font-title);
  vertical-align: middle;
}

/* ===== WERKSTATT-JOB-KARTEN ===== */
.workshop-job-status {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .4rem .5rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
}
.wj-type {
  font-family: var(--font-title);
  font-size: .78rem;
  color: var(--accent);
  letter-spacing: .04em;
}
.wj-countdown {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-primary);
}
.wj-cost {
  font-size: .75rem;
  color: var(--text-muted);
}

/* ===== SHOWROOM ===== */
.dealership-showroom {
  margin: 1.5rem 0;
}
.showroom-heading {
  font-family: var(--font-title);
  font-size: 1.1rem;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.showroom-count {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-weight: 400;
}
.showroom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
}
.showroom-slot.empty {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--text-muted);
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  min-height: 340px;
}
.sr-slot-icon { font-size: 2rem; opacity: 0.4; }
.sr-slot-label { font-family: var(--font-title); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.5; }
.showroom-rep-badge {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.1em 0.45em;
  border-radius: 4px;
  font-weight: 600;
  vertical-align: middle;
  margin-left: 0.3em;
}
.showroom-rep-spec {
  background: var(--accent-dark, #b8860b);
}
.ds-spec-flag {
  font-size: 1.3rem;
  cursor: default;
}
.ds-spec-none {
  font-style: italic;
  opacity: 0.5;
  font-weight: 400;
}
.ds-spec-brand {
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 600;
}
.ds-spec-mult {
  font-size: 0.7rem;
  opacity: 0.6;
  font-weight: 400;
}
.eg-car-source {
  font-size: 0.7rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 0.3rem;
}
.ds-rep-req {
  font-size: 0.75rem;
  margin: 0.3rem 0;
}
.ds-rep-locked {
  color: var(--accent-red, #e74c3c);
}
.ds-rep-ok {
  color: var(--accent-green, #2ecc71);
}

/* ===== CONFIRM DIALOG ===== */
.confirm-dialog {
  text-align: center;
  padding: 1.5rem 1rem;
  max-width: 450px;
  margin: 0 auto;
}
.confirm-msg {
  font-size: 1.1rem;
  margin-bottom: 2.5rem;
  color: var(--text-primary, #fff);
}
.confirm-actions {
  display: flex;
  gap: 50px;
  justify-content: center;
}
.confirm-actions .btn-primary,
.confirm-actions .btn-secondary {
  min-width: 120px;
}

/* ===== DISABLED GREY BUTTON ===== */
.btn-disabled-grey {
  background: #555 !important;
  color: #999 !important;
  cursor: not-allowed !important;
  opacity: 0.7;
}
.btn-disabled-grey:hover {
  background: #555 !important;
  transform: none !important;
}