/* Anleitungen (/anleitungen) - baut auf seite.css auf.
   Die Schritte stehen als Pfad: eine senkrechte Linie, auf der die
   Nummern sitzen. Man sieht auf einen Blick, wie weit es noch ist. */

.anl-inhalt { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 8px 0 56px; }
.anl-karte { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--rand); border-radius: var(--r-l);
  background: var(--karte); color: var(--text); text-decoration: none; transition: border-color .15s, transform .15s; }
.anl-karte:hover { border-color: var(--lila); transform: translateY(-2px); }
.anl-karte span:last-child { display: grid; gap: 2px; }
.anl-karte small { color: var(--text-2); font-size: 14px; line-height: 1.45; }

.anl-sym { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--lila-flaeche); color: var(--lila-hell); }
.anl-sym svg { width: 22px; height: 22px; fill: currentColor; }

.anl { scroll-margin-top: 90px; margin: 0 0 28px; padding: 28px 30px; border: 1px solid var(--rand); border-radius: var(--r-xl); background: var(--karte); }
.anl-kopf { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.anl-kopf h2 { margin: 0 0 4px; font-size: 26px; line-height: 1.2; }
.anl-kopf p { margin: 0; color: var(--text-2); }

.anl-schritte { list-style: none; counter-reset: schritt; margin: 0; padding: 0 0 0 4px; }
.anl-schritte li { counter-increment: schritt; position: relative; padding: 0 0 22px 56px; }
.anl-schritte li::before { content: counter(schritt); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 800; color: #fff; background: var(--lila); box-shadow: 0 0 0 5px var(--karte); z-index: 1; }
/* Die Linie zwischen den Nummern - nach dem letzten Schritt ist der Weg zu Ende */
.anl-schritte li:not(:last-child)::after { content: ''; position: absolute; left: 17px; top: 34px; bottom: -2px; width: 2px;
  background: linear-gradient(var(--lila), var(--rand-2)); }
.anl-schritte li > b { display: block; font-size: 17px; margin-bottom: 2px; }
.anl-schritte p b { color: var(--text); }
.anl-schritte p { margin: 0; color: var(--text-2); max-width: 68ch; }

.anl-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 6px; padding-left: 56px; }
.anl-fuss .knopf-haupt { display: inline-flex; align-items: center; gap: 8px; }
.anl-fuss .knopf-haupt svg { width: 18px; height: 18px; fill: currentColor; }
.anl-hoch { color: var(--leise); font-size: 14px; }

.anl-hilfe { margin: 40px 0 64px; padding: 26px 30px; border-radius: var(--r-xl); border: 1px dashed var(--rand-2); text-align: center; }
.anl-hilfe h2 { margin: 0 0 6px; font-size: 22px; }
.anl-hilfe p { margin: 0; color: var(--text-2); }

@media (max-width: 640px) {
  .anl { padding: 20px 18px; }
  .anl-kopf h2 { font-size: 22px; }
  .anl-schritte li { padding-left: 50px; }
  .anl-fuss { padding-left: 0; }
}