/* Kleine Grundstile nur für die Pinout-Seite (statt Tailwind-Preflight, damit das gemeinsame style.css unberührt bleibt) */
body.pinout-seite { background: #070b14; margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
:where(.pinout-app), :where(.pinout-app) *, :where(.pinout-app) ::before, :where(.pinout-app) ::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb; font-family: 'Inter', 'Segoe UI', sans-serif; }
.pinout-app { flex: 1; min-height: 0; display: flex; color: #f8fafc; font-size: 0.875rem; line-height: 1.25rem; background: #070b14; }
:where(.pinout-app) .font-mono, :where(.pinout-app) .badge, :where(.pinout-app) .board-Silkscreen, :where(.pinout-app) .header-gap, :where(.pinout-app) pre { font-family: 'JetBrains Mono', Consolas, monospace; }
:where(.pinout-app) button { background: transparent; color: inherit; cursor: pointer; padding: 0; font-size: 100%; line-height: inherit; }
:where(.pinout-app) :is(h2, h3, h4, p, pre) { margin: 0; font-size: inherit; font-weight: inherit; }
:where(.pinout-app) table { border-collapse: collapse; text-indent: 0; border-color: inherit; }
:where(.pinout-app) svg { display: inline-block; vertical-align: middle; }
:where(.pinout-app) ul { list-style: none; margin: 0; padding: 0; }

/* Seitenleiste */
.seite-links { flex: 0 0 250px; width: 250px; background: #0b1120; border-right: 1px solid #1e293b; overflow-y: auto; padding: 14px 12px 20px; display: flex; flex-direction: column; gap: 6px; }
.schritt { display: flex; align-items: center; gap: 8px; margin: 12px 2px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #94a3b8; }
.schritt:first-child { margin-top: 0; }
.schritt .nr { width: 20px; height: 20px; border-radius: 50%; background: #1e293b; color: #e2e8f0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
#familien { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.fam-btn { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 12px; border: 1px solid #334155; border-radius: 8px; background: rgba(30,41,59,.55); text-align: left; transition: all .18s ease; }
.fam-btn:hover { border-color: #64748b; background: rgba(51,65,85,.65); }
.fam-btn.active { border-color: var(--akzent); background: linear-gradient(135deg, var(--akzent-glow), rgba(15,23,42,.95)); box-shadow: 0 0 14px var(--akzent-glow); }
.fam-name { font-weight: 800; font-size: 15px; color: #fff; }
.fam-unter { font-size: 10px; color: #94a3b8; }
#modelle { display: flex; flex-direction: column; gap: 6px; }
.board-tab { align-items: flex-start; text-align: left; }
#filters { display: flex; flex-direction: column; gap: 4px; }
#filters .filter-btn { width: 100%; justify-content: flex-start; font-size: 12px; padding: 6px 10px; }
.opt-on { background: var(--akzent-dunkel); color: #fff; }
.opt-btn { padding: 2px 8px; border-radius: 4px; font-weight: 600; font-size: 11px; color: #94a3b8; }
.opt-btn:hover { color: #fff; }
.opt-btn.opt-on { color: #fff; }

@media (max-width: 1000px) {
  body.pinout-seite { height: auto; min-height: 100vh; overflow: auto; }
  .pinout-app { flex-direction: column; }
  .seite-links { flex: none; width: 100%; border-right: 0; border-bottom: 1px solid #1e293b; max-height: none; }
  #modelle, #filters { flex-direction: row; flex-wrap: wrap; }
  #filters .filter-btn { width: auto; }
  .pinout-app aside.detail { width: 100% !important; }
}

#board-viewport { align-items: safe center; }