/* ==========================================================================
   EliteGear App -- Design System
      Display: Inter / Body: Inter / Data: JetBrains Mono
         ========================================================================== */

:root {
  /* Palette matched to elitegear.io's live brand (navy + signature blue) */
  --bg: #070b14;
  --bg-elevated: #0a0e1a;
  --surface: #18181b;
  --surface-2: #1f1f23;
  --surface-3: #27272a;
  --border: #27272a;
  --border-soft: #1b1b1f;

  --text: #e9ecf8;
  --text-dim: #b8bccf;
  --muted: #82889d;
  --faint: #4d5266;

  --accent: #3d8bfc;
  --accent-dim: rgba(61, 139, 252, 0.14);
  --accent-glow: rgba(61, 139, 252, 0.35);
  --accent-text: #070b14;

  --teal: #2dd681;

  /* Der Orangeton des Zeichens. Er kommt mit dem Logo aus www.elitegear.io
     und steht hier ausschliesslich dafuer -- die Knoepfe der App bleiben
     blau. Zwei Signalfarben in einer Oberflaeche sind eine zu viel. */
  --ruf: #ff7a2f;
  --teal-dim: rgba(45, 214, 129, 0.13);

  --danger: #ef4a5f;
  --danger-dim: rgba(239, 74, 95, 0.13);

  --warn: #f5b83d;
  --warn-dim: rgba(245, 184, 61, 0.13);

  --radius-sm: 4px;
  --radius: 6px;
  --radius-lg: 10px;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.02) inset, 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 20px 60px rgba(0, 0, 0, 0.55);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-font-smoothing: antialiased;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family:
    "Inter",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(ellipse 1200px 700px at 20% 0%, black 0%, transparent 70%);
}

a {
  color: inherit;
  text-decoration: none;
}
ul {
  list-style: none;
}
button {
  font-family: inherit;
}
/* Fuer Ueberschriften, die die Seitenstruktur braucht, das Layout aber nicht
   vorsieht -- etwa die h1 der Startseite ueber dem Hero. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

h1,
h2,
h3,
.display {
  font-family: "Inter", sans-serif;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, monospace;
}

.app-shell {
  display: grid;
  grid-template-columns: 248px 1fr;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

.sidebar {
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-soft);
  padding: 22px 14px 18px;
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 26px;
}

/* Das Zeichen. Bis 22.08.2026 stand hier ein blaues Kaestchen mit den
   Buchstaben "EG" -- eine Notloesung, kein Zeichen.

   WORAUS ES KOMMT: vier Staebe, nach rechts hoeher. Von vorn Kuehlerlamellen,
   gelesen ein Balkendiagramm -- Kuehlung und Messwert im selben Bild.

   Es ist dasselbe Zeichen wie auf www.elitegear.io, bis auf den letzten
   Punkt. Ein Zeichen, das je nach Seite anders aussieht, ist keines.

   currentColor statt fester Farbe: das Zeichen erbt die Textfarbe. Auf
   dunklem wie hellem Grund stimmt es damit ohne zweite Fassung. */
.brand-mark {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: var(--text);
  display: block;
}

.brand-name {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}

.brand-name span {
  color: var(--accent);
}

.nav-group-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--faint);
  padding: 14px 12px 6px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease;
  margin-bottom: 1px;
}

.nav-item svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  opacity: 0.85;
}

.nav-item:hover {
  background: var(--surface);
  color: var(--text);
}

.nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.nav-item.active svg {
  opacity: 1;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 12px 4px;
  border-top: 1px solid var(--border-soft);
}

.trust-line {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.76rem;
  color: var(--muted);
  padding: 3px 0;
}

.trust-line .dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal);
  flex-shrink: 0;
}

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  padding: 14px 32px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  align-items: center;
  gap: 18px;
  background: rgba(10, 11, 15, 0.75);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 5;
}

.search-input {
  flex: 1;
  max-width: 440px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 9px 14px 9px 38px;
  color: var(--text);
  font-size: 0.88rem;
  position: relative;
}

.search-wrap {
  position: relative;
  flex: 1;
  max-width: 440px;
}
.search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  color: var(--faint);
}

.topbar-actions {
  display: flex;
  gap: 10px;
  margin-left: auto;
  align-items: center;
}

.content {
  padding: 32px 36px 64px;
  flex: 1;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-size: 0.87rem;
  transition:
    transform 0.1s ease,
    box-shadow 0.15s ease,
    background 0.15s ease;
}
.btn:hover {
  background: #5c9dfd;
  box-shadow: 0 4px 18px var(--accent-glow);
}
.btn:active {
  transform: translateY(1px);
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text);
}
.btn-outline:hover {
  background: var(--surface);
  box-shadow: none;
  border-color: var(--faint);
}

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
}
.btn-ghost:hover {
  color: var(--text);
  background: var(--surface);
  box-shadow: none;
}

.btn-sm {
  padding: 6px 13px;
  font-size: 0.8rem;
}
.btn-block {
  width: 100%;
}
.btn-danger {
  background: var(--danger);
  color: #fff;
}
.btn-danger:hover {
  background: #ff5f72;
  box-shadow: 0 4px 18px rgba(239, 74, 95, 0.35);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow-card);
}

.card-title {
  font-weight: 600;
  font-size: 0.98rem;
  margin-bottom: 3px;
}
.card-meta {
  font-size: 0.83rem;
  color: var(--muted);
}

.section-title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 13px;
}

.page-title {
  font-size: 1.55rem;
  margin-bottom: 5px;
  /* Explizit, weil .page-title jetzt auf <h1> sitzt und dessen Default 700 waere. */
  font-weight: 400;
}
.page-sub {
  color: var(--muted);
  margin-bottom: 26px;
  font-size: 0.95rem;
}

.breadcrumb {
  font-size: 0.83rem;
  color: var(--muted);
  margin-bottom: 18px;
}
.breadcrumb .sep {
  margin: 0 6px;
  color: var(--faint);
}
.breadcrumb .current {
  color: var(--text-dim);
}
.breadcrumb a:hover {
  color: var(--accent);
}

.tag {
  display: inline-flex;
  align-items: center;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 5px;
  margin-right: 5px;
  margin-top: 6px;
}
.tag.pos {
  background: var(--teal-dim);
  color: var(--teal);
}
.tag.neg {
  background: var(--danger-dim);
  color: var(--danger);
}
.tag.official {
  background: var(--accent-dim);
  color: var(--accent);
  font-weight: 600;
}

.score-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 30px;
  padding: 0 8px;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
}
.score-badge.high {
  background: var(--teal-dim);
  color: var(--teal);
}
.score-badge.mid {
  background: var(--warn-dim);
  color: var(--warn);
}
.score-badge.low {
  background: var(--danger-dim);
  color: var(--danger);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0d1b33 0%, #0a1220 55%, #0a0e1a 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 36px 38px;
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}

.hero::after {
  content: "";
  position: absolute;
  top: -60%;
  right: -10%;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, var(--accent-glow) 0%, transparent 68%);
  opacity: 0.5;
  pointer-events: none;
}

.hero-eyebrow {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  font-weight: 700;
  margin-bottom: 10px;
}

.hero h2 {
  font-size: 1.7rem;
  margin-bottom: 8px;
  max-width: 480px;
}
.hero p {
  color: var(--text-dim);
  margin-bottom: 18px;
  font-size: 0.95rem;
}

.hero-actions {
  display: flex;
  gap: 10px;
}

.hero-visual {
  position: relative;
  width: 200px;
  height: 140px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background:
    repeating-linear-gradient(45deg, rgba(61, 139, 252, 0.07) 0 2px, transparent 2px 14px), #0a1120;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 0.78rem;
  flex-shrink: 0;
}

.trust-bar {
  display: flex;
  gap: 26px;
  margin-bottom: 30px;
  flex-wrap: wrap;
  font-size: 0.83rem;
  color: var(--muted);
}
.trust-bar span {
  display: flex;
  align-items: center;
  gap: 7px;
}
.trust-bar svg {
  width: 14px;
  height: 14px;
  color: var(--teal);
}

.tile {
  text-align: left;
  cursor: pointer;
  transition:
    border-color 0.15s ease,
    transform 0.15s ease;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.tile:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.tile-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--accent-dim);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tile-icon svg {
  width: 19px;
  height: 19px;
}

.review-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 9px;
  transition: border-color 0.15s ease;
}
.review-row:hover {
  border-color: var(--faint);
}

.thumb {
  width: 64px;
  height: 64px;
  background: var(--surface-2);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 0.68rem;
  font-family: "JetBrains Mono", monospace;
}
/* Als <img> ist .thumb kein Flex-Container -- eigene Regeln, damit das
   quadratische SVG die Kachel exakt fuellt. */
img.thumb {
  display: block;
  object-fit: contain;
  background: transparent;
  flex: none;
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 7px 15px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.83rem;
  cursor: pointer;
  transition: all 0.14s ease;
}
.filter-chip:hover {
  border-color: var(--faint);
  color: var(--text);
}
.filter-chip.active {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

.builder-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px;
  align-items: start;
}

.compat-banner {
  padding: 13px 16px;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 500;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.compat-banner.ok {
  background: var(--teal-dim);
  color: var(--teal);
  border: 1px solid rgba(45, 212, 191, 0.25);
}
.compat-banner.warn {
  background: var(--warn-dim);
  color: var(--warn);
  border: 1px solid rgba(245, 184, 61, 0.25);
}
.compat-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.88rem;
}
.spec-row:last-child {
  border-bottom: 0;
}
.spec-row .part-name {
  font-family: "JetBrains Mono", monospace;
  color: var(--text);
  text-align: right;
}

.review-text {
  color: var(--text-dim);
  line-height: 1.65;
  font-size: 0.95rem;
}

.sidebar-home {
  display: block;
  margin-top: 10px;
  font-size: 0.74rem;
  color: var(--muted);
}
.sidebar-home:hover {
  color: var(--accent);
}

/* Impressum und Datenschutz liegen auf der Hauptdomain -- hier steht nur der
   Verweis. Eine Quelle statt zwei Fassungen, die auseinanderlaufen. */
.sidebar-recht {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--muted);
}

.sidebar-recht a {
  color: inherit;
}

.sidebar-recht a:hover,
.sidebar-recht a:focus-visible {
  color: var(--accent);
}

.compat-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.psu-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 20px;
  align-items: start;
}
.psu-panel {
  padding: 18px 20px;
  margin-bottom: 16px;
}
.psu-select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  padding: 10px 12px;
}
.psu-steppers {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.psu-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.psu-stepper-label {
  font-size: 0.88rem;
  color: var(--text-dim);
}
.psu-stepper-ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
}
.psu-stepper-ctrl button {
  width: 30px;
  height: 30px;
  font: inherit;
  font-size: 1rem;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  cursor: pointer;
}
.psu-stepper-ctrl button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.psu-stepper-ctrl span {
  min-width: 28px;
  text-align: center;
  font-family: "JetBrains Mono", monospace;
}
.psu-check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.88rem;
  color: var(--text-dim);
  cursor: pointer;
}
.psu-field {
  margin-top: 14px;
  font-size: 0.85rem;
  color: var(--text-dim);
}
.psu-field input[type="range"] {
  width: 100%;
  margin-top: 8px;
  accent-color: var(--accent);
}
.psu-watts {
  font-family: "JetBrains Mono", monospace;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}
.psu-watts span {
  font-size: 1.1rem;
  color: var(--faint);
  margin-left: 4px;
}
.psu-gauge {
  margin: 16px 0 6px;
}
.psu-gauge-track {
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
  overflow: hidden;
}
.psu-gauge-fill {
  height: 100%;
  width: 0;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--teal), var(--accent));
  transition: width 0.2s ease;
}
.psu-gauge-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--faint);
  margin-top: 5px;
}
.psu-rec {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--accent-dim);
  border: 1px solid rgba(61, 139, 252, 0.3);
  border-radius: var(--radius-sm);
}
.psu-rec-num {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--accent);
}
.psu-rec-sub {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 3px;
}
.psu-breakdown {
  margin-top: 16px;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
.psu-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  padding: 4px 0;
  color: var(--text-dim);
}
.psu-row span:last-child {
  font-family: "JetBrains Mono", monospace;
  color: var(--text);
}
.psu-note {
  margin-top: 14px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 980px) {
  .psu-layout {
    grid-template-columns: 1fr;
  }
}

.trends-note {
  padding: 14px 18px;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.6;
}
.trend-card {
  padding: 18px 20px;
}
.trend-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}
.trend-spark {
  width: 96px;
  height: 28px;
  flex: none;
  color: var(--accent);
  opacity: 0.85;
}
.trend-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 12px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.trend-unit {
  font-family: "Inter", sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.trend-flat {
  font-size: 0.78rem;
  color: var(--faint);
}
.trend-delta {
  font-size: 0.82rem;
  font-weight: 600;
}
.trend-delta.down {
  color: var(--teal);
}
.trend-delta.up {
  color: var(--warn);
}
.trend-rows {
  margin-top: 14px;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}
.trend-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  padding: 4px 0;
  color: var(--text-dim);
}
.trend-row span:last-child {
  font-family: "JetBrains Mono", monospace;
  color: var(--text);
}

.seed-note {
  grid-column: 1/-1;
  background: var(--warn-dim);
  border: 1px solid rgba(245, 184, 61, 0.28);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--warn);
  margin-bottom: 14px;
}
.market-icon {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 5px;
}
.trend-icon {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 7px;
}
.trend-head-text {
  flex: 1;
  min-width: 0;
}

.market-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
.market-top .card-meta {
  flex: 1;
  min-width: 0;
}
.market-spark {
  width: 68px;
  height: 22px;
  flex: none;
  color: var(--accent);
  opacity: 0.8;
}

.market-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.market-link {
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.market-card {
  padding: 16px 18px;
}
.market-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--text);
  margin: 6px 0 2px;
}
.market-range {
  font-size: 0.82rem;
  color: var(--text-dim);
}
.market-count {
  font-size: 0.74rem;
  color: var(--faint);
  margin-top: 8px;
}

.nav-extern {
  margin-left: auto;
  color: var(--faint);
  font-size: 0.8em;
}

.tile-extern {
  color: var(--faint);
  font-size: 0.85em;
  margin-left: 3px;
}

.load-error {
  background: var(--danger-dim);
  border: 1px solid rgba(239, 74, 95, 0.28);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-align: center;
}
.load-error-title {
  color: var(--danger);
  font-weight: 600;
  margin-bottom: 4px;
}
.load-error-text {
  color: var(--muted);
  font-size: 0.88rem;
  margin-bottom: 14px;
}

.compat-banner.multi {
  align-items: flex-start;
}
.compat-banner .compat-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 17px;
  background: var(--surface);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  margin-bottom: 10px;
  transition: border-color 0.15s ease;
  cursor: pointer;
}
.slot:hover {
  border-color: var(--accent);
}
.slot.filled {
  border-style: solid;
  border-color: var(--border);
}
.slot.filled:hover {
  border-color: var(--accent);
}

.slot-group-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  font-weight: 600;
  margin: 18px 0 8px;
}
.summary-review {
  font-size: 0.72rem;
  color: var(--accent);
  margin-left: 6px;
  white-space: nowrap;
}
.modal-option-price .score-badge {
  min-width: 34px;
  height: 22px;
  font-size: 0.78rem;
  margin-right: 8px;
}

.slot-label {
  font-size: 0.7rem;
  color: var(--faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
  font-weight: 600;
}
.slot-empty-cta {
  color: var(--muted);
  font-size: 0.9rem;
}
.slot-price {
  font-family: "JetBrains Mono", monospace;
  font-size: 0.92rem;
}
.slot-change {
  font-size: 0.78rem;
  color: var(--accent);
  margin-top: 2px;
}

.summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  position: sticky;
  top: 84px;
}

.summary-price {
  font-family: "Inter", sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  margin: 6px 0 3px;
}

.summary-note {
  font-size: 0.78rem;
  color: var(--faint);
  margin-bottom: 16px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.88rem;
  color: var(--text-dim);
}
.summary-row span:last-child {
  font-family: "JetBrains Mono", monospace;
  color: var(--text);
}
.summary-row.total {
  border-bottom: none;
  font-weight: 700;
  font-size: 1.1rem;
  padding-top: 13px;
  color: var(--text);
}
.summary-row.total span:last-child {
  font-family: "Inter", sans-serif;
  color: var(--accent);
}

.perf-hud {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.perf-hud-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--faint);
  margin-bottom: 8px;
  font-weight: 600;
}
.perf-hud-value {
  font-family: "JetBrains Mono", monospace;
  font-size: 1.2rem;
  color: var(--teal);
  font-weight: 600;
}
.perf-bar-track {
  height: 5px;
  background: var(--surface-2);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}
.perf-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal), var(--accent));
  border-radius: 3px;
}
.perf-hud-note {
  margin-top: 10px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--muted);
}
.perf-hud-note a {
  color: var(--accent);
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.compare-slot {
  background: var(--surface);
  border: 2px dashed var(--border);
  border-radius: var(--radius);
  height: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9rem;
  cursor: pointer;
  gap: 8px;
  transition: border-color 0.15s ease;
}
.compare-slot:hover {
  border-color: var(--accent);
  color: var(--text);
}
.compare-slot .plus {
  font-size: 1.7rem;
  color: var(--accent);
  font-weight: 300;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 30px;
}
.avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), #1e5fd6);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Inter", sans-serif;
  font-weight: 700;
  color: #070b14;
  font-size: 1.3rem;
}

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 4px;
  border-bottom: 1px solid var(--border-soft);
}
.settings-row:last-child {
  border-bottom: none;
}
.settings-row .val {
  color: var(--muted);
  font-size: 0.88rem;
}
.settings-row .val.on {
  color: var(--teal);
  font-weight: 600;
}

.toggle {
  width: 38px;
  height: 21px;
  border-radius: 12px;
  background: var(--surface-3);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle.on {
  background: var(--teal-dim);
}
.toggle .knob {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--faint);
  position: absolute;
  top: 2.5px;
  left: 3px;
  transition:
    transform 0.15s ease,
    background 0.15s ease;
}
.toggle.on .knob {
  background: var(--teal);
  transform: translateX(17px);
}

.build-detail-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 28px;
  align-items: start;
}

.build-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 26px;
}
.build-header h1 {
  font-size: 1.65rem;
  margin-bottom: 8px;
}
.build-meta {
  color: var(--muted);
  font-size: 0.92rem;
  margin-bottom: 12px;
}

.section-block {
  margin-bottom: 30px;
}

.part-row {
  display: grid;
  grid-template-columns: 110px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 13px 4px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.9rem;
}
.part-row:last-child {
  border-bottom: none;
}
.part-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--faint);
  font-weight: 600;
}
.part-price {
  font-family: "JetBrains Mono", monospace;
}
.part-link {
  color: var(--accent);
  font-size: 0.82rem;
  white-space: nowrap;
}

.perf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.perf-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
}
.perf-value {
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--teal);
}
.perf-label {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 4px;
  line-height: 1.4;
}

.why-list {
  padding-left: 0;
}
.why-list li {
  list-style: none;
  padding: 9px 0 9px 26px;
  position: relative;
  font-size: 0.92rem;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border-soft);
}
.why-list li:last-child {
  border-bottom: none;
}
.why-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 16px;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 2px;
  transform: rotate(45deg);
}

.alt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.alt-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 15px;
  font-size: 0.88rem;
}
.alt-card strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.92rem;
}

.compat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-dim);
  color: var(--teal);
  padding: 7px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  font-weight: 600;
  margin: 14px 0;
}

.comment-form {
  display: flex;
  gap: 12px;
  margin-bottom: 22px;
}
.comment-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 600;
  flex-shrink: 0;
}
.comment-input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.88rem;
  min-height: 44px;
  resize: none;
}
.comment {
  display: flex;
  gap: 12px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-soft);
}
.comment:last-child {
  border-bottom: none;
}
.comment-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 4px;
}
.comment-author {
  font-weight: 600;
  font-size: 0.88rem;
}
.comment-date {
  font-size: 0.78rem;
  color: var(--faint);
}
.comment-text {
  font-size: 0.89rem;
  color: var(--text-dim);
  line-height: 1.55;
  margin-bottom: 8px;
}
.comment-actions {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  color: var(--muted);
}
.comment-actions span {
  cursor: pointer;
}
.comment-actions span:hover {
  color: var(--accent);
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 7, 10, 0.72);
  backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh 20px;
  z-index: 100;
}
.modal-overlay.open {
  display: flex;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  box-shadow: var(--shadow-pop);
  max-height: 78vh;
  display: flex;
  flex-direction: column;
}
.modal-head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-head h3 {
  font-size: 1.05rem;
}
.modal-close {
  cursor: pointer;
  color: var(--muted);
  font-size: 1.2rem;
  line-height: 1;
}
.modal-close:hover {
  color: var(--text);
}
.modal-body {
  padding: 10px 14px;
  overflow-y: auto;
}
.modal-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.modal-option:hover {
  background: var(--surface-2);
}
.modal-option-name {
  font-weight: 500;
  font-size: 0.92rem;
}
.modal-option-meta {
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 2px;
}
.modal-option-price {
  font-family: "JetBrains Mono", monospace;
  color: var(--accent);
  font-weight: 600;
}

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--surface-3);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 11px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.87rem;
  box-shadow: var(--shadow-pop);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.toast svg {
  width: 15px;
  height: 15px;
  color: var(--teal);
}

/* Schalter und Abdunklung existieren nur auf schmalen Viewports -- siehe
   js/nav.js, das beides in die Seite haengt. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.nav-toggle svg {
  width: 18px;
  height: 18px;
}
.nav-scrim {
  display: none;
}

/* Klickbare Flaechen sind <button>, damit sie per Tastatur erreichbar sind.
   Die Browser-Defaults muessen dafuer zurueckgenommen werden. */
.slot,
.compare-slot,
.filter-chip,
.modal-option,
.modal-close,
.comment-delete,
.link-btn {
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.slot,
.compare-slot,
.modal-option {
  width: 100%;
  text-align: left;
  color: inherit;
}
/* .slot, .compare-slot und .filter-chip bringen eigene background- und
   border-Werte mit; .modal-option nicht -- als <button> schlaegt sonst die
   graue Standardflaeche des Browsers durch und der helle Text wird
   unlesbar. Neue Button-Flaechen brauchen denselben Reset. */
.modal-option {
  background: transparent;
  border: 0;
}
.slot > span,
.modal-option > span,
.slot-label,
.slot-name,
.slot-empty-cta,
.slot-price,
.slot-change,
.modal-option-name,
.modal-option-meta,
.modal-option-price {
  display: block;
}
.modal-close,
.comment-delete,
.link-btn {
  background: none;
  border: 0;
  padding: 0;
}
.comment-delete {
  color: var(--danger);
}
.link-btn {
  color: var(--accent);
  font-weight: 600;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .nav-toggle {
    display: inline-flex;
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 252px;
    height: auto;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    z-index: 60;
  }
  body.nav-open .sidebar {
    transform: none;
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 50;
  }
  .nav-scrim[hidden] {
    display: none;
  }
  body.nav-open {
    overflow: hidden;
  }

  .builder-layout,
  .build-detail-layout {
    grid-template-columns: 1fr;
  }
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }
  .compare-grid,
  .perf-grid,
  .alt-grid {
    grid-template-columns: 1fr;
  }
  .content {
    padding: 22px 18px 48px;
  }

  /* Ueberlauf: die Topbar darf umbrechen, das Hero-Bild entfaellt. */
  .topbar {
    flex-wrap: wrap;
    padding: 12px 18px;
    gap: 10px;
  }
  .search-wrap,
  .search-input {
    max-width: none;
  }
  .hero {
    padding: 26px 22px;
  }
  .hero-visual {
    display: none;
  }
}

@media (max-width: 640px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .search-wrap {
    order: 3;
    flex-basis: 100%;
  }
  /* Das input traegt sonst seine Default-Breite von ~20 Zeichen und fuellt
     die eigene Zeile nicht aus. */
  .search-wrap .search-input {
    width: 100%;
  }
  .topbar-actions {
    margin-left: 0;
    flex-wrap: wrap;
  }
  .hero h2 {
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}