/* DROPPY – Anleitung
   Wird nur auf diesen Seiten zusätzlich zu main.css geladen. */

/*  DROPPY - Anleitung (anleitung.php) – nur Zusatz zu style.min.css  */

.anleitung-step { padding: 25px 0; margin-bottom: 0; }

.anleitung-step + .anleitung-step { border-top: 1px dashed var(--c-line); }

.anleitung-section { margin-top: 50px; }

.anleitung-step h3.title { position: relative; padding-left: 42px; }

.anleitung-no { position: absolute; left: 0; top: 2px; width: 30px; height: 30px; border: 2px solid currentColor; border-radius: 50%; text-align: center; font-size: 15px; font-weight: 600; line-height: 26px; }

.anleitung-img { width: 100%; max-width: 280px; height: auto; margin: 0 auto; filter: drop-shadow(0 3px 10px rgb(var(--rgb-black) / 0.14)); }

.anleitung-note { padding: 12px 16px; border-left: 4px solid var(--c-note-border); border-radius: var(--radius-xs); background: var(--c-note-bg); }

/*  4.12 Nachtrag v4.3: Anleitung, Captcha, Suche, Spenden  */

.anleitung-step {
    margin: 0 0 var(--space-3);
    padding: var(--space-3) var(--space-3);
    border: 1px solid var(--c-line);
    border-radius: var(--radius);
    background: var(--c-white);
    box-shadow: var(--shadow-card);
}

.anleitung-step + .anleitung-step { border-top: 1px solid var(--c-line); }

.anleitung-step h3.title { padding-left: 46px; font-size: var(--fs-lg); color: var(--c-dark); }

.anleitung-no {
    width: 34px; height: 34px; top: 0;
    border: 0; background: var(--c-teal); color: var(--c-white);
    line-height: 34px; font-size: var(--fs-base);
}

.anleitung-section { margin-top: var(--space-5); }

/*  Anleitung mobil: lange Buttons duerfen umbrechen  */

.anleitung-page .btn { white-space: normal; max-width: 100%; }

/*  Abstand zwischen Titel und Text (hoehere Spezifitaet noetig, sonst gewinnt die Regel fuer .story-container-inner h3 aus main.css)  */

body .story-container-inner .anleitung-step h3.title { margin-bottom: var(--space-2); }