/* TB Workstation Konfigurator - Styling. Theme-Tokens mit Fallbacks, dunkler Tech-Look. */
.tbws {
  --tbws-bg: var(--tb-surface, #0f1115);
  --tbws-card: var(--tb-surface-2, #171a21);
  --tbws-line: var(--tb-border, #2a2f3a);
  --tbws-text: var(--tb-text, #e8eaee);
  --tbws-muted: var(--tb-text-muted, #9aa2b1);
  --tbws-accent: var(--tb-accent, #4f8cff);
  --tbws-accent-2: var(--tb-accent-2, #7c5cff);
  color: var(--tbws-text);
  display: block;
  max-width: 1040px;
  margin: 0 auto;
}
.tbws *, .tbws *::before, .tbws *::after { box-sizing: border-box; }

.tbws__intro { margin-bottom: 1.5rem; }
.tbws__h { margin: 0 0 .35rem; font-size: clamp(1.4rem, 3vw, 2rem); }
.tbws__lead { margin: 0; color: var(--tbws-muted); max-width: 62ch; }
.tbws__empty { color: var(--tbws-muted); padding: 2rem 0; }

/* LenaX-Illustrationsband */
.tbws__lenax-band {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.4rem; align-items: center;
  background: linear-gradient(135deg, color-mix(in srgb, var(--tbws-accent) 12%, var(--tbws-card)), var(--tbws-card));
  border: 1px solid var(--tbws-line); border-radius: 16px; padding: 1.2rem; margin: 0 0 1.8rem;
}
.tbws__lenax-media { border-radius: 12px; overflow: hidden; background: #05070c; }
.tbws__lenax-media img { display: block; width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/10; }
.tbws__lenax-logo { width: 120px; height: auto; margin-bottom: .5rem; background: #fff; border-radius: 10px; padding: 8px 12px; }
.tbws__lenax-h { margin: .2rem 0 .5rem; font-size: 1.2rem; }
.tbws__lenax-text p { margin: 0; color: var(--tbws-muted); }
@media (max-width: 620px) {
  .tbws__lenax-band { grid-template-columns: 1fr; }
}

.tbws__step { margin: 1.6rem 0; }
.tbws__step-title { display: flex; align-items: center; gap: .6rem; font-size: 1.05rem; margin: 0 0 .8rem; }
.tbws__num {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  background: var(--tbws-accent); color: #fff; font-size: .85rem; font-weight: 700; flex: none;
}

/* Modelle */
.tbws__models { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; }
.tbws__model {
  text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: .35rem;
  background: var(--tbws-card); border: 1px solid var(--tbws-line); border-radius: 14px;
  padding: 1rem; color: inherit; transition: border-color .15s, transform .15s, box-shadow .15s;
}
.tbws__model:hover { transform: translateY(-2px); border-color: var(--tbws-accent); }
.tbws__model.is-sel { border-color: var(--tbws-accent); box-shadow: 0 0 0 2px var(--tbws-accent) inset; }
.tbws__model-img { display: block; aspect-ratio: 1/1; background: #0a0c10; border-radius: 10px; overflow: hidden; margin-bottom: .4rem; }
.tbws__model-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tbws__model-gpu { font-weight: 700; font-size: 1.05rem; }
.tbws__model-title { color: var(--tbws-muted); font-size: .85rem; line-height: 1.3; }
.tbws__model-from { margin-top: .25rem; font-weight: 600; color: var(--tbws-accent); }

/* Optionen */
.tbws__opt-group { margin-bottom: 1rem; }
.tbws__opt-label { font-weight: 600; margin-bottom: .5rem; }
.tbws__opts { display: flex; flex-wrap: wrap; gap: .6rem; }
.tbws__opt {
  cursor: pointer; display: flex; flex-direction: column; align-items: flex-start; gap: .1rem;
  background: var(--tbws-card); border: 1px solid var(--tbws-line); border-radius: 10px;
  padding: .55rem .85rem; color: inherit; transition: border-color .15s, background .15s;
}
.tbws__opt:hover { border-color: var(--tbws-accent); }
.tbws__opt.is-sel { border-color: var(--tbws-accent); background: color-mix(in srgb, var(--tbws-accent) 14%, transparent); }
.tbws__opt-main { font-weight: 600; }
.tbws__opt-tag { font-size: .72rem; color: var(--tbws-accent); }

/* Zusammenfassung */
.tbws__summary {
  display: grid; grid-template-columns: 130px 1fr; gap: 1.1rem; align-items: start;
  background: linear-gradient(180deg, var(--tbws-card), var(--tbws-bg));
  border: 1px solid var(--tbws-line); border-radius: 16px; padding: 1.2rem; margin-top: 1.5rem;
}
.tbws__sum-img { aspect-ratio: 1/1; background: #0a0c10; border-radius: 10px; overflow: hidden; }
.tbws__sum-img img { width: 100%; height: 100%; object-fit: contain; }
.tbws__sum-title { font-weight: 700; font-size: 1.1rem; margin-bottom: .6rem; }
.tbws__specs { list-style: none; margin: 0 0 .8rem; padding: 0; }
.tbws__specs li { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px dashed var(--tbws-line); color: var(--tbws-muted); }
.tbws__specs li span:last-child { color: var(--tbws-text); font-weight: 600; text-align: right; }
.tbws__incl { list-style: none; margin: 0 0 .8rem; padding: 0; }
.tbws__incl li { position: relative; padding-left: 1.4rem; color: var(--tbws-muted); font-size: .88rem; margin: .25rem 0; }
.tbws__incl li::before { content: "\2713"; position: absolute; left: 0; color: var(--tbws-accent); font-weight: 700; }
.tbws__total { display: flex; justify-content: space-between; align-items: baseline; margin: .3rem 0 1rem; font-size: 1.15rem; }
.tbws__total strong { font-size: 1.5rem; color: var(--tbws-accent); }
.tbws__cta {
  display: inline-block; cursor: pointer; border: 0; border-radius: 10px; padding: .8rem 1.4rem;
  font-weight: 700; font-size: 1rem; color: #fff;
  background: linear-gradient(135deg, var(--tbws-accent), var(--tbws-accent-2));
}
.tbws__cta:hover { filter: brightness(1.08); }
.tbws__disclaim { margin: .7rem 0 0; font-size: .78rem; color: var(--tbws-muted); }

@media (max-width: 560px) {
  .tbws__summary { grid-template-columns: 1fr; }
  .tbws__sum-img { max-width: 160px; }
}