.pi-leiter { display: grid; grid-template-columns: repeat(3, 1fr) minmax(0, 1fr); gap: 0.75rem; margin: 1rem 0; }
.pi-leiter.ohne-konverter { grid-template-columns: repeat(3, 1fr); }
.pi-stufe { display: block; text-align: left; font: inherit; color: inherit; background: var(--pi-flaeche, transparent); border: 1px solid var(--pi-rand, rgba(127, 127, 127, 0.35)); padding: 0.85rem 1rem; }
button.pi-stufe { cursor: pointer; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
button.pi-stufe:hover { border-color: var(--pi-akzent, #3d6b9c); }
.pi-stufe.ist-aktiv { border-color: var(--pi-akzent, #3d6b9c); box-shadow: inset 0 3px 0 var(--pi-akzent, #3d6b9c); }
.pi-stufe--konverter { border-style: dashed; }
.pi-kopf { margin: 0 0 0.5rem; display: flex; flex-direction: column; gap: 0.1rem; }
.pi-kopf strong { font-size: 0.95rem; }
.pi-stationen { font-size: 0.75rem; opacity: 0.7; }
.pi-basis { margin: 0 0 0.35rem; font-size: 0.8rem; font-weight: 600; color: var(--pi-akzent, #3d6b9c); }
.pi-punkte { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.pi-punkte li { position: relative; padding-left: 1.25rem; font-size: 0.85rem; line-height: 1.35; }
.pi-punkte li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 700; color: var(--pi-akzent, #3d6b9c); }
@media (max-width: 900px) { .pi-leiter { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pi-leiter, .pi-leiter.ohne-konverter { grid-template-columns: 1fr; } }