/* ==========================================================================
   Jobriver v2 – Job inserieren (/job-inserieren)
   Ergänzt lp-2.css (Arbeitgeber-Vorlage) um: Hero-Kennzahlen, Bento „Warum Jobriver",
   Preis-Karte, Editor-Vorschau.
   ========================================================================== */

.btn--light { background: #fff; color: var(--plum); }
.btn--light:hover { background: #f1ecff; }

/* Hero-Kennzahlen */
.ji2-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; }
.ji2-stats > div { min-width: 140px; padding: 12px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ji2-stats dt { font-size: .8125rem; color: var(--muted); }
.ji2-stats dd { margin: 2px 0 0; font-size: 1.6rem; font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.ji2-stats dd small { font-size: .875rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }

/* Bento */
.ji2-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.ji2-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; padding: 26px; border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--line); min-width: 0; overflow: hidden; transition: border-color .25s, box-shadow .25s; }
.ji2-tile:hover { border-color: var(--brand-200); box-shadow: var(--shadow); }
.ji2-tile--wide { grid-column: span 2; flex-direction: row; align-items: flex-start; justify-content: flex-start; }
.ji2-tile--wide > * { flex: 1 1 0; min-width: 0; }
.ji2-tile__txt h3 { margin-top: 16px; font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
.ji2-tile__txt p { margin-top: 8px; font-size: .9375rem; line-height: 1.6; color: var(--muted); }
.ji2-tile__txt strong { color: var(--ink); font-weight: 600; }
.ji2-demo { padding: 18px; border-radius: 20px; background: var(--seg-grad); }
.ji2-tile .lp2-demo { border-radius: 20px; }
.ji2-demo.lp2-demo__tl { list-style: none; padding: 12px 18px; }
.ji2-demo .lp2-demo__tags { margin-inline: auto; }
.ji2-demo .lp2-demo__stat { justify-content: center; }
.ji2-demo .lp2-demo__kpis > div { background: var(--surface); }
.ji2-demo .lp2-demo__bars { height: 72px; }
.ji2-tile--target { align-items: stretch; }
.ji2-tile--target .lp2-checks { margin-top: 18px; gap: 8px; }
.ji2-tile--target .lp2-checks li { font-size: .9375rem; }
.ji2-tile--target .ji2-demo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 28px 22px; }
.ji2-tile--target .lp2-demo__tags { max-width: 420px; }
.ji2-tile--target .lp2-demo__stat { margin-top: 0; }
.ji2-note { margin-top: 14px; text-align: center; font-size: .8125rem; color: var(--muted); }

/* Mini-Vorschau Bewerbungen */
.ji2-apps { list-style: none; display: grid; gap: 8px; }
.ji2-apps li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.ji2-av { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-200), var(--brand-100)); }
.ji2-sk { display: grid; gap: 6px; }
.ji2-sk i { display: block; height: 8px; width: var(--w); border-radius: 4px; background: var(--line); }
.ji2-sk i:first-child { height: 10px; background: var(--line-2); }
.ji2-st { padding: 3px 9px; border-radius: 999px; font-size: .75rem; font-weight: 650; }
.ji2-st--new { background: var(--brand-50); color: var(--brand-700); }
.ji2-st--rev { background: var(--tint); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ji2-st--int { background: var(--brand); color: #fff; }

/* Mini-Vorschau Firmenprofil */
.ji2-prof { display: grid; gap: 14px; }
.ji2-prof__head { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface); }
.ji2-prof__logo { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, var(--brand), #9b7dff); }
.ji2-prof__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ji2-prof__tags li { padding: 4px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .8125rem; font-weight: 550; color: var(--ink-2); }

/* Mini-Vorschau Sprachen */
.ji2-langs { list-style: none; display: grid; gap: 8px; }
.ji2-langs li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.ji2-langs b { display: grid; place-items: center; width: 38px; height: 28px; border-radius: 8px; background: var(--tint); font-size: .75rem; font-weight: 700; letter-spacing: .04em; }
.ji2-langs li.is-req b { background: var(--brand); color: #fff; }
.ji2-langs span { font-weight: 550; }
.ji2-langs small { font-size: .8125rem; color: var(--muted); }

/* Preis-Karte */
.ji2-price { padding: 0; }
.ji2-price__card { margin-inline: var(--edge); padding: clamp(48px, 6vw, 88px) 0; border-radius: var(--r-xl); background: radial-gradient(80% 90% at 10% 0%, #3b2580, var(--plum) 65%); color: #d9d2ee; }
.ji2-price__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ji2-price__p { margin-top: 14px; max-width: 52ch; font-size: var(--fs-lead); line-height: 1.55; color: #cfc4f3; }
.ji2-price__list { list-style: none; display: grid; gap: 10px; margin: 24px 0 28px; }
.ji2-price__list li { position: relative; padding-left: 28px; color: #ece7fb; }
.ji2-price__list li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: rgba(255, 255, 255, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23c9b8ff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.ji2-price__list strong { color: #fff; }
.ji2-tag { display: grid; justify-items: center; gap: 2px; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-xl); background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); text-align: center; }
.ji2-tag__from { font-size: .875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #b9a9ff; }
.ji2-tag__amount { font-size: clamp(4rem, 3rem + 4vw, 6.5rem); line-height: 1; font-weight: 600; letter-spacing: -.05em; color: #fff; font-variant-numeric: tabular-nums; }
.ji2-tag__cur { font-size: 1rem; color: #cfc4f3; }
.ji2-tag__alt { margin-top: 14px; padding: 5px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: .8125rem; font-weight: 550; color: #ece7fb; }

/* Editor-Vorschau */
.ji2-editor { max-width: 1040px; margin: 48px auto 0; }
.ji2-editor__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ji2-editor__col { padding: 24px; min-width: 0; }
.ji2-editor__col + .ji2-editor__col { border-left: 1px solid var(--line); }
.ji2-editor__col h3 { display: flex; align-items: center; gap: 10px; font-size: 1rem; font-weight: 600; }
.ji2-editor__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-50); color: var(--brand-700); font-size: .75rem; font-weight: 700; }
.ji2-editor__col ul { list-style: none; display: grid; gap: 8px; margin-top: 16px; }
.ji2-editor__col li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--line-2); font-size: .9rem; color: var(--ink-2); }
.ji2-editor__col li svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--brand-700); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 1080px) {
    .ji2-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ji2-editor__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ji2-editor__col:nth-child(3) { border-left: 0; }
    .ji2-editor__col:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
    .ji2-bento { grid-template-columns: minmax(0, 1fr); }
    .ji2-tile--wide { grid-column: auto; flex-direction: column; align-items: stretch; }
    .ji2-price__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
    .ji2-tile { padding: 20px; }
    .ji2-editor__grid { grid-template-columns: minmax(0, 1fr); }
    .ji2-editor__col + .ji2-editor__col { border-left: 0; border-top: 1px solid var(--line); }
    .ji2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .ji2-stats > div { min-width: 0; padding: 10px; }
    .ji2-stats dd { font-size: 1.25rem; }
}

/* Feinschliff Bento: letzte breite Kachel über die volle Breite, Kennzahlen ohne Umbruch */
@media (min-width: 1081px) {
    .ji2-bento > .ji2-tile--wide:last-child { grid-column: 1 / -1; }
}
.ji2-demo .lp2-demo__kpis { gap: 8px; }
.ji2-demo .lp2-demo__kpis > div { padding: 10px 12px; }
.ji2-demo .lp2-demo__kpis dt { hyphens: none; overflow-wrap: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ji2-demo .lp2-demo__kpis dd { font-size: 1.2rem; white-space: nowrap; }