/* ==========================================================================
   Jobriver v2 – Blog & News (Ergänzung zu karriere-2.css)
   Übersicht + Artikel nutzen das Lese-Layout und die k2-Bausteine des
   Karriere-Magazins; hier steht nur, was der Blog zusätzlich zeigt.
   Styleguide: docu/design/v2-styleguide.md
   ========================================================================== */

/* Kennzahlen unter der Suche */
.b2-facts { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 22px; font-size: .9375rem; color: var(--muted); }
.b2-facts b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Blog-Beiträge verpacken Abschnitte oft in <section>/<div>: Abstände wie im Fließtext */
.b2-page .k2-prose :is(section, div, article) > * + * { margin-top: 1.1em; }
.b2-page .k2-prose :is(section, div, article) > h2:first-child { margin-top: 2em; }
.b2-page .k2-prose > :is(section, div, article):first-child > h2:first-child { margin-top: 0; }

/* Live-Jobbox im Artikel (Schlagwort-Technologie mit offenen Stellen) */
.b2-jobs { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 28px; margin-top: 40px; padding: 24px 28px; border-radius: var(--r-xl); background: radial-gradient(90% 120% at 90% 0%, #3b2580, var(--plum) 70%); color: #e9e3fb; }
.b2-jobs__k { display: inline-flex; align-items: center; gap: 8px; font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #c9b8ff; }
.b2-jobs__h { margin-top: 6px; font-size: 1.125rem; line-height: 1.4; color: #fff; }
.b2-jobs__h b { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.b2-jobs__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.b2-jobs__link { font-weight: 600; color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, .4); }
.b2-jobs__link:hover { text-decoration-color: #fff; }
.b2-live { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); animation: b2pulse 2.2s infinite; }
@keyframes b2pulse { 0% { box-shadow: 0 0 0 0 rgba(18, 184, 134, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(18, 184, 134, 0); } }

/* Heller Knopf auf dunklen Flächen (Band, Jobbox) */
.b2-page .btn--light { background: #fff; color: var(--plum); }
.b2-page .btn--light:hover { background: #f1ecff; }

/* Admin-Vorschau (Entwurf/geplant) */
.b2-preview { position: fixed; left: 50%; bottom: 20px; z-index: 60; transform: translateX(-50%); padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: .875rem; font-weight: 550; box-shadow: var(--shadow-lg); white-space: nowrap; }

@media (max-width: 560px) {
    .b2-jobs { padding: 22px; }
    .b2-preview { white-space: normal; width: calc(100% - 32px); text-align: center; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .b2-live { animation: none; }
}