/* Block „SNF Ablauf: Zeitleiste“ (acf/snf-ablauf). Blaupause B2 Abschnitt 3, Wireframe Variante B Fassung 2
   (Daniel, 04.10.2026: Prozess statt Tabelle). Angelegt 04.10.2026 (P13a). 1rem = 10px wie im Theme.
   Desktop: Pfeilband, Schrittkarten mit Pfeil, Kosten-Klammer. Bis 991px: Schrittkarten untereinander.
   Rückbau: inc/snf-k3-bloecke.php */

.snf-ablauf { background: rgb(207,207,200); color: rgb(17,17,17); }
.snf-a-kopf { text-align: center; max-width: 86rem; margin: 0 auto 4rem; }
.snf-a-kopf .small { margin: 0 0 1.6rem; }
.snf-a-satz { margin: 1.2rem 0 0; }

.snf-ablauf ol { list-style: none; margin: 0; padding: 0; }
.snf-ablauf ol > li { margin: 0; padding: 0; }
.snf-ablauf ol > li::before { content: none; }

.snf-a-rolle { display: block; font: 600 1.15rem/1.4 Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #5f5f58; margin-bottom: .2rem; }
.snf-a-du { background: #fbf3f3; border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.snf-a-last { display: block; height: 6px; border-radius: 3px; background: rgb(139,13,20); margin-top: .8rem; }
.snf-a-last-null { width: 100%; background: repeating-linear-gradient(90deg, #c9a9ab 0 6px, transparent 6px 10px); }
.snf-a-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: rgb(139,13,20); color: #fff; font: 700 1.3rem/1 "Space Grotesk", sans-serif; }
.snf-a-lauf .snf-a-n { background: #fff; color: rgb(139,13,20); }

/* Desktop */
.snf-a-band { display: grid; grid-template-columns: repeat(var(--snf-a-n, 4), 1fr); }
.snf-ablauf .snf-a-chev { background: rgb(17,17,17); color: #fff; min-height: 9.6rem; padding: 1.4rem 3.4rem 1.4rem 4.4rem; margin-right: -1.4rem; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%, 24px 50%); }
.snf-ablauf .snf-a-chev:first-child { padding-left: 2.4rem; clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 50%, calc(100% - 24px) 100%, 0 100%); }
.snf-ablauf .snf-a-chev:last-child { margin-right: 0; }
.snf-a-chev.snf-a-lauf { background: rgb(139,13,20); }
.snf-a-chev .snf-a-n { margin-bottom: .6rem; }
.snf-a-chev b { font: 600 1.7rem/1.25 "Space Grotesk", sans-serif; }
.snf-a-chev small { font-size: 1.3rem; line-height: 1.4; color: #e2e2dc; margin-top: .2rem; }

.snf-a-karten { display: grid; grid-template-columns: repeat(var(--snf-a-n, 4), 1fr); gap: 2.6rem; margin-top: 1.6rem; }
.snf-a-k { background: #fff; border-radius: 12px; padding: 1.6rem 1.6rem 1.4rem; position: relative; font-size: 1.5rem; line-height: 1.5; }
.snf-a-k:not(:last-child)::after { content: ""; position: absolute; right: -1.9rem; top: 46%; width: 1.1rem; height: 1.1rem; border-top: 3px solid rgb(139,13,20); border-right: 3px solid rgb(139,13,20); transform: rotate(45deg); }

.snf-a-kosten { display: grid; grid-template-columns: repeat(var(--snf-a-n, 4), 1fr); column-gap: 2.6rem; margin-top: 1.4rem; }
.snf-a-ko { border-top: 3px solid rgb(17,17,17); padding-top: .8rem; font-weight: 600; font-size: 1.45rem; line-height: 1.4; text-align: center; }
.snf-a-ko.snf-a-frei { border-color: #77776f; color: #3a3a35; }

.snf-a-mobil { display: none; }

.snf-a-legende { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; font-size: 1.4rem; color: #333; margin: 1.4rem 0 0; }
.snf-a-legende-balken { display: inline-block; width: 2.6rem; height: 6px; border-radius: 3px; background: rgb(139,13,20); }

/* Handy und Tablet */
@media (max-width: 991px) {
	.snf-a-desktop { display: none; }
	.snf-a-mobil { display: block; }
	.snf-a-kopf { margin-bottom: 3rem; }
	.snf-a-mschritt + .snf-a-mschritt { margin-top: 3.2rem; position: relative; }
	.snf-a-mschritt + .snf-a-mschritt::after { content: ""; position: absolute; top: -2.2rem; left: 50%; margin-left: -1.2rem; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid rgb(139,13,20); }
	.snf-a-mkopf { background: rgb(17,17,17); color: #fff; border-radius: 12px 12px 0 0; padding: 1.4rem 1.6rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: .8rem; }
	.snf-a-mkopf.snf-a-lauf { background: rgb(139,13,20); }
	.snf-a-mkopf b { font: 600 1.7rem/1.3 "Space Grotesk", sans-serif; }
	.snf-a-mkopf small { flex-basis: 100%; font-size: 1.3rem; color: #e2e2dc; padding-left: 3.4rem; margin-top: .2rem; }
	.snf-a-mkarte { background: #fff; border-radius: 0 0 12px 12px; padding: 1.4rem 1.6rem; font-size: 1.5rem; line-height: 1.5; }
	.snf-a-mko { font-weight: 600; font-size: 1.4rem; border-top: 1px solid #e2e2dc; padding-top: .8rem; margin: 1rem 0 0; }
}