/* AnnexSERVER — Seitenspezifisches
 *
 * Was nicht Komponente ist: Hero mit Spektrallinie, Dokumentations-Layout,
 * Schritt-Listen. Grundgeruest in components.css, Tokens in tokens.css.
 */

/* --- Hero -------------------------------------------------------------- */
.hero { padding: 4.5rem 0 3.5rem; position: relative; }
.hero .spectrum { position: absolute; left: 0; right: 0; bottom: 0; }
.hero .ag-lockup { --lockup-h: 44px; margin-bottom: 2rem; }

/* --- Dokumentation ----------------------------------------------------- */
.docs { padding-top: 2.25rem; }
.docs-grid { display: grid; gap: 2.5rem; grid-template-columns: 15rem 1fr; align-items: start; }

.docs-nav { position: sticky; top: 5rem; }
.docs-nav ul { list-style: none; margin: 0; }
.docs-nav li { margin-bottom: .1rem; }
.docs-nav a {
  display: block; padding: .35rem .6rem; margin-left: -.6rem;
  color: var(--text-secondary); text-decoration: none; font-size: .92rem; border-radius: 6px;
}
.docs-nav a:hover { background: var(--bg-surface); color: var(--text); }
.docs-nav a[aria-current="page"] { background: var(--bg-surface); color: var(--accent-text); font-weight: 600; }

.docs-body h2 { margin-top: 2.5rem; padding-top: .25rem; }
.docs-body h2:first-of-type { margin-top: 2rem; }
.docs-body h3 { margin-top: 1.75rem; }
.docs-body ol { margin-left: 1.35rem; }
.docs-body ol > li { margin-bottom: .6rem; }
.docs-body pre { margin-top: .5rem; }
.docs-body img { max-width: 100%; height: auto; }

.docs-pager {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 1.25rem;
}
.docs-pager a { color: var(--text-secondary); text-decoration: none; font-size: .93rem; }
.docs-pager a:hover { color: var(--text); }

@media (max-width: 920px) {
  .docs-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .docs-nav { position: static; border-bottom: 1px solid var(--border); padding-bottom: 1rem; }
  .docs-nav ul { display: flex; flex-wrap: wrap; gap: .25rem; }
  .docs-nav a { padding: .3rem .55rem; margin-left: 0; font-size: .88rem; }
}

/* --- Schritt-fuer-Schritt-Listen ---------------------------------------- */
.steps { counter-reset: step; list-style: none; margin-left: 0; }
.steps > li {
  counter-increment: step; position: relative;
  padding-left: 2.4rem; margin-bottom: 1.5rem;
}
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: -.1rem;
  width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--accent); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brand); font-size: .85rem; font-weight: 700;
}
[data-theme="dark"] .steps > li::before { color: var(--void); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .steps > li::before { color: var(--void); }
}
.steps > li > strong:first-child { display: block; color: var(--text); margin-bottom: .2rem; }