/* Runde 3 (05.11.2026): Üben pro Teil, Lernplan mit drei Spalten, Auswertung, Gratis-Hinweis,
   Tipps für den Testtag (js/aptitude-ueben.js). Stellio-Farben bleiben. */

/* Lernplan: Teile in drei Spalten */
.mcu-head { margin: 22px 0 10px; }
.mcu-head h3 { margin: 0 0 4px; font-size: 20px; color: var(--text); }
.mcu-head p { margin: 0; font-size: 14.5px; color: var(--text-muted); line-height: 1.5; }
.mcu-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: start; }
.mcu-col { padding: 14px; border-radius: 22px; background: var(--card-bg, #FFFCF7); box-shadow: 0 0 0 1px var(--line-soft, #DED2C5); border-top: 5px solid var(--c, #DC2626); }
.mcu-col.is-noch { --c: #E35D5D; --t: #FDECEC; }
.mcu-col.is-mittel { --c: #E0A21B; --t: #FEF4DC; }
.mcu-col.is-gut { --c: #16A34A; --t: #E7F6EC; }
.mcu-col header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mcu-col header b { font-size: 16px; color: var(--text); }
.mcu-col header span { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--t); color: var(--text); font-weight: 700; font-size: 13px; box-sizing: border-box; }
.mcu-col > p { margin: 4px 0 10px; font-size: 13px; color: var(--text-muted); }
.mcu-col ul, .mcu-tlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mcu-none { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.mcu-tile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--tone-card, #FBF8F2); box-shadow: 0 0 0 1px var(--line-soft), inset 4px 0 0 var(--c, #E35D5D); font: inherit; text-align: left; cursor: pointer; color: var(--text); transition: transform .12s, box-shadow .12s; }
.mcu-tile:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--btn-line, #D8C3A5), inset 4px 0 0 var(--c, #E35D5D), 0 6px 14px hsl(30deg 22% 28% / .1); }
.mcu-tile.is-noch { --c: #E35D5D; } .mcu-tile.is-mittel { --c: #E0A21B; } .mcu-tile.is-gut { --c: #16A34A; } .mcu-tile.is-neu { --c: var(--line-soft); }
.mcu-tile > span:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mcu-tile small { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.mcu-tile b { font-size: 14.5px; line-height: 1.3; }
.mcu-tile em { font-style: normal; font-size: 12.5px; color: var(--text-muted); }
.mcu-lv { display: flex; gap: 3px; flex: none; }
.mcu-lv i { width: 7px; height: 16px; border-radius: 3px; background: var(--tone-inset, #ECE6DC); }
.mcu-lv i:nth-child(2) { height: 20px; } .mcu-lv i:nth-child(3) { height: 24px; }
.mcu-lv i.is-on { background: var(--c); }
.mcu-areas { margin-top: 18px; }
.mcu-areas > summary { cursor: pointer; font-weight: 600; color: var(--btn-text, #6B5440); margin-bottom: 10px; }
.mcu-resume { display: flex; align-items: center; gap: 14px; margin: 14px 0 0; padding: 14px 16px; border-radius: 20px; background: var(--tint-blue, #EAF1FE); box-shadow: 0 0 0 1px rgb(37 99 235 / .15); }
.mcu-resume > div { flex: 1; display: flex; flex-direction: column; }
.mcu-resume b { font-size: 16px; color: var(--text); }
.mcu-resume span { font-size: 13.5px; color: var(--text-muted); }
.mcu-resume-ico { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--gold, #2563EB); color: #fff; flex: none; }
.mcu-topic { margin: 14px 0; }
@media (max-width: 860px) { .mcu-cols { grid-template-columns: 1fr; } }

/* Vor dem Start */
.mcu-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgb(48 40 35 / .45); opacity: 0; transition: opacity .18s; }
.mcu-modal.is-in { opacity: 1; }
.mcu-modal-card { width: min(520px, 100%); padding: 24px; border-radius: 26px; background: var(--card-bg, #FFFCF7); box-shadow: 0 30px 70px rgb(48 40 35 / .32); box-sizing: border-box; }
.mcu-mhead { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px; }
.mcu-mhead > div { flex: 1; }
.mcu-mhead small { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.mcu-mhead h3 { margin: 2px 0 6px; font-size: 23px; color: var(--text); }
.mcu-mhead p { margin: 0; font-size: 14.5px; color: var(--text-muted); line-height: 1.5; }
.mcu-x { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--tone-inset); color: var(--text); font-size: 22px; cursor: pointer; flex: none; }
.mcu-pick { margin: 14px 0; }
.mcu-pick h4 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.mcu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mcu-chips button { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--btn-line, #D8C3A5); background: var(--card-bg); font: inherit; font-size: 14px; font-weight: 600; color: var(--btn-text, #6B5440); cursor: pointer; }
.mcu-chips button.is-on { background: var(--btn, #8A7765); border-color: var(--btn); color: #fff; }
.mcu-note { margin: 8px 0 0; font-size: 13px; color: var(--text-muted); line-height: 1.45; }
.mcu-mfoot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 20px; }

/* Auswertung pro Teil */
.mcu-res { margin: 0 0 16px; padding: 20px; border-radius: 24px; background: var(--card-bg); box-shadow: 0 0 0 1px var(--line-soft), 0 10px 26px hsl(30deg 22% 28% / .08); border-top: 6px solid var(--c); }
.mcu-res.is-gut { --c: #16A34A; --t: #E7F6EC; } .mcu-res.is-mittel { --c: #E0A21B; --t: #FEF4DC; } .mcu-res.is-noch { --c: #E35D5D; --t: #FDECEC; }
.mcu-res-top { display: flex; align-items: center; gap: 18px; }
.mcu-res-top small { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.mcu-res-top h3 { margin: 2px 0 4px; font-size: 26px; color: var(--text); }
.mcu-res-top p { margin: 0; font-size: 15px; color: var(--text-muted); }
.mcu-move { margin-top: 6px !important; display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--t); color: var(--text) !important; font-weight: 600; font-size: 13.5px !important; }
.mcu-ring { flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--tone-inset, #ECE6DC) 0); position: relative; }
.mcu-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--card-bg); }
.mcu-ring b { position: relative; font-size: 22px; color: var(--text); }
.mcu-again { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.mcu-again .mcu-chips button { padding: 6px 12px; font-size: 13px; }
.mcu-res-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 560px) { .mcu-res-top { flex-direction: column; align-items: flex-start; } }

/* Gratis-Hinweis über der Auswertung */
.mcu-free { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 14px 16px; border-radius: 20px; background: var(--tint-sun, #FEF4DC); }
.mcu-free > div { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mcu-free b { font-size: 15.5px; color: var(--text); }
.mcu-free span { font-size: 13.5px; color: var(--text-muted); line-height: 1.45; }
.mcu-free-ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: #fff; color: var(--accent-sun-icon, #D97706); flex: none; }
@media (max-width: 560px) { .mcu-free { flex-direction: column; align-items: flex-start; } }

/* Tipps für den Testtag */
.mc-tips-day.mcu-tips { padding: 22px; }
.mcu-tips-head h3 { margin: 0 0 4px; font-size: 24px; color: var(--text); }
.mcu-tips-head p { margin: 0 0 16px; font-size: 15px; color: var(--text-muted); }
.mcu-tipgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mcu-tip { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 4px; padding: 18px; border-radius: 22px; background: var(--tone-card, #FBF8F2); box-shadow: 0 0 0 1px var(--line-soft); }
.mcu-tip::after { content: ""; position: absolute; right: -22px; bottom: -26px; width: 80px; height: 80px; border-radius: 22px; background: var(--tone-inset, #ECE6DC); transform: rotate(14deg); opacity: .5; }
.mcu-tip > * { position: relative; z-index: 1; }
.mcu-tip-art { display: block; margin-bottom: 6px; }
.mcu-tip b { font-size: 17px; line-height: 1.3; color: var(--text); }
.mcu-tip p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }