/* Unterseite „Ardi – Das Werkzeug“ (ardi-werkzeug.html); baut auf ardi.css auf. */
.w-links { margin-left: 0; }
.w-alpha::before { content: "◆"; }

/* Schritte */
.w-schritte { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; counter-reset: none; }
.w-schritte li { position: relative; padding: 26px 22px 24px; border-top: 1px solid var(--l-linie); }
.w-schritte b { display: block; margin-bottom: 14px; font: 300 2.4rem/1 var(--l-serif); color: var(--l-amber); }
.w-schritte h3 { margin: 0 0 10px; font: 400 1.3rem/1.2 var(--l-serif); color: var(--l-weiss); }
.w-schritte p { margin: 0; font: 400 .85rem/1.75 var(--l-mono); color: var(--l-text); }
.w-hinweis { max-width: 70ch; margin-top: 30px; padding-left: 16px; border-left: 1px solid var(--l-amber); }

/* Alphaphase: jetzt / später */
.w-status { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-top: 34px; }
.w-status .l-karte { display: flex; flex-direction: column; align-items: flex-start; }
.w-status ul { list-style: none; margin: 0 0 24px; padding: 0; width: 100%; flex: 1; }
.w-status li { position: relative; padding: 9px 0 9px 24px; border-bottom: 1px solid rgba(245, 201, 122, .1); font: 400 .85rem/1.6 var(--l-mono); color: var(--l-text); }
.w-status li::before { content: "✦"; position: absolute; left: 0; color: var(--l-amber); }
.w-spaeter li::before { content: "○"; opacity: .7; }
.w-status .l-klein { margin: 0; }
.w-jetzt { border-color: rgba(245, 201, 122, .35); }
.w-marke { display: inline-block; margin-bottom: 16px; padding: 5px 12px; border-radius: 999px; font: 400 .68rem/1 var(--l-mono); letter-spacing: .2em; text-transform: uppercase; background: var(--l-amber); color: #060608; }
.w-marke.leise { background: transparent; color: var(--l-amber); border: 1px solid var(--l-linie); }

/* Bildschirmfotos */
.w-bild { position: relative; margin: 34px 0 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--l-linie); background: var(--l-bg2); }
.w-bild img { display: block; width: 100%; height: auto; }
.w-bild figcaption { padding: 14px 18px; font: 400 .78rem/1.6 var(--l-mono); color: var(--l-text); border-top: 1px solid var(--l-linie); }
.w-band { position: absolute; top: 14px; right: 14px; z-index: 1; padding: 6px 12px; border-radius: 999px; font: 400 .66rem/1 var(--l-mono); letter-spacing: .2em; text-transform: uppercase; background: rgba(6, 6, 8, .82); color: var(--l-amber); border: 1px solid rgba(245, 201, 122, .4); }

.w-ende { margin-top: 44px; }

@media (max-width: 720px) {
  .w-schritte li { padding: 22px 4px 20px; }
  .w-band { top: 8px; right: 8px; font-size: .6rem; }
}