/* Buchungslust: Ablauf-Stockwerk (acf/bl-ablauf), 19.10.2026 (Daniel/Claude).
   Vorbild: snf-ablauf auf danielschoch.com, Farben und Schriften aus dem Buchungslust-CI
   (Nachtpetrol #12262B, Sand #F4EFE7, Orange #F2611D). 1rem = 10px wie im Theme.
   Computer: Pfeilband, Karten mit Pfeil, Kostenklammer. Bis 991px: Schritte untereinander. */

.bl-ablauf { --bl-a-dunkel: #12262B; --bl-a-orange: #F2611D; --bl-a-du: #FFF0E7; --bl-a-karte: #fff; --bl-a-leise: #5d6b6e;
	background: #F4EFE7; color: var(--bl-a-dunkel); padding: 3rem 0; }
.bl-ablauf--hell { background: #fff; --bl-a-karte: #F4EFE7; }
.bl-ablauf--petrol { background: var(--bl-a-dunkel); color: #fff; }
.bl-ablauf--petrol .bl-a-kopf h2, .bl-ablauf--petrol .bl-a-satz { color: #fff; }
/* 19.10.2026: Petrol-Pfeile stärker gewichtet, vorher überschrieb .bl-ablauf .bl-a-chev die Farbe (Pfeile 1 und 2 unsichtbar). */
.bl-ablauf.bl-ablauf--petrol .bl-a-chev:not(.bl-a-lauf), .bl-ablauf--petrol .bl-a-mkopf:not(.bl-a-lauf) { background: #24434b; }
.bl-ablauf--petrol .bl-a-ko { border-color: rgba(255,255,255,.7); color: #fff; }
.bl-ablauf--petrol .bl-a-ko.bl-a-frei { border-color: rgba(255,255,255,.35); color: rgba(255,255,255,.75); }

.bl-a-kopf { text-align: center; max-width: 86rem; margin: 0 auto 4.4rem; }
.bl-a-kopf .subline { margin: 0 0 1.4rem; }
.bl-a-kopf h2 { color: var(--bl-a-dunkel); margin: 0; }
.bl-a-satz { margin: 1.6rem auto 0; max-width: 68rem; font-size: 1.8rem; line-height: 1.55; }

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

.bl-a-rolle { display: block; font: 700 1.15rem/1.4 Montserrat, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--bl-a-leise); margin-bottom: .3rem; }
.bl-a-du { background: var(--bl-a-du); border-radius: 10px; padding: 1.1rem 1.3rem; margin-bottom: 1.4rem; }
.bl-a-du .bl-a-rolle { color: #b04f1c; }
.bl-a-n { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.8rem; height: 2.8rem; border-radius: 50%;
	background: var(--bl-a-orange); color: #fff; font: 700 1.4rem/1 Montserrat, sans-serif; }
.bl-a-lauf .bl-a-n { background: #fff; color: var(--bl-a-orange); }

/* Computer */
.bl-a-band { display: grid; grid-template-columns: repeat(var(--bl-a-n, 3), 1fr); }
.bl-ablauf .bl-a-chev { background: var(--bl-a-dunkel); color: #fff; min-height: 10rem; padding: 1.4rem 3.6rem 1.4rem 4.6rem; margin-right: -1.4rem;
	display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
	clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%, 26px 50%); }
.bl-ablauf .bl-a-chev:first-child { padding-left: 2.6rem; border-radius: 12px 0 0 12px;
	clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 50%, calc(100% - 26px) 100%, 0 100%); }
.bl-ablauf .bl-a-chev:last-child { margin-right: 0; }
.bl-a-chev.bl-a-lauf { background: var(--bl-a-orange); }
.bl-a-chev .bl-a-n { margin-bottom: .7rem; }
.bl-a-chev b { font: 700 1.8rem/1.25 Montserrat, sans-serif; color: #fff; }
.bl-a-chev small { font-size: 1.45rem; line-height: 1.4; color: rgba(255,255,255,.78); margin-top: .3rem; }
.bl-a-chev.bl-a-lauf small { color: rgba(255,255,255,.92); }

.bl-a-karten { display: grid; grid-template-columns: repeat(var(--bl-a-n, 3), 1fr); gap: 2.8rem; margin-top: 1.8rem; }
.bl-a-k { background: var(--bl-a-karte); color: var(--bl-a-dunkel); border-radius: 14px; padding: 1.8rem 1.8rem 1.6rem; position: relative;
	font-size: 1.65rem; line-height: 1.5; box-shadow: 0 10px 28px rgba(18,38,43,.07); }
.bl-a-k:not(:last-child)::after { content: ""; position: absolute; right: -2rem; top: 46%; width: 1.1rem; height: 1.1rem;
	border-top: 3px solid var(--bl-a-orange); border-right: 3px solid var(--bl-a-orange); transform: rotate(45deg); }

.bl-a-kosten { display: grid; grid-template-columns: repeat(var(--bl-a-n, 3), 1fr); column-gap: 2.8rem; margin-top: 1.6rem; }
.bl-a-ko { border-top: 3px solid var(--bl-a-dunkel); padding-top: .9rem; font-weight: 700; font-size: 1.55rem; line-height: 1.4; text-align: center; }
.bl-a-ko.bl-a-frei { border-color: #9aa5a7; color: var(--bl-a-leise); }

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

/* Handy und Tablet */
@media (max-width: 991px) {
	.bl-a-desktop { display: none; }
	.bl-ablauf .bl-a-mobil { display: block; max-width: 56rem; margin: 0 auto; }
	.bl-a-kopf { margin-bottom: 3.2rem; }
	.bl-a-mschritt + .bl-a-mschritt { margin-top: 3.4rem; position: relative; }
	.bl-a-mschritt + .bl-a-mschritt::after { content: ""; position: absolute; top: -2.3rem; left: 50%; margin-left: -1.2rem; width: 0; height: 0;
		border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 12px solid var(--bl-a-orange); }
	.bl-a-mkopf { background: var(--bl-a-dunkel); color: #fff; border-radius: 14px 14px 0 0; padding: 1.5rem 1.8rem; display: flex; flex-wrap: wrap; align-items: center; column-gap: 1rem; }
	.bl-a-mkopf.bl-a-lauf { background: var(--bl-a-orange); }
	.bl-a-mkopf b { font: 700 1.8rem/1.3 Montserrat, sans-serif; color: #fff; }
	.bl-a-mkopf small { flex-basis: 100%; font-size: 1.45rem; color: rgba(255,255,255,.8); padding-left: 3.8rem; margin-top: .2rem; }
	.bl-a-mkarte { background: var(--bl-a-karte); color: var(--bl-a-dunkel); border-radius: 0 0 14px 14px; padding: 1.5rem 1.8rem; font-size: 1.65rem; line-height: 1.5; }
	.bl-a-mko { font-weight: 700; font-size: 1.5rem; border-top: 1px solid #e6dfd3; padding-top: .9rem; margin: 1.2rem 0 0; }
}