/* LernNord Anleitung (/anleitung). Ergänzt assets/site.css und assets/themen.css; Tokens: brand/tokens.css. Mobile first. */

.a-inhalt { margin-top: 28px; background: #fff; border: 1px solid #D9E3EC; border-radius: var(--ln-radius-s); padding: 16px 20px; box-shadow: var(--ln-shadow-1); }
.a-inhalt ol { margin: 0; padding-left: 1.4em; columns: 2 220px; column-gap: 28px; }
.a-inhalt li { break-inside: avoid; }
.a-inhalt a { display: inline-flex; align-items: center; min-height: 36px; font-weight: 700; }

.a-schritte { list-style: none; margin: 0; padding: 0; }
.a-schritt { margin-top: 44px; padding-top: 28px; border-top: 1px solid #D9E3EC; display: grid; gap: 20px; scroll-margin-top: 16px; }
.a-schritt h2 { display: flex; align-items: center; gap: 12px; }
.a-nr { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--ln-tiefsee); color: #fff; font-family: var(--ln-font-display); font-size: 1.15rem; }
.a-text p { max-width: 62ch; }

.a-bilder { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.a-bild { margin: 0; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #D9E3EC; box-shadow: var(--ln-shadow-2); }
.a-bild img { display: block; width: 100%; height: auto; }
.a-handy { width: min(100%, 280px); }
.a-tablet { width: min(100%, 360px); }

@media (min-width: 860px) {
  .a-schritt { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
  .a-bilder { justify-content: flex-end; max-width: 520px; }
  .a-tablet { width: 250px; }
  .a-handy { width: 200px; }
  .a-bilder .a-bild:only-child.a-tablet { width: 330px; }
  .a-bilder .a-bild:only-child.a-handy { width: 250px; }
}
.a-text p + p { margin-top: 12px; }
.a-text p:first-of-type { margin-top: 0; }