/* AH-BK · Bildungsgänge: Übersicht und Layout-Varianten (zur Abstimmung) */
/* Bildungsgänge: Übersicht (Variante A) */
.bo-intro { display: flex; align-items: center; justify-content: space-between; gap: 40px; margin: 0 0 56px }
.content-main .bo-intro .lead { margin: 0; max-width: 760px }
.bo-intro .btn, .bo-intro-btn { flex: none }
.bo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) }


.bo-card-img { position: relative; display: block; background: var(--soft-blue) }
.bo-card-pic { display: block; height: 100%; overflow: hidden }
.bo-card-pic img { width: 100%; height: 100%; object-fit: cover }

.bo-card-icon { position: absolute; left: 28px; bottom: -24px; z-index: 2; display: flex; width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--accent-strong); color: #fff; align-items: center; justify-content: center; font-size: 1.6rem; box-shadow: 0 10px 24px rgba(242, 139, 45, .35) }
.bo-card-body { display: flex; flex-direction: column; gap: 12px; flex: 1; padding: 44px 32px 32px }
.content-main .bo-card h2 { margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem) }
.bo-card h2 a { color: var(--primary-800) }
.content-main .bo-card p { margin: 0; font-size: .98rem }
.bo-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 10px 0 6px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--line) }
.bo-facts div { padding: 14px 16px; background: var(--soft) }
.bo-facts dt { margin-bottom: 4px; font-size: .64rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--muted) }
.bo-facts dd { margin: 0; font-size: .86rem; font-weight: 700; line-height: 1.35; color: var(--ink) }
.bo-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-top: auto; padding-top: 14px }
.bo-wegweiser { margin: 96px 0 0; padding: 56px; border-radius: var(--r-xl); background: var(--soft) }
.bo-wegweiser-head { max-width: 640px; margin-bottom: 34px }
.content-main .bo-wegweiser h2, .content-main .bo-berufe h2 { margin: 8px 0 14px }
.bo-wege { display: grid; gap: 14px }
.bo-weg { display: grid; grid-template-columns: minmax(220px, 300px) 40px 1fr; align-items: center; gap: 18px; padding: 20px 24px; border-radius: var(--r-lg); background: #fff }
.bo-weg-start small { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 800; color: var(--muted) }
.bo-weg-start strong { display: block; margin: 2px 0; font-size: 1.06rem; color: var(--primary-800) }
.bo-weg-start span { font-size: .84rem; color: var(--muted) }
.bo-weg-pfeil { text-align: center; font-size: 1.5rem; color: var(--accent-strong) }
.bo-weg-ziele { display: flex; flex-wrap: wrap; gap: 10px }
.bo-weg-ziele a { display: flex; flex-direction: column; padding: 10px 16px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--soft-blue); transition: .2s }
.bo-weg-ziele a:hover { border-color: var(--primary); background: #fff }
.bo-weg-ziele b { font-size: .92rem; color: var(--primary-800) }
.bo-weg-ziele span { font-size: .74rem; color: var(--muted) }
.bo-berufe { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s-7); align-items: start; margin: 110px 0 40px }
.content-main .bo-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 6px 0 0; padding: 0 }
.content-main .bo-chips li { margin: 0; padding: 6px 13px; border-radius: var(--r-pill); background: #fff; border: 1px solid var(--line); font-size: .82rem; color: var(--ink) }

/* Bildungsgänge: Layout-Varianten 1–5 (zur Abstimmung) */
/* 1 · Kacheln */
/* 2 · Vergleich */
/* 3 · Tabs */
/* 4 · Magazin */
/* 5 · Wegweiser */

/* Responsive */
@media (max-width: 1100px) {
	.bo-grid { grid-template-columns: 1fr }
	.bo-intro { flex-direction: column; align-items: flex-start; gap: 24px }
	.bo-berufe { grid-template-columns: 1fr; gap: 20px }
	.bo-weg { grid-template-columns: 1fr; gap: 10px } .bo-weg-pfeil { display: none }
	.bo-wegweiser { padding: 30px 22px }
}
@media (max-width: 760px) {
	.bo-card-body { padding: 40px 20px 22px }
	.bo-card-actions .btn { flex: 1 1 100% }   /* Buttons untereinander, volle Breite */
}

/* Responsive (aus anderen Dateien hierher verschoben, damit die Basis-Regeln dieser Datei sie nicht überschreiben) */

/* Bildungsgänge: grafische Varianten 6–9 (zur Abstimmung) – wenig Text, Ziffer, Name, Dauer */

/* 6 · Poster */

/* 7 · Zeitstrahl */

/* 8 · Liste */

/* 9 · Kreise */