/* Ernährung (#/ernaehrung) · Präfix nu- */
:where(.nu-page, .nu-sheet) svg:where([class=""]) { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.nu-page, .nu-sheet { --nu: #5fcf8d; --nu-2: #38d9b0; --nu-p: #7b93ff; --nu-c: #ffc15e; --nu-f: #ff8a6a; --nu-grad: linear-gradient(135deg, #38d9b0, #5fcf8d 55%, #c6f36b); --nu-glow: 0 12px 34px -14px rgba(95, 207, 141, 0.75); }
.nu-page { display: flex; flex-direction: column; gap: 16px; }
.nu-page .eyebrow.c, .nu-sheet .eyebrow.c { color: var(--nu); }
.nu-page .icon-bubble.c { color: var(--nu); background: rgba(95, 207, 141, 0.12); }
.nu-page .btn.primary, .nu-sheet .btn.primary { background: var(--nu-grad); color: #062a1b; box-shadow: var(--nu-glow); border: 0; }
.nu-page .btn.primary:disabled { opacity: 0.4; box-shadow: none; }
.nu-page .card { transition: transform 0.25s var(--ease-out), border-color 0.25s, box-shadow 0.25s; }
.nu-page a.card, .nu-page button.card { color: inherit; text-decoration: none; text-align: left; font: inherit; cursor: pointer; width: 100%; }
@media (hover: hover) { .nu-page a.card:hover, .nu-page button.card:hover { transform: translateY(-2px); border-color: rgba(95, 207, 141, 0.38); } }
.nu-page a.card:active, .nu-page button.card:active { transform: scale(0.985); }
.nu-pro { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 99px; font-size: 11px; font-weight: 800; color: #2a1c05; background: var(--gold-grad, linear-gradient(135deg, #f3d27a, #c99a3b)); }
.nu-pro svg { width: 13px; height: 13px; }
.nu-warn { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: rgba(255, 193, 94, 0.1); border: 1px solid rgba(255, 193, 94, 0.3); color: var(--text); font-size: 14px; line-height: 1.45; margin: 0; }
.nu-warn svg { width: 18px; height: 18px; flex: none; color: var(--warn); margin-top: 1px; }
.nu-foot { text-align: center; margin: 4px 0 20px; }
.nu-lbl { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }
@keyframes nu-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes nu-spin { to { transform: rotate(360deg); } }
@keyframes nu-pulse { 50% { opacity: 0.45; } }
@keyframes nu-draw { from { stroke-dashoffset: var(--c0); } }

/* ---------- Einstieg ---------- */
.nu-hero { position: relative; overflow: hidden; padding: 34px 26px 28px; border-radius: 28px; border: 1px solid rgba(95, 207, 141, 0.24); background: radial-gradient(110% 90% at 100% 0%, rgba(95, 207, 141, 0.24), transparent 60%), radial-gradient(80% 70% at 0% 100%, rgba(56, 217, 176, 0.14), transparent 60%), var(--surface-solid); display: flex; flex-direction: column; gap: 16px; }
.nu-hero::after { content: ''; position: absolute; right: -70px; top: -70px; width: 260px; height: 260px; border-radius: 50%; border: 22px solid rgba(95, 207, 141, 0.1); border-top-color: rgba(95, 207, 141, 0.5); animation: nu-spin 26s linear infinite; pointer-events: none; }
.nu-hero > * { position: relative; z-index: 1; }
.nu-hero h1 em { font-style: normal; background: var(--nu-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nu-hero .btn { align-self: flex-start; }
.nu-pts { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.nu-pts > div { display: grid; grid-template-columns: auto 1fr; gap: 3px 12px; align-items: center; padding: 14px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); animation: nu-up 0.6s var(--ease-out) backwards; }
.nu-pts > div:nth-child(2) { animation-delay: 0.08s; } .nu-pts > div:nth-child(3) { animation-delay: 0.16s; } .nu-pts > div:nth-child(4) { animation-delay: 0.24s; }
.nu-pts .icon-bubble { grid-row: span 2; }
.nu-pts small { color: var(--text-2); line-height: 1.4; }

/* ---------- Kurztest ---------- */
.nu-wiz { padding: 22px; display: flex; flex-direction: column; gap: 14px; max-width: 760px; width: 100%; margin: 0 auto; animation: nu-up 0.45s var(--ease-out); }
.nu-steps { display: flex; margin-bottom: 6px; }
.nu-steps span { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; color: var(--muted); }
.nu-steps span::before { content: ''; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--line-2); }
.nu-steps span:first-child::before { display: none; }
.nu-steps span:is(.on, .done)::before { background: var(--nu); }
.nu-steps i { position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; font-weight: 800; font-size: 14px; background: var(--surface-solid); border: 2px solid var(--line-2); transition: all 0.3s var(--ease-out); }
.nu-steps i svg { width: 15px; height: 15px; }
.nu-steps .on i { border-color: var(--nu); color: var(--nu); box-shadow: 0 0 0 5px rgba(95, 207, 141, 0.15); }
.nu-steps .done i { background: var(--nu-grad); border-color: transparent; color: #062a1b; }
.nu-steps small { font-size: 11px; font-weight: 700; }
.nu-steps :is(.on, .done) small { color: var(--text); }
.nu-wiz h2 { margin: 4px 0 0; }
.nu-wiz > p.muted { margin: -6px 0 0; }
.nu-opts { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.nu-opts.two { grid-template-columns: repeat(2, 1fr); }
.nu-opts.four { grid-template-columns: repeat(4, 1fr); }
.nu-opts.row7 { grid-template-columns: repeat(7, 1fr); }
.nu-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 14px 15px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: all 0.2s var(--ease-out); }
.nu-opts.row7 .nu-opt, .nu-opts.four .nu-opt { align-items: center; padding: 14px 4px; }
.nu-opt b { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.nu-opt b svg { width: 18px; height: 18px; color: var(--nu); }
.nu-opt small { color: var(--text-2); font-size: 13px; line-height: 1.35; }
@media (hover: hover) { .nu-opt:hover { border-color: rgba(95, 207, 141, 0.45); } }
.nu-opt:active { transform: scale(0.97); }
.nu-opt.on { border-color: var(--nu); background: rgba(95, 207, 141, 0.12); box-shadow: inset 0 0 0 1px var(--nu), var(--nu-glow); }
.nu-fields { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.nu-fields label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 8px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.nu-fields label > .input { grid-column: 1; grid-row: 2; font-size: 18px; font-weight: 700; }
.nu-fields label > span { grid-column: 2; grid-row: 2; color: var(--muted); font-weight: 600; }
.nu-fields label.w { grid-column: 1 / -1; }
.nu-check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text-2); }
.nu-check input { width: 20px; height: 20px; accent-color: var(--nu); }
.nu-wiz-nav { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.nu-res { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 22px; background: radial-gradient(90% 120% at 0% 0%, rgba(95, 207, 141, 0.2), transparent 60%), var(--surface); border: 1px solid rgba(95, 207, 141, 0.3); animation: nu-up 0.5s var(--ease-out); }
.nu-res-main small { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nu); }
.nu-res-main b { display: block; font-size: clamp(44px, 9vw, 64px); line-height: 1; letter-spacing: -0.03em; margin: 4px 0; }
.nu-res-main b span { font-size: 20px; color: var(--text-2); letter-spacing: 0; }
.nu-res-main em { font-style: normal; color: var(--text-2); }
.nu-res-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nu-res-row div { padding: 10px 12px; border-radius: 14px; background: var(--surface-2); }
.nu-res-row small { display: block; font-size: 12px; color: var(--muted); }
.nu-res-row b { font-size: 17px; }
.nu-res-mac { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nu-res-mac span { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 14px; font-size: 12px; color: var(--text-2); border-left: 4px solid; background: var(--surface-2); }
.nu-res-mac span b { font-size: 18px; color: var(--text); }
.nu-res-mac .p { border-color: var(--nu-p); } .nu-res-mac .c { border-color: var(--nu-c); } .nu-res-mac .f { border-color: var(--nu-f); }

/* ---------- Heute ---------- */
.nu-head { align-items: flex-end; }
.nu-day { display: flex; align-items: center; gap: 8px; }
.nu-day h1 { margin: 0; min-width: 4ch; }
.nu-day button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); cursor: pointer; }
.nu-day button:disabled { opacity: 0.3; cursor: default; }
.nu-day button svg { width: 16px; height: 16px; }
.btn.sm { padding: 8px 12px; font-size: 13px; }
.nu-grid { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.nu-top { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 18px 26px; align-items: center; padding: 22px; background: radial-gradient(70% 140% at 0% 50%, rgba(95, 207, 141, 0.16), transparent 70%), var(--surface); }
.nu-ringbox { position: relative; width: 168px; height: 168px; }
.nu-ring { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.nu-ring circle { fill: none; stroke-linecap: round; }
.nu-ring .bg { stroke: rgba(148, 170, 255, 0.12); }
.nu-ring .v { stroke: url(#nu-g) var(--nu); stroke: var(--nu); filter: drop-shadow(0 0 8px rgba(95, 207, 141, 0.55)); transition: stroke-dashoffset 1s var(--ease-out); }
.nu-ring.over .v { stroke: var(--nu-f); filter: drop-shadow(0 0 8px rgba(255, 138, 106, 0.55)); }
.nu-ring-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.nu-ring-in b { font-size: 36px; letter-spacing: -0.03em; line-height: 1; }
.nu-ring-in small { font-size: 13px; color: var(--text-2); margin-top: 4px; }
.nu-macs { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nu-kc { display: flex; gap: 18px; font-size: 13px; color: var(--muted); }
.nu-kc b { color: var(--text); font-size: 15px; margin-left: 4px; }
.nu-mac { font-size: 14px; }
.nu-mac b { font-size: 15px; } .nu-mac b small { color: var(--muted); font-weight: 600; }
.nu-mac i { display: block; height: 9px; margin-top: 6px; border-radius: 99px; background: rgba(148, 170, 255, 0.1); overflow: hidden; }
.nu-mac em { display: block; height: 100%; border-radius: inherit; animation: nu-grow 0.9s var(--ease-out) backwards; }
@keyframes nu-grow { from { width: 0 !important; } }
.nu-mac.p em { background: linear-gradient(90deg, #5b7cff, var(--nu-p)); box-shadow: 0 0 12px rgba(123, 147, 255, 0.6); }
.nu-mac.c em { background: linear-gradient(90deg, #f0a93a, var(--nu-c)); }
.nu-mac.f em { background: linear-gradient(90deg, #ff6b7a, var(--nu-f)); }
.nu-quick { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.nu-q { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 6px 12px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface-2); color: var(--text); font: inherit; cursor: pointer; transition: transform 0.2s var(--ease-out), border-color 0.2s; }
.nu-q svg { width: 24px; height: 24px; color: var(--nu); margin-bottom: 4px; }
.nu-q b { font-size: 14px; } .nu-q small { font-size: 11.5px; color: var(--muted); }
@media (hover: hover) { .nu-q:hover { transform: translateY(-2px); border-color: rgba(95, 207, 141, 0.45); } }
.nu-q:active { transform: scale(0.95); }
.nu-q.photo { background: var(--nu-grad); border: 0; color: #062a1b; box-shadow: var(--nu-glow); }
.nu-q.photo svg { color: #062a1b; } .nu-q.photo small { color: rgba(6, 42, 27, 0.75); }
.nu-q.photo.locked { background: linear-gradient(135deg, rgba(243, 210, 122, 0.22), rgba(201, 154, 59, 0.12)); border: 1px solid rgba(243, 210, 122, 0.4); color: var(--text); box-shadow: none; }
.nu-q.photo.locked svg { color: #f3d27a; } .nu-q.photo.locked small { color: #f3d27a; }
.nu-meals { display: flex; flex-direction: column; gap: 10px; }
.nu-meal { padding: 14px 16px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); animation: nu-up 0.5s var(--ease-out) backwards; }
.nu-meal:nth-child(2) { animation-delay: 0.05s; } .nu-meal:nth-child(3) { animation-delay: 0.1s; } .nu-meal:nth-child(4) { animation-delay: 0.15s; }
.nu-meal-h { display: flex; align-items: center; gap: 9px; }
.nu-meal-h svg { width: 19px; height: 19px; color: var(--nu); }
.nu-meal-h small { color: var(--muted); font-weight: 600; }
.nu-add { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(95, 207, 141, 0.14); color: var(--nu); cursor: pointer; transition: transform 0.2s var(--ease-out), background 0.2s; }
.nu-add svg { width: 18px; height: 18px; }
.nu-add:hover { background: rgba(95, 207, 141, 0.26); } .nu-add:active { transform: scale(0.9); }
.nu-meal ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; }
.nu-meal li { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-top: 1px solid var(--line); cursor: pointer; border-radius: 8px; }
.nu-meal li:hover { background: var(--surface-2); }
.nu-meal li b { display: block; font-size: 14.5px; font-weight: 650; }
.nu-meal li small { color: var(--muted); font-size: 12.5px; }
.nu-meal li em { font-style: normal; font-weight: 800; font-variant-numeric: tabular-nums; }
.nu-week { display: flex; flex-direction: column; gap: 12px; }
.nu-bars { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 120px; padding-bottom: 18px; }
.nu-bars.big { height: 200px; }
.nu-bars.dense { gap: 2px; padding-bottom: 0; }
.nu-bars span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.nu-bars i { width: 100%; max-width: 34px; border-radius: 8px 8px 4px 4px; background: rgba(123, 147, 255, 0.45); animation: nu-rise 0.8s var(--ease-out) backwards; transform-origin: bottom; }
.nu-bars span:nth-child(2) i { animation-delay: 0.04s; } .nu-bars span:nth-child(3) i { animation-delay: 0.08s; } .nu-bars span:nth-child(4) i { animation-delay: 0.12s; } .nu-bars span:nth-child(5) i { animation-delay: 0.16s; } .nu-bars span:nth-child(6) i { animation-delay: 0.2s; } .nu-bars span:nth-child(7) i { animation-delay: 0.24s; }
@keyframes nu-rise { from { transform: scaleY(0); } }
.nu-bars span.ok i { background: var(--nu-grad); box-shadow: 0 0 14px rgba(95, 207, 141, 0.45); }
.nu-bars span.hi i { background: linear-gradient(180deg, var(--nu-f), rgba(255, 138, 106, 0.5)); }
.nu-bars span.sel i { outline: 2px solid var(--text); outline-offset: 2px; }
.nu-bars small { position: absolute; bottom: -18px; font-size: 11px; color: var(--muted); font-weight: 700; }
.nu-bars { --pb: 18px; }
.nu-bars em { position: absolute; left: 0; right: 0; height: 0; bottom: calc(var(--pb) + (100% - var(--pb)) * var(--r, 0.8)); border-top: 2px dashed rgba(234, 240, 255, 0.45); pointer-events: none; }
.nu-bars.dense { --pb: 0px; }
.nu-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nu-kpis span { display: flex; flex-direction: column; padding: 10px; border-radius: 14px; background: var(--surface-2); font-size: 12px; color: var(--muted); }
.nu-kpis b { font-size: 19px; color: var(--text); font-variant-numeric: tabular-nums; }
.nu-tdee .nu-big { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; margin: 6px 0 4px; }
.nu-tdee .nu-big small { font-size: 15px; color: var(--text-2); font-weight: 600; letter-spacing: 0; }
.pill.ok { color: var(--ok); border-color: rgba(61, 220, 151, 0.35); }
.nu-learn span { display: block; height: 8px; border-radius: 99px; background: rgba(148, 170, 255, 0.1); overflow: hidden; margin: 8px 0 6px; }
.nu-learn i { display: block; height: 100%; background: var(--nu-grad); border-radius: inherit; animation: nu-grow 1s var(--ease-out) backwards; }
.nu-learn small { font-size: 12.5px; color: var(--muted); }
.nu-body-link, .nu-lena { display: flex; align-items: center; gap: 12px; }
.nu-body-link > svg, .nu-lena > svg { width: 18px; height: 18px; color: var(--muted); }
.nu-lena { background: radial-gradient(90% 140% at 0% 50%, rgba(95, 207, 141, 0.18), transparent 70%), var(--surface); border: 1px solid rgba(95, 207, 141, 0.3); }
.nu-lena img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px var(--nu); }
.nu-lena b, .nu-body-link b { display: block; }
.nu-up { border: 1px solid rgba(243, 210, 122, 0.35); background: radial-gradient(100% 120% at 100% 0%, rgba(243, 210, 122, 0.14), transparent 60%), var(--surface); display: flex; flex-direction: column; gap: 6px; }
.nu-up > b { font-size: 20px; }
.nu-up p { margin: 0 0 6px; }
.nu-up .btn { align-self: flex-start; }

/* ---------- Auswertung & Körper ---------- */
.seg { display: inline-flex; padding: 4px; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--line); gap: 2px; }
.seg button { border: 0; background: none; color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; padding: 8px 14px; border-radius: 99px; cursor: pointer; }
.seg button.on { background: var(--nu-grad, var(--grad)); color: #062a1b; }
.nu-kpi4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.nu-kpi4 .card { display: flex; flex-direction: column; gap: 2px; padding: 16px; animation: nu-up 0.5s var(--ease-out) backwards; }
.nu-kpi4 .card:nth-child(2) { animation-delay: 0.05s; } .nu-kpi4 .card:nth-child(3) { animation-delay: 0.1s; } .nu-kpi4 .card:nth-child(4) { animation-delay: 0.15s; }
.nu-kpi4 small { font-size: 12px; color: var(--muted); font-weight: 700; }
.nu-kpi4 b { font-size: 28px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.nu-kpi4 b em { font-style: normal; font-size: 15px; color: var(--muted); }
.nu-kpi4 span { font-size: 12.5px; color: var(--text-2); }
.nu-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.nu-grid2 .card { display: flex; flex-direction: column; gap: 10px; }
.nu-page svg.nu-wchart { width: 100%; height: 170px; overflow: visible; }
.nu-wchart polyline { fill: none; stroke: var(--nu); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 6px rgba(95, 207, 141, 0.6)); vector-effect: non-scaling-stroke; }
.nu-wchart path { stroke: var(--nu-p); stroke-width: 8; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.nu-wlist { list-style: none; margin: 0; padding: 0; }
.nu-wlist li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 14px; }
.nu-wlist li span { flex: 1; color: var(--text-2); }
.nu-wlist li small { color: var(--muted); }
.nu-wlist li button { border: 0; background: none; color: var(--faint); cursor: pointer; padding: 4px; }
.nu-wlist li button svg { width: 14px; height: 14px; }
.nu-bf b { display: block; font-size: 40px; letter-spacing: -0.03em; background: var(--nu-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nu-bf small { color: var(--text-2); }
.nu-bodyfoto.locked { border: 1px solid rgba(243, 210, 122, 0.3); }
.nu-bodyfoto .btn { align-self: flex-start; }

/* ---------- Pop-ups ---------- */
.nu-sheet { display: flex; flex-direction: column; gap: 12px; }
.nu-sheet h2 { margin: 0; }
.nu-mealsel { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.nu-mealsel button { flex: none; padding: 8px 13px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nu-mealsel button.on { background: rgba(95, 207, 141, 0.16); border-color: var(--nu); color: var(--text); }
.nu-tabs { align-self: stretch; } .nu-tabs button { flex: 1; }
.nu-res-list { display: flex; flex-direction: column; gap: 6px; max-height: 46vh; overflow-y: auto; }
.nu-food { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 12px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font: inherit; text-align: left; cursor: pointer; animation: nu-up 0.3s var(--ease-out) backwards; }
.nu-food:hover { border-color: rgba(95, 207, 141, 0.45); }
.nu-food b { display: block; font-size: 14.5px; } .nu-food small { color: var(--muted); font-size: 12.5px; }
.nu-food > svg { width: 18px; height: 18px; color: var(--nu); flex: none; }
.nu-load { animation: nu-pulse 1.4s infinite; } .nu-load svg { width: 13px; height: 13px; vertical-align: -2px; }
.nu-back { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; color: var(--text-2); font: inherit; font-size: 14px; cursor: pointer; padding: 0; }
.nu-back svg { width: 16px; height: 16px; }
.nu-por { display: flex; flex-wrap: wrap; gap: 8px; }
.nu-por button { display: flex; flex-direction: column; align-items: flex-start; padding: 9px 13px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; }
.nu-por button small { font-weight: 600; color: var(--muted); font-size: 12px; }
.nu-por button:active { transform: scale(0.96); }
.nu-weigh { display: flex; align-items: center; gap: 10px; justify-content: center; }
.nu-weigh button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--surface-2); color: var(--text); font-size: 24px; cursor: pointer; }
.nu-weigh input { width: 140px; text-align: center; font-size: 30px; font-weight: 800; }
.nu-weigh span { color: var(--muted); font-weight: 700; }
.nu-calc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; padding: 14px 16px; border-radius: 16px; background: rgba(95, 207, 141, 0.1); border: 1px solid rgba(95, 207, 141, 0.25); }
.nu-calc b { font-size: 24px; } .nu-calc span { color: var(--text-2); font-size: 14px; }
.nu-cam { position: relative; border-radius: 20px; overflow: hidden; background: #000; aspect-ratio: 4 / 3; }
.nu-cam video { width: 100%; height: 100%; object-fit: cover; }
.nu-cam i { position: absolute; inset: 28% 12%; border: 2px solid var(--nu); border-radius: 14px; box-shadow: 0 0 0 999px rgba(0, 0, 0, 0.35); }
.nu-cam i::after { content: ''; position: absolute; left: 6%; right: 6%; top: 50%; height: 2px; background: var(--nu); box-shadow: 0 0 12px var(--nu); animation: nu-pulse 1.2s infinite; }
.nu-cam p { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px; text-align: center; background: rgba(0, 0, 0, 0.55); color: #fff; }
.nu-shot { width: 100%; max-height: 240px; object-fit: cover; border-radius: 20px; }
.nu-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.nu-shots img { width: 100%; height: 200px; object-fit: cover; border-radius: 16px; }
.nu-think { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--nu); animation: nu-pulse 1.4s infinite; }
.nu-think svg { width: 20px; height: 20px; animation: nu-spin 2.4s linear infinite; }
.nu-pos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nu-pos li { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); animation: nu-up 0.4s var(--ease-out) backwards; }
.nu-pos li:nth-child(2) { animation-delay: 0.06s; } .nu-pos li:nth-child(3) { animation-delay: 0.12s; } .nu-pos li:nth-child(4) { animation-delay: 0.18s; } .nu-pos li:nth-child(5) { animation-delay: 0.24s; }
.nu-pos li.off { opacity: 0.45; }
.nu-pos label { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nu-pos label input { width: 18px; height: 18px; accent-color: var(--nu); flex: none; }
.nu-pos b { font-size: 14px; font-weight: 650; }
.nu-pg { display: flex; align-items: center; gap: 4px; color: var(--muted); font-size: 13px; }
.nu-pg input { width: 64px; padding: 6px 8px; text-align: right; }
.nu-pos em { font-style: normal; font-weight: 800; min-width: 44px; text-align: right; }
.nu-ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nu-ul li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; }
.nu-ul svg { width: 18px; height: 18px; color: #f3d27a; flex: none; margin-top: 2px; }

/* ---------- Startkachel ---------- */
.ht.home-food img { object-position: center 20%; }

/* ---------- Handy ---------- */
@media (max-width: 860px) {
  .nu-grid { grid-template-columns: 1fr; }
  .nu-top { grid-template-columns: 1fr; justify-items: center; padding: 18px; }
  .nu-macs, .nu-quick { width: 100%; justify-self: stretch; }
  .nu-kc { justify-content: center; }
  .nu-quick { gap: 8px; }
  .nu-q { padding: 12px 4px 10px; }
  .nu-kpi4 { grid-template-columns: repeat(2, 1fr); }
  .nu-head { flex-wrap: nowrap; align-items: flex-end; gap: 10px; }
  .nu-hero { padding: 26px 18px 22px; }
}
@media (max-width: 420px) { .nu-opts.four { grid-template-columns: repeat(2, 1fr); } .nu-opts.row7 { gap: 6px; } .nu-ringbox { width: 150px; height: 150px; } }
@media (prefers-reduced-motion: reduce) { .nu-page *, .nu-sheet * { animation: none !important; transition: none !important; } }
:root[data-theme='light'] .nu-bars em { border-top-color: rgba(10, 20, 50, 0.35); }

/* ---------- Profi-Modus ---------- */
.nu-headbtns { gap: 8px; }
.nu-profi-line { display: flex; flex-wrap: wrap; gap: 6px; }
.nu-profi-line span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 700; color: var(--text-2); background: var(--surface-2); border: 1px solid var(--line); }
.nu-profi-line span.on { color: var(--nu); border-color: rgba(95, 207, 141, 0.4); }
.nu-profi-line svg { width: 13px; height: 13px; }
.nu-ppm { padding: 2px 8px; border-radius: 99px; background: rgba(123, 147, 255, 0.14); color: var(--nu-p) !important; }
.nu-ppm.ok { background: rgba(95, 207, 141, 0.16); color: var(--nu) !important; }
.nu-sw { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); cursor: pointer; position: relative; }
.nu-sw b { display: block; font-size: 15px; } .nu-sw small { color: var(--muted); font-size: 12.5px; }
.nu-sw input { position: absolute; opacity: 0; pointer-events: none; }
.nu-sw i { flex: none; width: 46px; height: 28px; border-radius: 99px; background: var(--line-2); position: relative; transition: background 0.25s; }
.nu-sw i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.25s var(--ease-out); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); }
.nu-sw input:checked + i { background: var(--nu); }
.nu-sw input:checked + i::after { transform: translateX(18px); }
.nu-sw input:focus-visible + i { outline: 2px solid var(--nu); outline-offset: 2px; }
.nu-cyc { display: flex; flex-direction: column; gap: 10px; }
.nu-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.nu-wd button { padding: 10px 0; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text-2); font: inherit; font-weight: 800; cursor: pointer; }
.nu-wd button.on { background: var(--nu-grad); color: #062a1b; border-color: transparent; }
@media (max-width: 520px) {
  .nu-headbtns .btn { font-size: 0; gap: 0; width: 40px; height: 40px; padding: 0; justify-content: center; border-radius: 50%; }
  .nu-headbtns .btn svg { width: 18px; height: 18px; }
  .nu-day h1 { font-size: 30px; }
  .nu-q { padding: 12px 2px 10px; border-radius: 16px; }
  .nu-q small { display: none; }
  .nu-q b { font-size: 13px; }
  .nu-q svg { width: 22px; height: 22px; }
  .nu-ringbox { width: 140px; height: 140px; }
  .nu-ring-in b { font-size: 30px; }
  .nu-top { gap: 14px; }
}
.nu-photo-big { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border-radius: 18px; border: 0; background: var(--nu-grad); color: #062a1b; font: inherit; text-align: left; cursor: pointer; box-shadow: var(--nu-glow); }
.nu-photo-big > svg:first-child { width: 26px; height: 26px; }
.nu-photo-big > span:not(.nu-pro) { flex: 1; } .nu-photo-big b { display: block; font-size: 16px; } .nu-photo-big small { font-size: 12.5px; opacity: 0.8; }
.nu-photo-big.locked { background: linear-gradient(135deg, rgba(243, 210, 122, 0.2), rgba(201, 154, 59, 0.1)); border: 1px solid rgba(243, 210, 122, 0.4); color: var(--text); box-shadow: none; }
.nu-photo-big.locked > svg:first-child { color: #f3d27a; }
.nu-photo-big:active { transform: scale(0.98); }

/* ---------- Training & Erholung ---------- */
.nu-tpl { display: flex; flex-wrap: wrap; gap: 8px; }
.nu-tpl button { padding: 9px 14px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: all 0.2s var(--ease-out); }
.nu-tpl button:hover { border-color: var(--nu); } .nu-tpl button:active { transform: scale(0.95); background: rgba(95, 207, 141, 0.15); }
.nu-week-ed { display: flex; flex-direction: column; gap: 6px; }
.nu-wrow { display: grid; grid-template-columns: 92px 1fr auto auto; align-items: center; gap: 10px; padding: 9px 10px 9px 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.nu-wrow.tr { border-color: rgba(95, 207, 141, 0.3); background: linear-gradient(90deg, rgba(95, 207, 141, 0.09), transparent 60%), var(--surface); }
.nu-wrow > b { font-size: 14px; }
.nu-wrow > em { font-style: normal; font-weight: 800; color: var(--nu); font-size: 13px; white-space: nowrap; }
.nu-acts { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.nu-acts.col { flex-direction: column; }
.nu-act { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; border: 1px solid rgba(95, 207, 141, 0.35); background: rgba(95, 207, 141, 0.1); color: var(--text); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.nu-act svg { width: 14px; height: 14px; color: var(--nu); }
.nu-act svg:last-child { color: var(--muted); width: 12px; height: 12px; }
.nu-act em { font-style: normal; color: var(--nu); margin-left: auto; }
.nu-acts.col .nu-act { width: 100%; padding: 11px 14px; font-size: 14px; border-radius: 14px; }
.nu-rest { font-size: 13px; color: var(--muted); }
.nu-add.sm { width: 30px; height: 30px; } .nu-add.sm svg { width: 15px; height: 15px; }
.nu-sports { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.nu-sports button { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--surface); color: var(--text); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; transition: all 0.2s var(--ease-out); }
.nu-sports button svg { width: 24px; height: 24px; color: var(--nu); }
.nu-sports button:hover { border-color: var(--nu); transform: translateY(-2px); } .nu-sports button:active { transform: scale(0.96); }
.nu-combo { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 18px; background: radial-gradient(100% 140% at 0% 0%, rgba(95, 207, 141, 0.18), transparent 60%), var(--surface); border: 1px solid rgba(95, 207, 141, 0.35); animation: nu-up 0.4s var(--ease-out); }
.nu-combo > svg { width: 26px; height: 26px; color: var(--nu); flex: none; }
.nu-combo b { display: block; font-size: 16px; margin-bottom: 3px; } .nu-combo span { font-size: 13.5px; color: var(--text-2); line-height: 1.45; }
.nu-wkbars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; height: 120px; align-items: end; }
.nu-wkbars span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.nu-wkbars i { width: 100%; max-width: 36px; border-radius: 8px 8px 4px 4px; background: rgba(123, 147, 255, 0.4); animation: nu-rise 0.8s var(--ease-out) backwards; transform-origin: bottom; }
.nu-wkbars .tr i { background: var(--nu-grad); box-shadow: 0 0 14px rgba(95, 207, 141, 0.4); }
.nu-wkbars b { font-size: 11px; font-variant-numeric: tabular-nums; } .nu-wkbars small { font-size: 11px; color: var(--muted); font-weight: 700; }
.nu-train { display: flex; flex-direction: column; gap: 12px; }
.nu-train.on { border-color: rgba(95, 207, 141, 0.35); background: radial-gradient(120% 100% at 100% 0%, rgba(95, 207, 141, 0.14), transparent 60%), var(--surface); }
.nu-train .h3 { display: flex; align-items: center; gap: 8px; } .nu-train .h3 svg { width: 20px; height: 20px; color: var(--nu); }
.nu-tlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nu-tlist li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); font-weight: 650; font-size: 14px; }
.nu-tlist li svg { width: 18px; height: 18px; color: var(--nu); } .nu-tlist li span { flex: 1; } .nu-tlist li em { font-style: normal; color: var(--nu); font-weight: 800; font-size: 13px; }
.nu-energy { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nu-energy span { padding: 10px; border-radius: 14px; background: var(--surface-2); } .nu-energy small { display: block; font-size: 11.5px; color: var(--muted); } .nu-energy b { font-size: 18px; font-variant-numeric: tabular-nums; }
.nu-hint { display: flex; gap: 8px; margin: 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 193, 94, 0.1); border: 1px solid rgba(255, 193, 94, 0.25); font-size: 13px; line-height: 1.45; }
.nu-hint svg { width: 16px; height: 16px; color: var(--warn); flex: none; margin-top: 2px; }
.nu-load { padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border-left: 4px solid var(--c, var(--nu)); }
.nu-load b { font-size: 14.5px; color: var(--c); } .nu-load small { color: var(--muted); font-size: 12px; }
.nu-load i { position: relative; display: block; height: 8px; margin: 10px 0 8px; border-radius: 99px; background: linear-gradient(90deg, #7b93ff 0 35%, #5fcf8d 35% 62%, #ffc15e 62% 75%, #ff6b7a 75%); opacity: 0.85; }
.nu-load i em { position: absolute; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--c), 0 2px 8px rgba(0, 0, 0, 0.4); transition: left 0.8s var(--ease-out); }
.nu-load p { margin: 0; color: var(--text-2); line-height: 1.45; }
.nu-load.gruen { --c: #5fcf8d; } .nu-load.gelb { --c: #ffc15e; } .nu-load.rot { --c: #ff6b7a; } .nu-load.blau, .nu-load.frisch { --c: #7b93ff; }
.nu-sleep { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: var(--nu-p); }
.nu-sleep svg { width: 14px; height: 14px; }
.nu-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--nu); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; padding: 0; }
.nu-link svg { width: 15px; height: 15px; }
.nu-2btn { gap: 8px; } .nu-2btn .btn { flex: 1; }
@media (max-width: 520px) { .nu-wrow { grid-template-columns: 1fr auto auto; } .nu-wrow > b { grid-column: 1 / -1; font-size: 13px; color: var(--text-2); } .nu-wrow .nu-acts { grid-column: 1; } }
@media (max-width: 520px) {
  .nu-res { padding: 14px; }
  .nu-res-row, .nu-res-mac { gap: 6px; }
  .nu-res-row div, .nu-res-mac span { padding: 9px 9px; }
  .nu-res-row small { font-size: 11px; } .nu-res-row b, .nu-res-mac span b { font-size: 15px; }
  .nu-res-mac span { font-size: 11px; border-left-width: 3px; }
  .nu-wkbars b { font-size: 9.5px; }
  .nu-energy b { font-size: 16px; }
}
/* Handy: Training direkt unter dem Ring, dann Mahlzeiten, dann der Rest */
@media (max-width: 860px) {
  .nu-grid { display: flex; flex-direction: column; }
  .nu-grid > .stack { display: contents; }
  .nu-grid > .nu-top { order: 0; } .nu-grid .nu-train { order: 1; } .nu-grid > .nu-meals { order: 2; } .nu-grid > .stack > :not(.nu-train) { order: 3; }
}
.nu-load p { color: var(--text); opacity: 0.9; } .nu-load b { filter: brightness(1.25); }

/* ---------- Foto = Hauptknopf ---------- */
.nu-quick { grid-template-columns: repeat(3, 1fr); }
.nu-shoot { grid-column: 1 / -1; position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; width: 100%; padding: 16px 18px; border: 0; border-radius: 22px; background: var(--nu-grad); color: #062a1b; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 16px 40px -14px rgba(95, 207, 141, 0.85); transition: transform 0.2s var(--ease-out); }
.nu-shoot::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); transform: translateX(-100%); animation: nu-shine 4.5s ease-in-out infinite 1.2s; pointer-events: none; }
@keyframes nu-shine { 0%, 70% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
.nu-shoot:active { transform: scale(0.97); }
.nu-shoot-ic { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 18px; background: rgba(6, 42, 27, 0.14); }
.nu-shoot-ic svg { width: 30px; height: 30px; }
.nu-shoot-t { flex: 1; min-width: 0; } .nu-shoot-t b { display: block; font-size: 18px; letter-spacing: -0.01em; } .nu-shoot-t small { display: block; font-size: 12.5px; opacity: 0.78; line-height: 1.35; margin-top: 2px; }
.nu-shoot > svg { width: 22px; height: 22px; flex: none; }
.nu-shoot.locked { background: linear-gradient(135deg, rgba(243, 210, 122, 0.22), rgba(201, 154, 59, 0.1)); border: 1px solid rgba(243, 210, 122, 0.45); color: var(--text); box-shadow: none; }
.nu-shoot.locked .nu-shoot-ic { background: rgba(243, 210, 122, 0.15); color: #f3d27a; } .nu-shoot.locked::after { display: none; }
.nu-fab { display: none; }
@media (max-width: 860px) {
  .nu-fab { display: grid; place-items: center; position: fixed; right: 18px; bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 30; width: 62px; height: 62px; border: 0; border-radius: 50%; background: var(--nu-grad); color: #062a1b; box-shadow: 0 14px 34px -8px rgba(95, 207, 141, 0.8), 0 0 0 6px rgba(95, 207, 141, 0.12); cursor: pointer; animation: nu-up 0.5s var(--ease-out) 0.6s backwards; }
  .nu-fab svg { width: 28px; height: 28px; }
  .nu-fab.locked { background: linear-gradient(135deg, #f3d27a, #c99a3b); color: #2a1c05; box-shadow: 0 14px 34px -8px rgba(201, 154, 59, 0.7); }
  .nu-fab:active { transform: scale(0.92); }
}
.nu-trlinks { gap: 10px; flex-wrap: wrap; }
.nu-kira { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 99px; border: 1px solid rgba(255, 138, 106, 0.4); background: rgba(255, 138, 106, 0.1); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.nu-kira img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

/* ---------- Fortschrittsfotos ---------- */
.nu-prog { grid-column: 1 / -1; }
.nu-prog .h3 { display: flex; align-items: center; gap: 8px; } .nu-prog .h3 svg { width: 20px; height: 20px; color: var(--nu); }
.nu-prog .pill svg { width: 12px; height: 12px; }
.nu-phadd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nu-phadd button { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border-radius: 16px; border: 1px dashed rgba(95, 207, 141, 0.45); background: rgba(95, 207, 141, 0.06); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nu-phadd svg { width: 20px; height: 20px; color: var(--nu); margin-bottom: 4px; } .nu-phadd b { font-size: 14px; } .nu-phadd small { font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.nu-phgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.nu-ph { position: relative; padding: 0; border: 0; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; cursor: pointer; background: #000; }
.nu-ph img { width: 100%; height: 100%; object-fit: cover; }
.nu-ph span { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: 99px; font-size: 10.5px; font-weight: 800; color: #062a1b; background: var(--nu); }
.nu-ph span.t-pump { background: #ffc15e; } .nu-ph span.t-ruhe { background: #7b93ff; color: #fff; }
.nu-ph small { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 6px 5px; font-size: 10px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.7)); }
.nu-why { border-radius: 16px; background: var(--surface-2); padding: 12px 14px; }
.nu-why summary { cursor: pointer; font-weight: 700; display: flex; align-items: center; gap: 8px; list-style: none; } .nu-why summary::-webkit-details-marker { display: none; }
.nu-why summary svg { width: 16px; height: 16px; color: var(--nu); }
.nu-why p { font-size: 14px; line-height: 1.55; color: var(--text-2); margin: 10px 0 0; } .nu-why b { color: var(--text); }
.nu-cmp { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 3 / 4; max-height: 62vh; margin: 0 auto; width: 100%; background: #000; touch-action: pan-y; }
.nu-cmp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nu-cmp-top { position: absolute; inset: 0; }
.nu-cmp i { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.6); pointer-events: none; }
.nu-cmp i::after { content: '‹ ›'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: #fff; color: #062a1b; display: grid; place-items: center; font-weight: 900; font-size: 15px; letter-spacing: 2px; }
.nu-cmp > span { position: absolute; top: 10px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 800; background: rgba(0, 0, 0, 0.6); color: #fff; pointer-events: none; }
.nu-cmp > span.l { left: 10px; } .nu-cmp > span.r { right: 10px; }
.nu-cmp input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; }
.nu-shot.tall { max-height: 60vh; object-fit: contain; background: #000; }
@media (max-width: 520px) { .nu-phadd small { display: none; } }
@media (max-width: 860px) { .nu-fab { opacity: 0; transform: scale(0.6); pointer-events: none; transition: opacity 0.25s, transform 0.3s var(--ease-out); animation: none; } .nu-fab.show { opacity: 1; transform: none; pointer-events: auto; } }
@media (max-width: 520px) { .nu-shoot { padding: 14px; gap: 12px; } .nu-shoot-ic { width: 46px; height: 46px; border-radius: 15px; } .nu-shoot-t b { font-size: 17px; } }
.nu-cmp { width: min(100%, calc(62vh * 0.75)); max-height: none; margin-inline: auto; }
/* Bildplätze (Higgsfield-Serie, erscheinen automatisch) */
.nu-meal-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(95, 207, 141, 0.45); }
.nu-meal-h:has(.nu-meal-img) > svg { display: none; }
.nu-train { position: relative; overflow: hidden; }
.nu-train-img { position: absolute; top: 0; right: 0; width: 46%; height: 150px; object-fit: cover; opacity: 0.35; -webkit-mask-image: linear-gradient(to left, #000 20%, transparent), linear-gradient(to top, transparent, #000 60%); mask-image: linear-gradient(to left, #000 20%, transparent); pointer-events: none; }
.nu-train > :not(.nu-train-img) { position: relative; }
.nu-hero-img { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.28; z-index: 0 !important; -webkit-mask-image: linear-gradient(to left, #000 30%, transparent 85%); mask-image: linear-gradient(to left, #000 30%, transparent 85%); }

/* ---------- Kamera-Leiste (ersetzt den breiten Foto-Knopf) ---------- */
.nu-quick, .nu-shoot { display: none !important; }
.nu-dockwrap { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 18px; }
.nu-dock { display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center; gap: 4px; width: min(100%, 470px); padding: 8px 10px; border-radius: 30px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 18px 40px -24px rgba(0, 0, 0, 0.8); }
.nu-dk { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 2px; border: 0; border-radius: 18px; background: none; color: var(--text-2); font: inherit; cursor: pointer; transition: color 0.2s, background 0.2s, transform 0.2s var(--ease-out); }
.nu-dk svg { width: 22px; height: 22px; color: var(--text); }
.nu-dk small { font-size: 11px; font-weight: 700; white-space: nowrap; }
@media (hover: hover) { .nu-dk:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); } }
.nu-dk:active { transform: scale(0.9); }
.nu-shutter { position: relative; display: grid; place-items: center; width: 82px; height: 82px; margin: -26px 6px 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform 0.25s var(--ease-out); }
.nu-shutter:active { transform: scale(0.9); }
.nu-sh-ring { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, #38d9b0, #c6f36b, #5fcf8d, #38d9e6, #38d9b0); animation: nu-spin 6s linear infinite; box-shadow: 0 0 34px -4px rgba(95, 207, 141, 0.75); }
.nu-sh-ring::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface-solid); }
.nu-sh-core { position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #d9ffe9, #5fcf8d 55%, #2fae7a); color: #062a1b; box-shadow: inset 0 -4px 10px rgba(6, 42, 27, 0.25), 0 6px 16px -6px rgba(0, 0, 0, 0.6); transition: transform 0.25s var(--ease-out); }
.nu-sh-core svg { width: 28px; height: 28px; }
@media (hover: hover) { .nu-shutter:hover .nu-sh-core { transform: scale(1.06); } }
.nu-shutter::before { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(95, 207, 141, 0.35); animation: nu-ping 2.6s var(--ease-out) infinite; }
@keyframes nu-ping { 0% { transform: scale(0.9); opacity: 0.9; } 80%, 100% { transform: scale(1.25); opacity: 0; } }
.nu-shutter.locked .nu-sh-ring { background: conic-gradient(from 0deg, #f3d27a, #c99a3b, #ffe9a8, #f3d27a); box-shadow: 0 0 30px -6px rgba(243, 210, 122, 0.6); }
.nu-shutter.locked .nu-sh-core { background: radial-gradient(circle at 35% 30%, #fff4d1, #f3d27a 55%, #c99a3b); color: #2a1c05; }
.nu-shutter.locked::before { border-color: rgba(243, 210, 122, 0.3); }
.nu-sh-pro { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #2a1c05; color: #f3d27a; border: 2px solid var(--surface-solid); }
.nu-sh-pro svg { width: 14px; height: 14px; }
.nu-dock-cap { margin: 0; font-size: 13px; color: var(--text-2); text-align: center; max-width: 420px; line-height: 1.4; }
.nu-dock-cap b { color: var(--text); }
@media (max-width: 860px) {
  .nu-fab { width: 64px; height: 64px; background: none !important; box-shadow: none !important; }
  .nu-fab .nu-sh-core { width: 50px; height: 50px; } .nu-fab .nu-sh-core svg { width: 24px; height: 24px; }
  .nu-fab.locked .nu-sh-ring { background: conic-gradient(from 0deg, #f3d27a, #c99a3b, #ffe9a8, #f3d27a); }
  .nu-fab.locked .nu-sh-core { background: radial-gradient(circle at 35% 30%, #fff4d1, #f3d27a 55%, #c99a3b); color: #2a1c05; }
}
@media (max-width: 400px) { .nu-dock { padding: 6px; } .nu-dk small { font-size: 10px; } .nu-shutter { width: 74px; height: 74px; margin: -22px 2px 0; } .nu-sh-core { width: 56px; height: 56px; } }
@media (prefers-reduced-motion: reduce) { .nu-sh-ring, .nu-shutter::before { animation: none; } }

/* ---------- Erholungs-Uhr ---------- */
.nu-rec { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 14px; border-color: color-mix(in srgb, var(--pc) 40%, transparent); background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--pc) 18%, transparent), transparent 60%), var(--surface); }
.nu-rec-top { display: grid; grid-template-columns: 130px 1fr; gap: 16px; align-items: center; }
.nu-rec-ring { position: relative; width: 130px; height: 130px; }
.nu-page svg.nu-rec-svg { width: 100%; height: 100%; overflow: visible; }
.nu-rec-dot { fill: #fff; stroke: var(--pc); stroke-width: 4; filter: drop-shadow(0 0 8px var(--pc)); }
.nu-rec-in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.nu-rec-in small { font-size: 11px; color: var(--muted); } .nu-rec-in b { font-size: 18px; line-height: 1.1; text-align: center; }
.nu-rec-txt h3 { margin: 4px 0 6px; font-size: 24px; color: var(--pc); letter-spacing: -0.01em; }
.nu-rec-txt p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text); }
.nu-rec-txt .eyebrow svg { width: 13px; height: 13px; }
.nu-rec-tl { display: flex; gap: 4px; }
.nu-rec-tl span { flex: 1; display: flex; flex-direction: column; gap: 6px; font-size: 11px; font-weight: 700; color: var(--muted); }
.nu-rec-tl i { height: 5px; border-radius: 99px; background: color-mix(in srgb, var(--c) 30%, transparent); }
.nu-rec-tl span.on { color: var(--text); } .nu-rec-tl span.on i { background: var(--c); box-shadow: 0 0 10px var(--c); }
.nu-rec-now { padding: 14px; border-radius: 18px; background: var(--surface-2); }
.nu-rec-now > b { font-size: 14px; }
.nu-rec-now ul { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.nu-rec-now li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.5; }
.nu-rec-now li svg { width: 18px; height: 18px; flex: none; color: var(--pc); margin-top: 2px; }
.nu-rec-next { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; }
.nu-rec-next svg { width: 16px; height: 16px; color: var(--pc); flex: none; }
.nu-done { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 16px; border: 1px dashed rgba(95, 207, 141, 0.55); background: rgba(95, 207, 141, 0.08); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.nu-done > svg { width: 22px; height: 22px; color: var(--nu); padding: 4px; border-radius: 50%; background: rgba(95, 207, 141, 0.18); box-sizing: content-box; }
.nu-done b { display: block; } .nu-done small { color: var(--muted); font-size: 12.5px; }
.nu-endt { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; } .nu-endt svg { width: 18px; height: 18px; color: var(--nu); } .nu-endt input { width: auto; margin-left: auto; }
@media (max-width: 860px) { .nu-grid .nu-rec { order: 1; } }
@media (max-width: 420px) { .nu-rec-top { grid-template-columns: 108px 1fr; gap: 12px; } .nu-rec-ring { width: 108px; height: 108px; } .nu-rec-txt h3 { font-size: 20px; } }
@media (max-width: 860px) { .nu-grid > .stack > .nu-rec { order: 1; } }
.nu-rec-next { display: block; line-height: 1.5; } .nu-rec-next svg { vertical-align: -3px; margin-right: 6px; }
.nu-bodyhero { position: relative; height: 170px; margin: -4px 0 -40px; border-radius: 24px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent); mask-image: linear-gradient(180deg, #000 40%, transparent); }
.nu-bodyhero img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0.6; }