/* Projekt 2 – ergänzende Komponenten */
.kit-legend{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:12px 0}.kit-legend>div{border:1px solid var(--line);border-radius:10px;background:#fff;padding:11px}.kit-legend b{display:block;font-size:.78rem}.kit-legend span{display:block;font-size:.7rem;color:var(--muted);margin-top:3px}.kit-swatch{width:24px;height:8px;border-radius:999px;margin-bottom:7px}.kit-swatch.orange{background:var(--orange)}.kit-swatch.blue{background:#4a92bb}.kit-swatch.steel{background:#aab5bb}
.io-map{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin:12px 0}.io-card{border:1px solid var(--line);border-radius:10px;padding:11px;background:var(--surface-2)}.io-card code{display:inline-flex;border-radius:7px;background:#253039;color:#fff;padding:3px 7px;font-weight:800;font-size:.75rem}.io-card b{display:block;margin-top:7px;font-size:.79rem}.io-card span{display:block;font-size:.7rem;color:var(--muted);margin-top:2px}
.loop-compare{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}.loop-panel{border:1px solid var(--line);border-radius:11px;background:#fff;overflow:hidden}.loop-panel h4{margin:0;padding:10px 12px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:.82rem}.loop-panel .loop-body{padding:12px}.loop-panel p{margin:0 0 8px}.loop-panel.good{border-color:#b9dbc9}.loop-panel.good h4{background:var(--green-soft);color:var(--green)}
.process-sequence{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:12px 0}.process-sequence .flow-step{min-width:0}.process-sequence .flow-step b{font-size:.69rem}.process-sequence .flow-step span{font-size:.64rem}
.limit-card{border:1px solid #eed6a3;border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:0 11px 11px 0;padding:12px 14px;margin:12px 0}.limit-card b{display:block;font-size:.78rem;color:#79540d}.limit-card span{display:block;font-size:.76rem;color:#765f34;margin-top:3px}
.output-state{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}.output-state>div{border:1px solid var(--line);border-radius:9px;background:#fff;padding:10px}.output-state b{display:block;font-size:.74rem}.output-state span{display:block;font-size:.68rem;color:var(--muted);margin-top:3px}
.badge-row{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0}.soft-badge{border-radius:999px;padding:4px 8px;background:var(--steel-soft);color:var(--steel);font-size:.68rem;font-weight:800}.soft-badge.orange{background:var(--orange-soft);color:#8a420c}.soft-badge.green{background:var(--green-soft);color:var(--green)}
@media(max-width:1100px){.process-sequence{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.kit-legend,.io-map,.loop-compare,.output-state{grid-template-columns:1fr}.process-sequence{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.process-sequence{grid-template-columns:1fr}}