/* Schnupperlehre und Motivationsschreiben, Runde 8 (06.11.2026): Formular mit Vorschau-Karte, Tipps */

/* Formular «Neues Gespräch»: links eine kleine Karte, die beim Tippen mitwächst */
.r8-has-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 18px; align-items: start; }
.r8-has-setup > :not(.r8-setup):not(.card):not(.setup-card) { grid-column: 1 / -1; }
.r8-has-setup > .card, .r8-has-setup > .setup-card { grid-column: 2; grid-row: 2; margin: 0; }
.r8-setup { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; border-radius: 24px; background: linear-gradient(150deg, color-mix(in srgb, var(--gold) 10%, #fff), #fff 70%); border: 1px solid color-mix(in srgb, var(--gold) 16%, transparent); }
.r8-setup-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: #fff; box-shadow: 0 0 0 1px var(--line-soft, #e7e5e4), 0 14px 30px -18px rgba(37, 99, 235, .45); transform: rotate(-1.5deg); }
.r8-firm { display: flex; gap: 10px; align-items: center; }
.r8-firm > span { display: flex; flex-direction: column; min-width: 0; }
.r8-firm > span b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r8-firm small { font-size: 12px; color: var(--text-muted); }
.r8-firm-logo { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #F1F5F9; color: #94A3B8; font-size: 17px; font-weight: 800; transition: background .2s, color .2s; }
.r8-firm-logo.is-set { background: var(--gold, #2563EB); color: #fff; }
.r8-role { align-self: flex-start; padding: 5px 11px; border-radius: 999px; background: #F1F5F9; color: var(--text-muted); font-size: 13px; font-weight: 700; }
.r8-role.is-set { background: var(--tint-blue, #EAF1FE); color: var(--gold, #2563EB); }
.r8-lines { display: flex; flex-direction: column; gap: 6px; }
.r8-lines i { display: block; height: 6px; border-radius: 4px; background: #EEF0F3; }
.r8-stamp { position: absolute; right: -8px; bottom: -10px; padding: 4px 10px; border-radius: 999px; background: #FEF3C7; color: #92400E; font-size: 11.5px; font-weight: 700; transform: rotate(4deg); box-shadow: 0 4px 10px rgba(146, 64, 14, .15); }
.r8-steps { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.r8-steps li { display: flex; align-items: center; gap: 10px; }
.r8-steps b { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--gold) 35%, transparent); color: var(--gold); font-size: 12px; }
@media (max-width: 860px) {
  .r8-has-setup { grid-template-columns: 1fr; }
  .r8-has-setup > .card, .r8-has-setup > .setup-card, .r8-setup { grid-column: 1; grid-row: auto; }
  .r8-setup { padding: 16px; }
}

/* Tipps für die Schnupperlehre: Text, kleine Grafiken, nicht nur Boxen */
.r8-guide { margin: 34px 0 10px; }
.r8-kicker { margin: 0 0 6px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gold); }
.r8-big { margin: 0 0 22px; max-width: 720px; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.3; letter-spacing: -.01em; font-weight: 800; }
.r8-phases { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-bottom: 30px; }
.r8-phases::before { content: ""; position: absolute; left: 22px; right: 22px; top: 22px; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--gold) 35%, transparent) 0 8px, transparent 8px 14px); }
.r8-phase { position: relative; }
.r8-phase-ico { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #fff; color: var(--gold); box-shadow: 0 0 0 1px var(--line-soft, #e7e5e4), 0 6px 14px -6px rgba(37, 99, 235, .35); margin-bottom: 10px; }
.r8-phase > b { display: block; font-size: 17px; margin-bottom: 6px; }
.r8-phase ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 14.5px; line-height: 1.45; color: var(--text-muted); }
.r8-qa { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; margin-bottom: 24px; }
.r8-qcol h4 { margin: 0 0 10px; font-size: 16px; }
.r8-bubbles { display: flex; flex-wrap: wrap; gap: 8px; }
.r8-bub { display: inline-block; padding: 9px 13px; border-radius: 16px 16px 16px 5px; background: #fff; box-shadow: 0 0 0 1px var(--line-soft, #e7e5e4); font-size: 14px; line-height: 1.35; transform: rotate(calc((var(--i) - 2) * .4deg)); }
.r8-bub.is-you { border-radius: 16px 16px 5px 16px; background: var(--tint-blue, #EAF1FE); box-shadow: none; color: #1E3A8A; }
.r8-note { margin: 12px 0 0; font-size: 13.5px; color: var(--text-muted); }
.r8-call { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; background: #FFFBEB; border: 1px solid #FDE68A; }
.r8-call-ico { flex: none; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #F59E0B; color: #fff; }
.r8-call > div { flex: 1; min-width: 0; }
.r8-call b { display: block; font-size: 15px; }
.r8-call p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-muted); }
@media (max-width: 760px) {
  .r8-phases { grid-template-columns: 1fr; gap: 16px; }
  .r8-phases::before { left: 22px; right: auto; top: 22px; bottom: 22px; width: 2px; height: auto; background: repeating-linear-gradient(180deg, color-mix(in srgb, var(--gold) 35%, transparent) 0 8px, transparent 8px 14px); }
  .r8-phase { padding-left: 60px; }
  .r8-phase-ico { position: absolute; left: 0; top: 0; }
  .r8-qa { grid-template-columns: 1fr; gap: 18px; }
  .r8-call { flex-wrap: wrap; }
}

/* Altes Motivationsschreiben: «Stimmt das?» mit Schreibstil */
.bpx-style { margin: 4px 0 14px; padding: 14px 16px; border-radius: 16px; background: #F8FAFC; box-shadow: inset 0 0 0 1px var(--line-soft, #e7e5e4); }
.bpx-style h4 { margin: 0 0 6px; font-size: 14px; }
.bpx-style ul { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.bpx-style-good li { display: flex; gap: 6px; align-items: center; }
.bpx-style-good svg { width: 15px; height: 15px; color: #16A34A; flex: none; }
.bpx-style-tip li::before { content: "→ "; color: var(--gold); font-weight: 700; }
.bpx-style-keep { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-soft, #e7e5e4); cursor: pointer; }
.bpx-style-keep input { margin-top: 3px; accent-color: var(--gold); }
.bpx-style-keep b { display: block; font-size: 14px; }
.bpx-style-keep small { display: block; font-size: 12.5px; color: var(--text-muted); }
.bpx-chip.bpx-rv { cursor: pointer; border: 0; font: inherit; opacity: .55; text-decoration: line-through; transition: opacity .15s; }
.bpx-chip.bpx-rv.is-on { opacity: 1; text-decoration: none; }
.bpx-chip.bpx-rv small { margin-left: 4px; font-size: 11px; color: var(--text-muted); }
.bpx-chip.bpx-rv:not(.is-on) svg { visibility: hidden; }

/* Leere Übersicht: Kopf-Karte mit «+ Neues Gespräch» ist neben dem grossen Start doppelt (auch wenn davor ein Zurück-Knopf steht) */
.bpx-is-empty > div.card:first-of-type:not(:only-of-type):not(.bpx-plain) { display: none !important; }