/* Nutzertest (temporäres Modul): eigene Farben, gehört nicht zum Designsystem der App */
#ut.ut-scr { position: absolute; inset: 0; z-index: 70; background: #f5f0e8; color: #0a0a0a; font-family: 'Inter', system-ui, sans-serif; overflow-y: auto; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
#ut.ut-scr button { color: #0a0a0a; }
.ut-tape { height: 12px; flex: none; background: repeating-linear-gradient(-45deg, #ffd23f 0 12px, #0a0a0a 12px 24px); margin-top: env(safe-area-inset-top); }
.ut-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px 0; min-height: 44px; }
.ut-badge { font-size: 11px; font-weight: 900; letter-spacing: .18em; background: #0a0a0a; color: #ffd23f; padding: 6px 10px; }
.ut-badge.sm { font-size: 10px; letter-spacing: .16em; padding: 4px 8px; }
.ut-link { min-height: 44px; font-size: 13px; font-weight: 600; text-decoration: underline; }
.ut-link.c { align-self: center; }
.ut-eye { font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.ut-eye.dim, .ut-row .dim { color: #4a443b; }
.ut-eye.y { color: #ffd23f; }
.ut-body { padding: 24px 20px 0; display: flex; flex-direction: column; gap: 18px; flex-grow: 1; }
.ut-grow { flex-grow: 1; }
.ut-foot { padding: 16px 20px 28px; display: flex; flex-direction: column; gap: 8px; }
.ut-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ut-row.end { align-items: flex-end; }
.ut-row .r { text-align: right; display: flex; flex-direction: column; }
.ut-t24, .ut-t30, .ut-t34, .ut-t36, .ut-t44, .ut-t52, .ut-t56, .ut-t64, .ut-t72, .ut-t96, .ut-big, .ut-btn, .ut-clock { font-family: 'Bebas Neue', sans-serif; font-weight: 400; }
.ut-t24 { font-size: 24px; line-height: 1; } .ut-t30 { font-size: 30px; line-height: .95; } .ut-t34 { font-size: 34px; line-height: .95; }
.ut-t36 { font-size: 36px; line-height: 1; font-variant-numeric: tabular-nums; } .ut-t44 { font-size: 44px; line-height: .95; overflow-wrap: anywhere; }
.ut-t56 { font-size: 56px; line-height: .9; margin-top: 8px; }
.ut-t52 { font-size: 52px; line-height: .9; margin-top: 8px; } .ut-t64 { font-size: 64px; line-height: .88; margin-top: 10px; } .ut-t72 { font-size: 72px; line-height: .85; }
.ut-t96 { font-size: 96px; line-height: .85; font-variant-numeric: tabular-nums; }
.ut-big { font-size: 140px; line-height: .8; letter-spacing: -.01em; }
.ut-p13 { font-size: 13px; line-height: 1.45; } .ut-p13.soft { color: #d9d2c5; } .ut-p14 { font-size: 14px; line-height: 1.5; } .ut-p15 { font-size: 15px; line-height: 1.5; margin: 0; }
.ut-note { font-size: 12px; color: #4a443b; line-height: 1.45; } .ut-note.c { text-align: center; } .ut-note.r { text-align: right; font-size: 11px; margin-top: -6px; }
.ut-btn { min-height: 56px; width: 100%; background: #ffd23f; border: 2px solid #0a0a0a; font-size: 24px; letter-spacing: .06em; display: flex; align-items: center; justify-content: center; }
.ut-btn.big { min-height: 64px; font-size: 30px; letter-spacing: .08em; }
.ut-btn.dark { background: #0a0a0a; color: #ffd23f !important; border: 0; min-height: 48px; font-size: 21px; }
.ut-btn:disabled { opacity: .4; }
.ut-box { display: flex; flex-direction: column; gap: 6px; padding: 14px; background: #fff; border: 2px solid #0a0a0a; }
.ut-dark { background: #0a0a0a; color: #f5f0e8; padding: 12px 14px; font-size: 13px; line-height: 1.45; }
.ut-rules { display: flex; flex-direction: column; border-top: 2px solid #0a0a0a; }
.ut-rules > div { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid #d9d2c5; font-size: 14px; line-height: 1.45; }
.ut-prog { padding: 10px 20px 0; display: flex; flex-direction: column; gap: 8px; }
.ut-seg { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 3px; }
.ut-seg span { height: 6px; background: #d9d2c5; } .ut-seg .done { background: #0a0a0a; } .ut-seg .cur { background: #ffd23f; box-shadow: inset 0 0 0 1px #0a0a0a; }
.ut-res { display: flex; flex-direction: column; gap: 6px; background: #0a0a0a; color: #f5f0e8; padding: 18px; }
.ut-scale { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.ut-scale button { height: 48px; border: 2px solid #0a0a0a; font-size: 15px; font-weight: 700; padding: 0; }
.ut-scale button.ten { border-style: dashed; }
.ut-scale button.on { background: #0a0a0a; color: #ffd23f !important; }
.ut-scale-l { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.ut-scale-l span { border-top: 3px solid #d9d2c5; padding-top: 6px; color: #4a443b; } .ut-scale-l span.on { border-top-color: #0a0a0a; color: #0a0a0a; } .ut-scale-l .ten { border-top-style: dashed; }
.ut-follow { display: flex; flex-direction: column; gap: 10px; }
.ut-q { font-size: 16px; font-weight: 700; line-height: 1.35; }
.ut-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ut-chips button { min-height: 36px; padding: 0 12px; border: 2px solid #0a0a0a; font-size: 13px; font-weight: 600; }
.ut-chips button.on { background: #0a0a0a; color: #ffd23f !important; }
.ut-ta { width: 100%; padding: 12px; border: 2px solid #0a0a0a; background: #fff; color: #0a0a0a; font: inherit; font-size: 14px; line-height: 1.45; resize: none; border-radius: 0; }
.ut-opts { display: flex; flex-direction: column; gap: 8px; }
.ut-opts button { min-height: 52px; padding: 0 14px; border: 2px solid #0a0a0a; text-align: left; font-size: 15px; font-weight: 600; }
.ut-opts button.dk { border-style: dashed; }
.ut-opts button.on { background: #0a0a0a; color: #ffd23f !important; }
.ut-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; background: #0a0a0a; padding: 10px; }
.ut-strip span { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px; border: 1px solid #3a352e; color: #f5f0e8; }
.ut-strip span.past { border-style: dashed; border-color: #5a5247; color: #6b6256; }
.ut-strip span.today { border-color: #d4c4a8; }
.ut-strip span.mark { box-shadow: 0 0 0 3px #ffd23f; }
.ut-strip b { font-size: 10px; letter-spacing: .12em; } .ut-strip i { font-style: normal; font-family: 'Bebas Neue', sans-serif; font-size: 24px; line-height: 1; } .ut-strip em { font-style: normal; font-size: 10px; }
.ut-list { display: flex; flex-direction: column; border-top: 2px solid #0a0a0a; font-size: 13px; }
.ut-list > div { display: grid; grid-template-columns: 24px minmax(0, 1fr) 40px 96px; gap: 8px; align-items: center; padding: 7px 0; border-bottom: 1px solid #d9d2c5; }
.ut-list .r { text-align: right; font-variant-numeric: tabular-nums; } .ut-list .b { font-weight: 600; }
/* Profil-Einstieg */
.ut-card { background: #ffd23f; color: #0a0a0a; border: 2px solid #0a0a0a; padding: 14px; display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.ut-card .ut-meta { font-size: 12px; font-weight: 600; }
/* Während einer Aufgabe: echte App im gelben Rahmen mit Testleiste */
.phone.ut-run { border: 6px solid #ffd23f !important; }
#ut-bar { flex: none; background: #ffd23f; color: #0a0a0a; padding: 10px 8px; padding-top: max(10px, env(safe-area-inset-top)); display: flex; flex-direction: column; gap: 6px; font-family: 'Inter', system-ui, sans-serif; z-index: 40; }
.ut-bar1 { display: flex; align-items: center; gap: 10px; }
.ut-clock { font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.ut-stuck { min-height: 36px; padding: 0 10px; border: 2px solid #0a0a0a; font-size: 12px; font-weight: 700; color: #0a0a0a; }
.ut-task { font-size: 13px; font-weight: 600; line-height: 1.35; }
.phone.ut-run .fb-tri, .phone.ut-run .upd { display: none; }
@media (max-width: 760px) { .phone.ut-run { border-width: 0 6px 6px !important; } }
.ut-ta.free { padding: 14px; font-size: 15px; line-height: 1.5; min-height: 200px; }
.ut-mic { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; }
.ut-mic svg { flex: none; margin-top: 1px; }
/* Auswertung (Admin) */
.ut-admin { gap: 16px; padding-bottom: 28px; }
.ut-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
.ut-kpi > div { background: #0a0a0a; color: #f5f0e8; padding: 10px; min-width: 0; }
.ut-kpi span { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #ffd23f; }
.ut-kpi b { display: block; font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: 34px; line-height: 1; overflow-wrap: anywhere; }
.ut-tbl { display: flex; flex-direction: column; }
.ut-tbl .h, .ut-tbl .r { display: grid; grid-template-columns: minmax(0, 1fr) 46px 40px 40px; gap: 8px; align-items: center; }
.ut-tbl .h { font-size: 10px; font-weight: 700; letter-spacing: .12em; color: #4a443b; padding-bottom: 6px; border-bottom: 2px solid #0a0a0a; }
.ut-tbl .h span:not(:first-child), .ut-tbl .r > span:not(.n) { text-align: right; }
.ut-tbl .r { width: 100%; text-align: left; padding: 8px 0; border-bottom: 1px solid #d9d2c5; font-size: 13px; min-height: 44px; }
.ut-tbl .n { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ut-tbl .r.flag .t { font-weight: 700; }
.ut-tbl .bar { display: flex; align-items: center; gap: 6px; }
.ut-tbl .bar i { display: block; height: 8px; background: #4a443b; max-width: 150px; }
.ut-tbl .r.flag .bar i { background: #0a0a0a; }
.ut-tbl .bar em { font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; }
.ut-tbl .hi, .ut-qs .hi { font-weight: 900; background: #ffd23f; padding: 2px 0; }
.ut-detail { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 10px; border-bottom: 1px solid #d9d2c5; }
.ut-qs { display: flex; flex-direction: column; border-top: 2px solid #0a0a0a; font-size: 13px; }
.ut-qs > div { display: flex; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid #d9d2c5; }
.ut-qs > div b { flex: none; } .ut-qs .ut-note { display: block; border: 0; padding: 4px 0 8px; }