/* ─────────────────────────────────────────────────────────────────────────
   Tutorials — nur das Eigene. Farben, Schriften, Kopf, Fuß, Karten, Kicker,
   Ghost, CTA-Band und die gestrichelte Linie kommen aus wissen.css und den
   Marken-Tokens (src/styles/). Wer das Aussehen der Marke ändert, ändert es
   dort — hier stehen nur die Bausteine, die es außerhalb der Tutorials nicht
   gibt: Schrittleiste, Schritt, Video, Randfall, Schluss.
   ───────────────────────────────────────────────────────────────────────── */

/* Ziel-Satz unter der Überschrift: was nach dem Tutorial anders ist. */
.tutorial__ziel{
  font-size:1.3rem;line-height:1.5;color:#fff;
  margin:0 0 1rem;max-width:38ch;text-wrap:balance;
}

/* Schrittleiste — Inhaltsverzeichnis und Sprungmarken zugleich. */
.steplist{
  margin:0 0 2.6rem;padding:20px 22px;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--brand-radius,16px);
}
.steplist ol{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.steplist a{
  display:flex;gap:.7rem;align-items:baseline;
  font-family:var(--mono);font-size:.92rem;color:var(--text-dim);
  padding:.25rem 0;transition:color .15s;text-decoration:none;
}
.steplist a:hover{color:var(--accent)}
.steplist a span{
  color:var(--text-faint);font-weight:700;font-size:.8rem;
  min-width:1.4em;text-align:right;
}

/* Ein Schritt: Nummer links, Inhalt rechts. */
.step{
  display:grid;grid-template-columns:auto 1fr;gap:1.1rem;
  padding:1.8rem 0;border-top:1px dashed var(--line-2);
  scroll-margin-top:80px;
}
.step:first-of-type{border-top:0}
.step__nr{
  font-family:var(--mono);font-weight:800;font-size:1rem;line-height:1;
  width:2.1rem;height:2.1rem;border-radius:999px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-3);color:var(--accent);border:1px solid var(--line-2);
  margin-top:.35rem;
}
.step__main{min-width:0}
.step__title{
  font-family:var(--display);font-weight:400;letter-spacing:.005em;
  font-size:clamp(1.6rem,3vw,2.1rem);line-height:1.04;
  margin:.05rem 0 .9rem;text-wrap:balance;
}
.step__anchor{
  color:var(--text-faint);margin-left:.5rem;font-weight:400;
  opacity:0;transition:opacity .15s;text-decoration:none;
}
.step:hover .step__anchor,.step__anchor:focus{opacity:1}
.step__anchor:hover{color:var(--accent)}
.step p:last-child{margin-bottom:0}

/* Video statt Screenshot — für alles, was man zieht oder hält. */
.step__media{margin:1.2rem 0 1.4rem}
.step__media video{
  width:100%;border-radius:var(--brand-radius,16px);border:1px solid var(--line-2);
  background:#000;display:block;
}
.step__media figcaption{
  font-family:var(--mono);font-size:.8rem;color:var(--text-faint);
  margin-top:.6rem;
}

/* Randfälle: aufklappbar, damit der Hauptweg kurz bleibt. */
.randfall{
  margin:1.1rem 0;border:1px solid var(--line);border-radius:12px;
  background:var(--bg-2);overflow:hidden;
}
.randfall summary{
  cursor:pointer;list-style:none;padding:.75rem 1rem;
  font-family:var(--mono);font-size:.92rem;color:var(--text-dim);
  display:flex;gap:.6rem;align-items:center;
}
.randfall summary::-webkit-details-marker{display:none}
.randfall summary::before{content:"›";color:var(--accent);font-weight:700;transition:transform .15s}
.randfall[open] summary::before{transform:rotate(90deg)}
.randfall summary:hover{color:var(--text)}
.randfall__body{padding:0 1rem 1rem 2.2rem;font-size:1.02rem}
.randfall__body p:last-child{margin-bottom:0}

/* Schluss: was jetzt anders ist. Kein Kasten — die gestrichelte Linie
   darüber trennt schon. */
.outro{margin:1.4rem 0 0}
.outro__title{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.04;
  margin:0 0 .6rem;color:var(--accent);
}
.outro p:last-child{margin-bottom:0}

.card--tutorial .card__meta{color:var(--text-faint)}

.tutorial__story{
  font-family:var(--mono);font-size:.9rem;color:var(--text-dim);margin:1.6rem 0 0;
}
.tutorial__story a{color:var(--accent)}

@media (max-width:640px){
  .step{grid-template-columns:1fr;gap:.4rem}
  .step__nr{margin-top:0}
  .randfall__body{padding-left:1rem}
}