/* ============================================================================
   RUNDE 9 (lino/runde9, Wunsch Lino 06.11.2026): clean im Stellio-Stil
   Weiss, Beige, Braun, ruhige matte Farben. Keine Sprechblasen-Figuren mehr.
   ============================================================================ */

/* ── Lehrstellen: Firmen-Seite wieder in voller Breite ───────────────────── */
/* Der Zurück-Knopf sitzt jetzt im festen Zurück-Platz, darum braucht die Seite keine eigene Spalte mehr */
.ls-page { display: block; }
.ls-page-hero { display: grid; grid-template-columns: minmax(0, 1fr); aspect-ratio: auto; height: 220px; box-shadow: 0 0 0 1px var(--line-soft, #E7DDCF); }
.ls-page-hero:has(.ls-hero-photo) { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.ls-page-hero > .ls-art { height: 100%; }
.ls-hero-photo { position: relative; display: block; height: 100%; overflow: hidden; }
.ls-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-hero-photo::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: linear-gradient(90deg, rgb(0 0 0 / .14), transparent); pointer-events: none; }
.ls-glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0 6px; }
.ls-glance-i { display: grid; grid-template-columns: 38px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: var(--card-bg, #fff); box-shadow: 0 0 0 1px var(--line-soft, #E7DDCF); }
.ls-glance-ico { grid-row: 1 / 3; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: #F3EDE5; color: #8A7765; }
.ls-glance-i small { font-size: 12px; color: var(--text-muted); }
.ls-glance-i b { font-size: 14px; line-height: 1.3; color: var(--text); overflow-wrap: anywhere; }
.ls-fit { background: #F6F1EA; }
.ls-special { background: #F3EDE5; }
.ls-special > span { color: #8A7765; }
.ls-fun svg { color: #8A7765; }
.ls-tip { background: #F8F4EE; box-shadow: 0 0 0 1px var(--line-soft, #E7DDCF); }
.ls-steps .ls-step-n { background: #8A7765; }
@media (max-width: 820px) {
  .ls-page-hero, .ls-page-hero:has(.ls-hero-photo) { grid-template-columns: 1fr; height: 180px; }
  .ls-hero-photo { display: none; }
}

/* ── Bewerbung: Tipps ohne Sprechblasen ─────────────────────────────────── */
.r9-tips { margin-top: 28px; }
.r9-h { margin: 0 0 12px; font-size: 18px; color: var(--text); }
.r9-tip-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.r9-tip { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 20px; background: var(--card-bg, #FFFCF7); box-shadow: 0 0 0 1px var(--line-soft, #E7DDCF); }
.r9-tip b { display: block; margin-bottom: 2px; font-size: 15px; color: var(--text); }
.r9-tip p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.r9-tip-ico, .bpx-tip-ico, .bpx-step-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #F3EDE5 !important; color: #8A7765 !important; }
.bpx-step-ico { width: 44px; height: 44px; border-radius: 14px; }
@media (max-width: 760px) { .r9-tip-grid { grid-template-columns: 1fr; } }

/* ── Kleine Bilder auf den Karten: Stellio-Farben (weiss, beige, braun, matt) ─ */
.bpa-dot { background: #F3EDE5; box-shadow: inset 0 0 0 2px #B9A58F; }
.bpa-logo { background: #D8C3A5; }
.bpa-pin { background: #8A7765; }
.bpa-face { background: linear-gradient(160deg, #EBCFB4 55%, #8A7765 56%); }
.bpa-box.is-on { background: #B9A58F; }
/* Vorstellungsgespräch: beide Blasen hell und ruhig, die Antwort leicht beige */
.bpa-talk2 .bpa-bub2.is-a i { background: linear-gradient(90deg, #D9CFC3, #ECE5DC); }
.bpa-talk2 .bpa-bub2.is-b { background: #F3EDE5; box-shadow: 0 0 0 1px #E2D6C7, 0 6px 14px hsl(30deg 22% 28% / .12); }
.bpa-talk2 .bpa-bub2.is-b i { background: linear-gradient(90deg, #C9B49A, #DFD0BD); }
/* Eignungstest: Fragezeichen beige, gewählte Antwort ruhiges Grün */
.bpa-qmark { background: #F3EDE5; color: #8A7765; }
.bpa-opt { box-shadow: inset 0 0 0 1px #ECE5DC; }
.bpa-opt i { box-shadow: inset 0 0 0 1.5px #D9CFC3; }
.bpa-opt.is-on { background: #EEF4EE; box-shadow: inset 0 0 0 1px #C7D7C5; }
.bpa-opt.is-on i { background: #6E8B74; }
/* Bewerbungs-Tracker: drei Bewerbungen untereinander mit Stand (offen, Gespräch, Zusage) */
.bpa-track3 { display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.bpa-row3 { display: flex; align-items: center; gap: 6px; height: 21px; padding: 0 6px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--line-soft, #E2D6C7), 0 3px 8px hsl(30deg 22% 28% / .08); }
.bpa-row3:nth-child(2) { margin-left: 8px; margin-right: -4px; }
.bpa-row3 b { flex: none; width: 10px; height: 10px; border-radius: 3px; background: #E6DACB; }
.bpa-row3 i { flex: 1; height: 4px; border-radius: 3px; background: #ECE5DC; }
.bpa-row3 em { flex: none; width: 16px; height: 8px; border-radius: 999px; }
.bpa-row3 em.is-a { background: #E2D6C7; }
.bpa-row3 em.is-b { background: #C9B49A; }
.bpa-row3 em.is-c { width: 12px; height: 12px; background: #6E8B74 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/8px no-repeat; }
.bpa-track3.is-big { width: 130px; gap: 9px; }
.bpa-track3.is-big .bpa-row3 { height: 26px; }

/* ── Motivationsschreiben: Start ohne Grün und Orange ───────────────────── */
.cover-setup { background: var(--card-bg, #FBF8F2) !important; border-top: 0 !important; }
#cover-type-chips .chip.selected[class*="rub-"] { background: #F3EDE5; border-color: #8A7765; color: var(--text); box-shadow: none; }
.r8-firm-logo { background: #F3EDE5; color: #B9A58F; }
.r8-firm-logo.is-set { background: #8A7765; color: #fff; }
.r8-role { background: #F3EDE5; }
.r8-role.is-set { background: #EDE2D5; color: #705E4E; }
.r8-lines i { background: #EFE9E1; }
.r8-stamp { background: #fff; color: #705E4E; box-shadow: 0 0 0 1px #E2D6C7, 0 4px 10px hsl(30deg 22% 28% / .12); }
.r9-steps-t { margin: 10px 0 4px; font-size: 13px; font-weight: 700; color: var(--text-muted); }
.r9-steps4 li { align-items: flex-start; }
.r9-steps4 li span { display: flex; flex-direction: column; line-height: 1.35; color: var(--text-muted); font-size: 13.5px; }
.r9-steps4 em { font-style: normal; font-weight: 700; color: var(--text); font-size: 14px; }
.r8-steps b { color: #8A7765; box-shadow: inset 0 0 0 1.5px #D8C3A5; }

/* ── Motivationsschreiben: Grafik pro Schritt im Gespräch ───────────────── */
.r9-stage { display: flex; align-items: center; gap: 18px; margin: 14px 0 4px; padding: 14px 16px; border-radius: 20px; background: #F8F4EE; box-shadow: 0 0 0 1px var(--line-soft, #E7DDCF); }
.r9-stage[hidden] { display: none; }
.r9-page { flex: none; position: relative; display: flex; flex-direction: column; gap: 5px; width: 74px; height: 98px; padding: 9px 8px; box-sizing: border-box; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px #E2D6C7, 0 6px 14px hsl(30deg 22% 28% / .12); transform: rotate(-2deg); }
.r9-part { display: flex; flex-direction: column; gap: 2.5px; padding: 2px; border-radius: 4px; transition: background .3s, box-shadow .3s; }
.r9-ln { display: block; height: 3px; border-radius: 2px; background: #ECE5DC; transition: background .3s; }
.r9-p-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 4px; }
.r9-addr { display: flex; flex-direction: column; gap: 2.5px; }
.r9-addr.is-r { padding-top: 7px; }
.r9-anr { grid-column: 1 / -1; }
.r9-p-end { margin-top: auto; }
.r9-sign { display: block; width: 26px; height: 7px; margin-top: 1px; border-bottom: 1.5px solid #D9CFC3; border-radius: 0 0 50% 50%; }
.r9-part.is-done .r9-ln { background: #D8C3A5; }
.r9-part.is-cur { background: #F3EDE5; box-shadow: 0 0 0 1.5px #8A7765; }
.r9-part.is-cur .r9-ln { background: #8A7765; }
.r9-stage.is-new .r9-part.is-cur { animation: r9Pulse 1.6s ease-out 1; }
@keyframes r9Pulse { 0% { box-shadow: 0 0 0 1.5px #8A7765, 0 0 0 0 rgb(138 119 101 / .35); } 100% { box-shadow: 0 0 0 1.5px #8A7765, 0 0 0 8px rgb(138 119 101 / 0); } }
.r9-stage-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r9-stage-txt small { font-size: 12.5px; font-weight: 700; color: #8A7765; text-transform: none; }
.r9-stage-txt b { font-size: 18px; color: var(--text); }
.r9-stage-txt > span:not(.r9-stage-bar) { font-size: 14px; color: var(--text-muted); line-height: 1.4; }
.r9-stage-bar { display: flex; gap: 5px; margin: 8px 0 2px; }
.r9-stage-bar i { width: 34px; height: 6px; border-radius: 6px; background: #E6DACB; transition: background .3s; }
.r9-stage-bar i.is-done { background: #B9A58F; }
.r9-stage-bar i.is-cur { background: #8A7765; }
.r9-stage-txt em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 600px) { .r9-stage { gap: 12px; padding: 12px; } .r9-page { width: 58px; height: 78px; } .r9-stage-bar i { width: 24px; } }
@media (prefers-reduced-motion: reduce) { .r9-stage.is-new .r9-part.is-cur { animation: none; } }

/* ── Motivationsschreiben: fertige Briefe mit Vorschau ──────────────────── */
.bpx-grp.is-done span { background: #F3EDE5; color: #705E4E; }
[data-grp="is-done"] .bpx-prog-bar i { background: #8A7765; }
.r9-viewsw { margin-left: auto; display: inline-flex !important; gap: 2px; padding: 3px !important; height: auto !important; border-radius: 999px; background: #F3EDE5 !important; }
.r9-viewsw button { border: 0; background: none; padding: 4px 12px; border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.r9-viewsw button.is-on { background: #fff; color: var(--text); box-shadow: 0 1px 3px rgb(0 0 0 / .08); }
.r9-thumb { display: none; }
.r9-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px !important; }
.r9-grid .coach-session-row { display: flex !important; flex-direction: column; align-items: stretch !important; gap: 10px; padding: 12px !important; }
.r9-grid .r9-thumb { display: block; position: relative; aspect-ratio: 210 / 297; overflow: hidden; border-radius: 8px; background: #F3EDE5; }
.r9-thumb-page { position: absolute; inset: 8px; display: flex; flex-direction: column; gap: 5px; padding: 12% 11%; overflow: hidden; background: #fff; box-shadow: 0 2px 8px hsl(30deg 22% 28% / .14); font-family: Georgia, 'Times New Roman', serif; font-size: 4.2px; line-height: 1.45; color: #3A322C; text-align: left; }
.r9-thumb-p { display: block; white-space: pre-line; overflow-wrap: anywhere; }
.r9-grid .coach-session-row-main { min-width: 0; }
.r9-grid .bpx-prog { display: none; }

/* ── Lebenslauf-Editor: einfach (Bereiche statt frei) ───────────────────── */
.cvr .cvr-drop { height: auto; border-radius: 14px; background: rgb(138 119 101 / .08); box-shadow: inset 0 0 0 2px #8A7765; z-index: 4; }
.cvr .cvr-drop::after { content: attr(data-label); position: absolute; left: 50%; top: 10px; transform: translateX(-50%); padding: 4px 12px; border-radius: 999px; background: #8A7765; color: #fff; font: 600 12.5px/1.4 Inter, system-ui, sans-serif; white-space: nowrap; }
.cvr-paper .cvr-dragging { opacity: .9; box-shadow: 0 14px 30px hsl(30deg 22% 28% / .25); background: #fff; border-radius: 8px; cursor: grabbing; }
.cvr-paper section.cvd-sec[data-u] > h3 { cursor: grab; }
.cvr-paper .cvr-row { border-radius: 4px; }
.cvr-paper .cvr-row:hover { box-shadow: 0 0 0 1.5px rgb(138 119 101 / .35); }
.cvr-paper [data-u="photo"] { cursor: move; }
.cvr-guides { display: none !important; }
.cvr-top .cvr-logo { display: none; }

/* ── Vorlage importieren: «Stimmt das?» und Wahl ────────────────────────── */
.r9-read { margin: 12px 0 0; padding: 10px 14px; border-radius: 14px; background: #F8F4EE; box-shadow: 0 0 0 1px var(--line-soft, #E7DDCF); }
.r9-read summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--text); }
.r9-readlist { list-style: none; margin: 10px 0 2px; padding: 0; display: grid; gap: 6px; }
.r9-readlist li { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 13.5px; }
.r9-readlist b { color: var(--text-muted); font-weight: 600; }
.r9-readlist span { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; color: var(--text); }
.r9-sw { width: 18px; height: 18px; border-radius: 6px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .12); }
.r9-opts { display: grid; gap: 10px; margin-top: 12px; }
.r9-opt { width: 100%; text-align: left; }
.r9-opt:disabled { opacity: .5; cursor: not-allowed; }

/* ── Eignungstest: kein Blau mehr ───────────────────────────────────────── */
.mce-hero-ico { box-shadow: 0 8px 20px rgb(112 94 78 / .25); }
.mcl2-first-opt.is-rec { box-shadow: 0 6px 18px rgb(112 94 78 / .14); }
.mcu-tip-art svg > circle:first-child { fill: #F3EDE5; }
.mcu-tip-art svg [fill]:not([fill="none"]):not([fill="#fff"]):not(circle:first-child) { fill: #8A7765; }
.mcu-tip-art svg [stroke]:not([stroke="none"]) { stroke: #8A7765; }

/* ── Lernplan: ruhige Lern-Farben (matt, nicht knallig) ─────────────────── */
.mcd { --l-good: #6E9E78; --l-good-d: #557F5F; --l-mid: #D2A45E; --l-low: #CC8B7A; --l-now: #5E8C8A; --l-now-d: #476E6C; --l-fire: #DE8A5C; --l-soft: #F1ECE5; }
.mcd-dot.is-gut, .mcd-bar i.is-gut { background: var(--l-good); }
.mcd-dot.is-mittel, .mcd-bar i.is-mittel { background: var(--l-mid); }
.mcd-dot.is-noch, .mcd-bar i.is-noch { background: var(--l-low); }
.mcd-ring { background: conic-gradient(var(--l-good) calc(var(--p) * 1%), var(--l-soft) 0); }
.mcd-ring.is-goal { background: conic-gradient(var(--l-fire) calc(var(--p) * 1%), var(--l-soft) 0); }
.mcd-flame { color: #D9CFC3; }
.mcd-flame.is-on { color: var(--l-fire); }
.mcd-week i { background: var(--l-soft); box-shadow: inset 0 0 0 1.5px #E6DACB; }
.mcd-week li.is-on i { background-color: var(--l-fire); }
.mcd-week li.is-today i { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #EBC2A8; }
.mcd-node-dot { color: #A89A8B; box-shadow: inset 0 0 0 2.5px #E6DACB, 0 4px 0 #E6DACB; }
.mcd-node.is-done .mcd-node-dot { background: var(--l-good); box-shadow: 0 4px 0 var(--l-good-d); }
.mcd-node.is-now .mcd-node-dot { background: var(--l-now); box-shadow: 0 4px 0 var(--l-now-d), 0 0 0 6px rgb(94 140 138 / .18); animation-name: r9Pulse2; }
@keyframes r9Pulse2 { 50% { box-shadow: 0 4px 0 var(--l-now-d), 0 0 0 10px rgb(94 140 138 / .08); } }
.mcd-node-flag { background: var(--l-now); }
.mcd-lvl i { background: #E6DACB; }
.mcd-lvl[data-n="1"] i:nth-child(-n + 1) { background: var(--l-mid); }
.mcd-lvl[data-n="2"] i:nth-child(-n + 2) { background: var(--l-now); }
.mcd-lvl[data-n="3"] i { background: var(--l-good); }
.mcd-tips li { background: #F8F4EE; }
.mcd-hero { background: linear-gradient(135deg, #EEF4F3, #fff 70%); border-color: rgb(94 140 138 / .25); box-shadow: 0 14px 30px -22px rgb(71 110 108 / .6); }
.mcd-hero-t small { color: var(--l-now-d); }
.mcd-steps li.is-now { border-color: rgb(94 140 138 / .45); background: #F3F7F6; }
.mcd-steps li.is-now .mcd-step-n { background: var(--l-now); }
/* «Kurz gesagt» weg (Wunsch Lino 06.11.2026) */
#mc-plan-panel .mcl2-tips, #mc-plan-panel .mcl-analysis, .mcd-short h5 { display: none !important; }