/* ============================================================================ NEXT LEVEL TRAINING — Design System Farben/Branding aus dem NLT-Logo abgeleitet (Schwarz/Weiß + Electric-Blue). Theme-Umschaltung über [data-theme="dark"|"light"] auf . ========================================================================= */ /* Premium-Display-Font — lokal gebündelt (offline-first, kein externes CDN). Im Single-File-Build werden die woff2 von build-singlefile.ps1 als data-URI inlined. */ @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;src:url('assets/fonts/bricolage-700.woff2') format('woff2')} @font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('assets/fonts/bricolage-800.woff2') format('woff2')} :root{ /* Marke: NLT Electric-Blue, verfeinert für „Performance Black" */ --acc:#2f6bff; --acc-2:#5b8bff; --acc-soft:rgba(61,123,255,.14); --ok:#3ad18a; --fail:#ff5d6c; --info:#5ab0ff; --warn:#ffb648; --c-prot:#3d7bff; --c-carb:#ffb648; --c-fat:#ff7a59; /* Radius-Skala (differenziert statt uniform) */ --r:16px; --r-sm:10px; --r-lg:22px; --r-pill:999px; /* Abstands-Skala (Baseline großzügiger) */ --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:20px; --sp-5:28px; --sp-6:40px; --disp:'Bricolage Grotesque','Archivo',system-ui,sans-serif; --body:'Archivo',system-ui,-apple-system,sans-serif; } :root, [data-theme="dark"]{ /* Geschichtete Near-Black-Flächen */ --bg:#07080c; --panel:#0f131b; --panel-2:#161b25; --panel-3:#1e2431; --line:#242b38; --line-soft:#1a2029; --txt:#f2f4f8; --muted:#a7afbd; --muted-2:#828b99; --acc-dim:#8fb0ff; /* Neutraler Hover-Layer — Semantikfarben (ok/fail/warn) bleiben der Datenbedeutung vorbehalten */ --hover:rgba(255,255,255,.05); --hover-strong:rgba(255,255,255,.09); /* Elevation-Skala + feines Oberlicht für „machined" Premium-Haptik */ --sh-1:0 1px 2px rgba(0,0,0,.45); --sh-2:0 4px 16px rgba(0,0,0,.42); --sh-3:0 16px 40px rgba(0,0,0,.5); --sh-4:0 28px 64px rgba(0,0,0,.62); --shadow:var(--sh-2); --edge:inset 0 1px 0 rgba(255,255,255,.05); } [data-theme="light"]{ --bg:#eceff5; --panel:#ffffff; --panel-2:#f3f5f9; --panel-3:#e9edf4; --line:#e0e5ee; --line-soft:#eef1f6; --txt:#121620; --muted:#576070; --muted-2:#6b7280; --acc-dim:#1747a6; --hover:rgba(20,30,60,.04); --hover-strong:rgba(20,30,60,.07); --sh-1:0 1px 2px rgba(20,30,60,.06); --sh-2:0 6px 20px rgba(20,30,60,.08); --sh-3:0 16px 40px rgba(20,30,60,.12); --sh-4:0 28px 64px rgba(20,30,60,.16); --shadow:var(--sh-2); --edge:inset 0 1px 0 rgba(255,255,255,.7); } *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html,body{height:100%} html{background:var(--bg)} body{ background:var(--bg);color:var(--txt);font-family:var(--body);font-size:15px;line-height:1.5; background-image:radial-gradient(circle at 12% -8%, rgba(47,107,255,.10), transparent 42%), radial-gradient(circle at 92% 4%, rgba(47,107,255,.06), transparent 38%); background-attachment:fixed; overscroll-behavior-y:none; } h1,h2,h3,h4{font-family:var(--disp);font-weight:800;letter-spacing:-.02em;line-height:1.08;color:var(--txt)} h3{font-size:17px} h4{font-size:15px} a{color:var(--acc)} small{color:var(--muted)} ::selection{background:var(--acc-soft);color:var(--txt)} button,input,select,textarea{font:inherit;color:inherit} img{max-width:100%;display:block} /* Inline-SVG-Icons (getIcon) — färben mit currentColor mit */ .ic{width:1.15em;height:1.15em;display:inline-block;vertical-align:-.16em;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none} /* ============ HEADER ============ */ .app-header{ position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between; gap:12px;padding:12px 16px;padding-top:max(16px, calc(env(safe-area-inset-top) + 10px)); background:rgba(9,10,14,.72);backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid var(--line); } [data-theme="light"] .app-header{background:rgba(244,246,250,.82)} .hdr-brand{display:flex;align-items:center;gap:10px;min-width:0} .hdr-logo{width:36px;height:36px;border-radius:10px;object-fit:contain;flex:none;background:var(--panel-2);padding:3px;border:1px solid var(--line)} .hdr-title{font-family:var(--disp);font-weight:800;font-size:13.5px;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--txt)} .hdr-title b{color:var(--acc)} .hdr-profile-name{font-size:12px;font-weight:700;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:6px 12px;white-space:nowrap;max-width:34vw;overflow:hidden;text-overflow:ellipsis;display:inline-block} /* ============ MAIN / TABS ============ */ .app-main{max-width:760px;margin:0 auto;padding:16px 16px calc(96px + env(safe-area-inset-bottom))} .tabpage{display:none;animation:fade-in .25s ease} .tabpage.active{display:block} @keyframes fade-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ============ BOTTOM NAV ============ */ .bottom-nav{ position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;justify-content:space-around; background:rgba(9,11,15,.82);backdrop-filter:blur(18px) saturate(1.2);border-top:1px solid var(--line); box-shadow:0 -10px 30px rgba(0,0,0,.4); padding:8px 6px calc(8px + env(safe-area-inset-bottom)); } [data-theme="light"] .bottom-nav{background:rgba(255,255,255,.9);box-shadow:0 -10px 30px rgba(20,30,60,.08)} .navbtn{ flex:1;max-width:108px;display:flex;flex-direction:column;align-items:center;gap:4px; background:none;border:0;border-radius:14px;padding:8px 2px;cursor:pointer; color:var(--muted-2);font-weight:700;font-size:10.5px;letter-spacing:.02em;transition:color .15s, background .15s; } .navbtn .nav-ico{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;line-height:1;font-size:19px} .navbtn .nav-ico svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .navbtn.active{color:var(--acc);background:var(--acc-soft)} .navbtn:active{background:var(--hover)} /* ============ TOAST ============ */ .toast{ position:fixed;left:50%;bottom:calc(130px + env(safe-area-inset-bottom));transform:translate(-50%,140%); z-index:200;background:var(--panel);border:1px solid var(--line);color:var(--txt); padding:11px 18px;border-radius:30px;font-size:13px;font-weight:700;box-shadow:var(--shadow); transition:transform .25s cubic-bezier(.2,.9,.3,1.2);max-width:88vw;text-align:center; } .toast.show{transform:translate(-50%,0)} .toast.ok{border-color:rgba(67,209,138,.4);color:var(--ok)} .toast.warn{border-color:rgba(255,182,72,.4);color:var(--warn)} .toast.err{border-color:rgba(255,93,108,.4);color:var(--fail)} /* ============ CARDS / LAYOUT ============ */ .card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;margin-bottom:14px;box-shadow:var(--sh-2),var(--edge)} .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap} .card-head h3,.card-head h4{margin:0} .sub{color:var(--muted);font-size:12.5px} .muted{color:var(--muted)} .wrap{max-width:760px;margin:0 auto} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px} @media (max-width:480px){.grid3{grid-template-columns:1fr 1fr}} .hr{height:1px;background:var(--line);margin:14px 0} .empty,.empty-hint{color:var(--muted-2);font-size:13px;text-align:center;padding:22px 10px} .dot{width:11px;height:11px;border-radius:3px;flex:none;display:inline-block} .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:20px;background:var(--panel-2);border:1px solid var(--line);color:var(--muted)} .notice-box{background:var(--acc-soft);border:1px solid rgba(47,107,255,.3);color:var(--txt);font-size:12.5px;padding:11px 13px;border-radius:var(--r-sm);margin-bottom:12px} .coach-hint{font-size:12px;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--acc);padding:9px 12px;border-radius:8px;margin-top:8px} /* ============ FORMS / BUTTONS ============ */ label{display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin:0 0 5px 2px;letter-spacing:.02em} .field{margin-bottom:12px} input,select,textarea{ width:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm); color:var(--txt);font-family:var(--body);font-size:15px;padding:11px 12px;outline:none;transition:.15s; } input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)} textarea{resize:vertical;min-height:70px} select{ appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 12px center;padding-right:34px; } input[type="range"]{-webkit-appearance:none;appearance:none;height:6px;background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:0} input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--acc);cursor:pointer;border:3px solid var(--bg);box-shadow:0 0 0 1px var(--acc)} input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--acc);cursor:pointer;border:3px solid var(--bg)} input[type="file"]{padding:8px} .btn{ background:linear-gradient(180deg,var(--acc-2),var(--acc));color:#fff;border:0;border-radius:var(--r-sm);font-family:var(--disp); font-weight:700;font-size:15px;padding:13px 20px;cursor:pointer;transition:filter .15s, transform .06s, box-shadow .15s;letter-spacing:-.01em; display:inline-flex;align-items:center;justify-content:center;gap:7px;box-shadow:0 6px 16px rgba(47,107,255,.28),var(--edge); } .btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .btn:hover{filter:brightness(1.06)} .btn:active{transform:translateY(1px);filter:brightness(.95)} .btn.full,.btn.wide{width:100%} .btn.ghost{background:transparent;color:var(--txt);border:1px solid var(--line);font-family:var(--body);font-weight:600;box-shadow:none} .btn.ghost:hover{border-color:var(--acc);background:var(--hover);filter:none} .btn.sm{padding:9px 14px;font-size:13px} .btn.danger{background:transparent;border:1px solid var(--fail);color:var(--fail);font-family:var(--body);font-weight:600;box-shadow:none} .btn.danger:hover{background:rgba(255,93,108,.08);filter:none} .btn.primary{background:linear-gradient(180deg,var(--acc-2),var(--acc));color:#fff} .btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none} .icon-btn{ background:var(--panel-2);border:1px solid var(--line);color:var(--txt);border-radius:11px; width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;flex:none;transition:background .15s,border-color .15s; } .icon-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .icon-btn.danger{color:var(--fail);border-color:rgba(255,93,108,.35)} .icon-btn:hover{border-color:var(--acc);background:var(--hover)} .icon-btn:active{background:var(--hover-strong)} .file-btn{display:inline-block;cursor:pointer} /* ============ SUB-NAV (Segmented Control) ============ */ .subnav{display:flex;gap:4px;background:var(--panel-2);border:1px solid var(--line);border-radius:13px;padding:4px;margin-bottom:14px;overflow-x:auto} .subnav-btn{flex:1;white-space:nowrap;background:none;border:0;color:var(--muted);font-family:var(--body);font-weight:700;font-size:12.5px;padding:10px 12px;border-radius:9px;cursor:pointer;transition:.15s} .subnav-btn:hover{color:var(--txt)} .subnav-btn.active{background:linear-gradient(180deg,var(--acc-2),var(--acc));color:#fff;box-shadow:0 4px 12px rgba(47,107,255,.3)} /* ============ DASHBOARD ============ */ .dash-hero{display:flex;align-items:center;gap:14px;margin-bottom:16px} .dash-logo{width:54px;height:54px;border-radius:14px;object-fit:contain;background:var(--panel);border:1px solid var(--line);padding:6px;box-shadow:var(--shadow)} .dash-greet{font-size:21px;margin-bottom:2px} .dash-sub{color:var(--muted);font-size:13px} .dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px} .stat-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px;box-shadow:var(--shadow)} .stat-label{font-size:10.5px;color:var(--muted);font-weight:700;letter-spacing:.05em;text-transform:uppercase} .stat-value{font-family:var(--disp);font-weight:800;font-size:25px;line-height:1.15;margin-top:4px;color:var(--txt)} .stat-value small{font-size:13px;color:var(--muted);font-weight:600} .stat-delta{font-size:11.5px;font-weight:700;margin-top:3px} .stat-delta.up{color:var(--ok)} .stat-delta.down{color:var(--info)} .stat-delta.neutral{color:var(--muted)} .today-banner{border-left:3px solid var(--acc);padding:4px 0 4px 14px;margin-bottom:6px} .today-type{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--acc)} .today-sub{color:var(--muted);font-size:12.5px;margin-top:2px} .today-niki-mini{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .dash-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px} .dash-action-btn{ display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--panel-2); border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px;cursor:pointer;color:var(--txt);font-weight:700;font-size:13.5px; } .dash-action-btn .ico{font-size:18px;color:var(--acc);display:inline-flex;align-items:center} .dash-action-btn .ico .ic{width:20px;height:20px} .dash-action-btn:active{transform:scale(.98)} .dash-action-btn.locked{opacity:.55;cursor:default} /* ============ CHARTS (selbst gezeichnete SVGs) ============ */ .chart-area{width:100%} .chart-svg{width:100%;height:auto;display:block} .chart-svg text,.chart text{fill:var(--muted);font-size:10px;font-family:var(--body)} .chart-grid line{stroke:var(--line)} .chart-line{fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .chart-dot{fill:var(--acc);stroke:var(--bg);stroke-width:2} .chart-label{fill:var(--muted);font-size:10px} .chart-empty,.empty{color:var(--muted-2);font-size:13px;text-align:center;padding:26px 10px} .chart-trend{font-size:12px;font-weight:700;margin-top:6px} .bar-chart{display:flex;align-items:flex-end;gap:8px;height:140px;padding-top:6px} .bar-chart-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%;justify-content:flex-end} .bar-chart-track{width:100%;max-width:34px;height:100%;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;display:flex;align-items:flex-end;overflow:hidden} .bar-chart-fill{width:100%;background:var(--acc);border-radius:8px 8px 0 0;transition:height .4s} .bar-chart-val{font-family:var(--disp);font-weight:800;font-size:12px;color:var(--txt)} .bar-chart-label{font-size:10px;color:var(--muted)} .donut{position:relative;width:148px;height:148px;flex:none} .donut-ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .donut-ctr b{font-family:var(--disp);font-size:22px;font-weight:800;line-height:1.1;color:var(--txt)} .donut-ctr small{font-size:10.5px;color:var(--muted)} .macro-donut-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center} .macro-legend{display:flex;flex-direction:column;gap:8px;flex:1;min-width:160px} .macro-legend > div{display:flex;align-items:center;gap:9px;font-size:13px} .macro-legend b{margin-left:auto;font-family:var(--disp);font-weight:800} .ring-mini{position:relative;width:124px;height:124px;margin:6px auto;display:flex} .ring-mini-ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center} .ring-mini-ctr b{font-family:var(--disp);font-size:18px;font-weight:800;line-height:1.15;color:var(--txt)} .ring-mini-ctr small{font-size:10px;color:var(--muted)} .ring-mid{display:flex;flex-direction:column;align-items:center;justify-content:center} /* ============ 357-Progression ============ */ .niki-card{margin-bottom:16px} .niki-stats{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 12px} .niki-grid{display:grid;gap:5px;margin-bottom:10px} .niki-grid-head,.niki-grid-row{display:grid;gap:5px;grid-template-columns:64px repeat(var(--cols,3),1fr)} .niki-grid-head > div{text-align:center;font-size:10.5px;font-weight:800;letter-spacing:.03em;color:var(--muted);padding:6px 2px} .rowlabel{display:flex;align-items:center;font-weight:700;font-size:12px;color:var(--txt);background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:8px 6px;justify-content:center;text-align:center;line-height:1.2} .niki-cell{ background:var(--panel-2);border:1px solid var(--line);border-radius:8px;text-align:center; height:44px;display:flex;align-items:center;justify-content:center;cursor:pointer; font-family:var(--disp);font-weight:800;font-size:16px;color:var(--muted-2);user-select:none;transition:.12s; } .niki-cell:active{transform:scale(.92)} .niki-cell.cyc-x{background:rgba(47,107,255,.15);color:var(--acc);border-color:rgba(47,107,255,.4)} .niki-cell.cyc-f,.niki-cell.cyc-ff,.niki-cell.cyc-fff{background:rgba(255,93,108,.13);color:var(--fail);border-color:rgba(255,93,108,.35);font-size:13px} .niki-cell.next{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc-soft),0 0 14px rgba(47,107,255,.3);animation:niki-pulse 1.8s infinite} @keyframes niki-pulse{0%,100%{box-shadow:0 0 0 2px var(--acc-soft),0 0 10px rgba(47,107,255,.18)}50%{box-shadow:0 0 0 2px var(--acc-soft),0 0 20px rgba(47,107,255,.42)}} .niki-legend{display:flex;flex-wrap:wrap;gap:10px 16px;font-size:11.5px;color:var(--muted);margin-bottom:6px} .niki-legend-row{display:flex;align-items:center;gap:6px} .niki-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .startset{display:flex;align-items:center;gap:8px} .startset input{max-width:96px;text-align:center} /* ============ TRAINING / KRAFTTEST / EXERCISES ============ */ .kt-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px} .kt-row:last-of-type{border-bottom:0} .kt-result{margin-top:10px} .weekplan-grid{display:flex;flex-direction:column;gap:8px} .weekplan-row,.wp-day{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px} .wp-day .dname{font-weight:800;font-family:var(--disp);min-width:78px} .mini-cell,.mini-name,.mini-stage{font-size:11px} .today-niki-mini .mini-cell{display:inline-flex;flex-direction:column;align-items:center;gap:2px;background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 10px;min-width:64px} .today-niki-mini .mini-name{font-weight:800;color:var(--txt)} .today-niki-mini .mini-stage{color:var(--muted)} .lib-filters{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap} .lib-filters select,.lib-filters input{flex:1;min-width:120px} .lib-list{display:flex;flex-direction:column;gap:8px} .lib-row{display:flex;align-items:center;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;cursor:pointer;transition:.14s} .lib-row:hover{border-color:var(--acc)} .lib-row-name{font-weight:700;font-size:13.5px;flex:1} .lib-row-meta{font-size:11px;color:var(--muted)} .pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px} .pr-card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;text-align:center} .pr-name{font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:4px} .pr-val{font-family:var(--disp);font-weight:800;font-size:18px;color:var(--txt)} .alt-list,.accessory-list{display:flex;flex-direction:column;gap:8px} .alt-row,.accessory-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:13px} .day-template-list{display:flex;flex-direction:column;gap:12px} .day-template-card{border-left:3px solid var(--acc);padding:4px 0 4px 14px} .dtc-head{font-family:var(--disp);font-weight:800;font-size:15px;margin-bottom:6px} .dtc-section{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:800;margin:8px 0 4px} .ex-section{margin-top:10px} .ex-meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;font-size:11.5px} .ex-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .row-actions{display:flex;gap:8px;flex-wrap:wrap} .custom-workout-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px} .wb-ex-list{display:flex;flex-direction:column;gap:8px;margin:10px 0} .wb-ex-row{display:grid;grid-template-columns:1fr 64px 64px 36px;gap:8px;align-items:center;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px} .wb-ex-row input,.wb-ex-row select{padding:8px} /* ============ ABS / ABS DEMOLITION ============ */ .abs-card{text-align:center} .abs-timer-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0} .abs-clock{font-family:var(--disp);font-weight:800;font-size:54px;line-height:1;letter-spacing:-.03em;color:var(--txt)} .abs-phase-label{font-family:var(--disp);font-size:13px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .abs-setno{font-size:11.5px;color:var(--muted);font-weight:700;letter-spacing:.05em} .abs-controls{display:flex;gap:10px;justify-content:center;margin-top:8px;flex-wrap:wrap} .abs-timer-info{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:10px;font-size:11.5px;color:var(--muted)} .abs-exercise-pick{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;cursor:pointer;background:var(--panel-2);transition:.14s} .abs-exercise-pick:hover{border-color:var(--muted-2)} .abs-exercise-pick.sel,.ob-opt.sel,.ex-opt.sel{border-color:var(--acc);background:var(--acc-soft)} /* ============ KÖRPER / BODY TAB ============ */ .kv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} @media (max-width:420px){.kv-grid{grid-template-columns:1fr 1fr}} .kv-cell{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:11px;text-align:center} .kv-label{font-size:10px;color:var(--muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase} .kv-val{font-family:var(--disp);font-weight:800;font-size:17px;margin-top:3px;color:var(--txt)} .kv-delta{font-size:11px;font-weight:700;margin-top:2px} .goal-row{margin-bottom:14px} .goal-label{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px;color:var(--muted)} .goal-vals{font-family:var(--disp);font-weight:800;color:var(--txt)} .goal-status{font-size:11px;font-weight:700;margin-top:4px} .bar{height:8px;background:var(--panel-2);border-radius:20px;overflow:hidden;border:1px solid var(--line)} .bar > i,.bar i{display:block;height:100%;border-radius:20px;background:var(--acc);transition:width .4s} .table-wrap,.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px} .data-table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:520px} .data-table th,.data-table td{padding:9px 10px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap} .data-table th{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700} .data-table tbody tr:hover{background:var(--panel-2)} /* ============ FOTOS / GALERIE ============ */ .photo-upload-row{display:flex;gap:8px} .photo-upload-btn{ flex:1;height:96px;border:1.5px dashed var(--line);border-radius:var(--r-sm);display:flex;flex-direction:column; align-items:center;justify-content:center;cursor:pointer;background:var(--panel-2);color:var(--muted);font-size:11px;gap:6px; overflow:hidden;position:relative;text-align:center; } .photo-upload-btn img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .photo-upload-btn input{display:none} .photo-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .photo-row{margin-bottom:14px} .photo-row-date{font-family:var(--disp);font-weight:800;font-size:13px;margin-bottom:6px;color:var(--txt)} .photo-row-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .photo-thumb-wrap{position:relative} .photo-thumb{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:8px;border:1px solid var(--line);cursor:pointer} .photo-del{position:absolute;top:5px;right:5px;background:rgba(0,0,0,.55);color:#fff;border:0;border-radius:8px;width:28px;height:28px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center} .photo-del .ic{width:14px;height:14px} .compare-grid{display:flex;flex-direction:column;gap:10px} .compare-pair{display:flex;flex-direction:column;gap:8px} .compare-imgs{display:grid;grid-template-columns:1fr 1fr;gap:8px} .compare-imgs img{width:100%;border-radius:10px;border:1px solid var(--line);cursor:pointer;aspect-ratio:3/4;object-fit:cover} .compare-label{font-size:11px;color:var(--muted);font-weight:700;text-align:center;margin-top:4px} .photo-compare-pickers{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px} .photo-compare-view{margin-top:8px} /* ============ ERNÄHRUNG ============ */ .macro-progress-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px} @media (max-width:480px){.macro-progress-grid{grid-template-columns:1fr 1fr}} .macro-bar-cell{text-align:center} .mb-label{font-size:10.5px;color:var(--muted);font-weight:700;margin-bottom:6px;text-transform:uppercase;letter-spacing:.03em} .mb-val{font-size:11px;color:var(--muted);margin-top:4px;font-weight:700} .mt-result{margin-top:10px} .meal-add-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px} .meal-add-row input{flex:2;min-width:140px} .meal-add-row select{flex:1;min-width:110px} .meal-item-list{display:flex;flex-direction:column} .meal-item-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px} .meal-item-row:last-child{border-bottom:0} .water-progress{display:flex;justify-content:center;margin:8px 0} .water-quick-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:6px} .water-week-row{display:flex;justify-content:space-between;gap:6px;align-items:flex-end} .water-day-cell{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px} .water-day-bar{width:100%;max-width:28px;height:84px;background:var(--panel-2);border:1px solid var(--line);border-radius:7px;display:flex;align-items:flex-end;overflow:hidden} .water-day-fill{width:100%;background:var(--info);border-radius:7px 7px 0 0;transition:height .4s} .water-day-lbl{font-size:10px;font-weight:800;color:var(--muted)} .water-day-ml{font-size:9.5px} .supp-list{display:flex;flex-direction:column;gap:10px} .supp-row{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px;background:var(--panel-2)} .supp-row b{font-family:var(--disp);font-size:14.5px} /* ============ REMINDERS / CHECKLISTE ============ */ .reminder-list{display:flex;flex-direction:column;gap:8px} .reminder-card{display:flex;align-items:flex-start;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--info);border-radius:var(--r-sm);padding:11px 13px} .reminder-card[class*="sev-warn"]{border-left-color:var(--warn)} .reminder-card[class*="sev-fail"],.reminder-card[class*="sev-high"]{border-left-color:var(--fail)} .rem-ico{font-size:17px;line-height:1;color:var(--acc);display:inline-flex;align-items:center;margin-top:1px} .rem-ico .ic{width:22px;height:22px} .reminder-card[class*="sev-warn"] .rem-ico{color:var(--warn)} .reminder-card[class*="sev-fail"] .rem-ico,.reminder-card[class*="sev-high"] .rem-ico{color:var(--fail)} .rem-body{flex:1;min-width:0} .rem-title{font-weight:700;font-size:13px;color:var(--txt)} .rem-text{font-size:12px;color:var(--muted);margin-top:2px} .rem-action{ flex:none;align-self:center;margin:0;cursor:pointer;white-space:nowrap; background:var(--acc-soft);color:var(--acc-dim);border:1px solid var(--acc); border-radius:20px;padding:7px 13px;font-family:var(--body);font-weight:700;font-size:12px; transition:transform .12s ease, background .16s ease, color .16s ease; } .rem-action:hover{background:var(--acc);color:#fff} .rem-action:active{transform:scale(.96)} .checklist{display:flex;flex-direction:column;gap:2px} .checklist-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px} .checklist-item{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line);font-size:13.5px;cursor:pointer} .checklist-item:last-child{border-bottom:0} .checklist-item input[type="checkbox"]{width:20px;height:20px;flex:none;accent-color:var(--acc);cursor:pointer} .checklist-item.done{color:var(--muted-2);text-decoration:line-through} .cl-ico{font-size:15px;color:var(--muted);display:inline-flex;align-items:center} .cl-ico .ic{width:19px;height:19px} .checklist-item.done .cl-ico{color:var(--ok)} /* Intervallfasten */ .fast-ring-wrap{display:flex;justify-content:center;margin:10px 0 14px} .fast-meta{text-align:center;color:var(--muted);font-size:13px;margin-bottom:14px} .fast-phases{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--muted)} .fast-phases b{color:var(--txt);font-weight:700} /* Kalorien-Budget-Ring */ .budget-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap} .budget-ring{flex:none} .budget-macros{flex:1;min-width:170px;display:flex;flex-direction:column;gap:11px} .budget-macro-top{display:flex;justify-content:space-between;font-size:12.5px;color:var(--muted);margin-bottom:5px} .budget-bar{height:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:20px;overflow:hidden} .budget-bar-fill{height:100%;border-radius:20px;transition:width .3s ease} /* ============ PROFILE / SETTINGS ============ */ .profile-list{display:flex;flex-direction:column;gap:8px} .profile-row{display:flex;align-items:center;gap:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px} .profile-row.active{border-color:var(--acc)} .avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--disp);font-weight:800;color:#10130a;flex:none} .profile-name{font-weight:700;flex:1} .danger-zone{border:1px solid rgba(255,93,108,.35);border-radius:var(--r);padding:14px;background:rgba(255,93,108,.06)} .about-card{text-align:center;padding:26px 16px} .about-logo{width:84px;height:84px;border-radius:18px;object-fit:contain;margin:0 auto 12px;background:var(--panel-2);border:1px solid var(--line);padding:10px} /* ============ ONBOARDING OVERLAY ============ */ .overlay{position:fixed;inset:0;z-index:100;display:none;align-items:flex-end;justify-content:center;background:rgba(5,7,12,.62);backdrop-filter:blur(3px)} .overlay.show{display:flex} .onboarding-card{ width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--panel); border:1px solid var(--line);border-radius:22px 22px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom)); animation:slide-up .28s ease;box-shadow:var(--shadow); } @media (min-width:640px){.onboarding-card{border-radius:22px;margin-bottom:5vh}} @keyframes slide-up{from{transform:translateY(100%)}to{transform:none}} .onboarding-progress-track{height:5px;background:var(--panel-2);border-radius:20px;overflow:hidden;margin-bottom:18px} .onboarding-progress-bar{height:100%;background:var(--acc);border-radius:20px;transition:width .35s ease;width:0%} .onboarding-content{min-height:220px} .onboarding-actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:10px} .ob-actions-right{display:flex;gap:8px} .ob-hero{text-align:center;margin-bottom:14px} .ob-logo{width:64px;height:64px;border-radius:16px;object-fit:contain;margin:0 auto 12px;background:var(--panel-2);border:1px solid var(--line);padding:8px} .ob-hint{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:6px} .ob-options{display:flex;flex-direction:column;gap:8px;margin-top:12px} .ob-opt{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;background:var(--panel-2);font-weight:700;font-size:13.5px;text-align:left;color:var(--txt);transition:.14s} .ob-opt:hover{border-color:var(--muted-2)} .ob-chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px} .ob-chip{padding:9px 14px;border-radius:20px;border:1px solid var(--line);background:var(--panel-2);color:var(--txt);font-size:12.5px;font-weight:700;cursor:pointer;transition:.14s} .ob-chip.sel{border-color:var(--acc);background:var(--acc-soft);color:var(--acc)} .ob-check{accent-color:var(--acc);width:18px;height:18px} .ob-range-val{font-family:var(--disp);font-weight:800;color:var(--acc);font-size:15px} /* ============ GENERIC DIALOG / LIGHTBOX ============ */ .dialog-card{ width:100%;max-width:600px;max-height:92vh;overflow-y:auto;background:var(--panel); border:1px solid var(--line);border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom)); animation:slide-up .25s ease;box-shadow:var(--shadow); } @media (min-width:640px){.dialog-card{border-radius:18px;margin-bottom:5vh}} .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px} .dialog-head h3{margin:0} .dialog-body{font-size:13.5px} .dialog-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap} .lightbox-overlay{background:rgba(0,0,0,.88);align-items:center} .lightbox-img{max-width:92vw;max-height:88vh;border-radius:12px;object-fit:contain} .lightbox-close{position:absolute;top:18px;right:18px;background:rgba(255,255,255,.12);color:#fff;border:0;border-radius:50%;width:44px;height:44px;cursor:pointer;backdrop-filter:blur(6px);display:inline-flex;align-items:center;justify-content:center} /* ============ UTILITY ============ */ .niki-cell.corner{background:transparent;border-color:transparent;color:var(--muted);font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase} .row-flex{display:flex;gap:10px;align-items:flex-end} .row-flex > *{flex:1} .danger{color:var(--fail)} .warn{color:var(--warn)} .primary{color:var(--acc)} .head{display:flex;align-items:center;justify-content:space-between;gap:10px} .ico{font-size:16px;line-height:1} .sm{font-size:12px} .locked{opacity:.5} .row-actions.wrap{flex-wrap:wrap} /* ============ v1.2: PAUSEN-TIMER (Kraft) ============ */ .rest-bar{ position:fixed;left:50%;transform:translateX(-50%);z-index:55; bottom:calc(64px + env(safe-area-inset-bottom)); display:none;align-items:center;gap:8px;width:calc(100% - 24px);max-width:420px; padding:8px 10px;border-radius:14px;background:var(--panel);border:1px solid var(--acc); box-shadow:var(--shadow);overflow:hidden; } .rest-bar.show{display:flex;animation:slide-up .2s ease} .rest-bar.done{border-color:var(--ok);justify-content:center} .rest-prog{position:absolute;left:0;top:0;bottom:0;background:var(--acc-soft);z-index:0;transition:width 1s linear} .rest-bar > *{position:relative;z-index:1} .rest-time{font-family:var(--disp);font-weight:800;font-size:22px;min-width:62px;text-align:center;font-variant-numeric:tabular-nums} .rest-msg{font-weight:700;color:var(--ok)} .rest-btn{background:var(--panel-2);border:1px solid var(--line);color:var(--txt);border-radius:10px;padding:7px 11px;font-weight:700;font-size:13px;cursor:pointer} .rest-btn.skip{margin-left:auto;color:var(--muted)} .rest-btn.close{background:var(--acc);border-color:var(--acc);color:#fff} /* ============ v1.2: GEFÜHRTES WORKOUT ============ */ .ws-card{ width:100%;max-width:600px;height:92vh;display:flex;flex-direction:column;background:var(--panel); border:1px solid var(--line);border-radius:20px 20px 0 0;padding:16px 16px calc(12px + env(safe-area-inset-bottom)); animation:slide-up .25s ease;box-shadow:var(--shadow); } @media (min-width:640px){.ws-card{border-radius:18px;height:86vh;margin-bottom:4vh}} .ws-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:13.5px} .ws-prog{height:6px;border-radius:6px;background:var(--panel-2);margin:10px 0 12px;overflow:hidden} .ws-prog-fill{height:100%;background:var(--acc);border-radius:6px;transition:width .25s ease} .ws-body{flex:1;overflow-y:auto} .ws-body h3{margin-bottom:2px} .ws-vid{display:inline-block;margin:8px 0 4px;font-size:13px;font-weight:700} .ws-sets{margin:12px 0;display:flex;flex-direction:column;gap:6px} .ws-set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-weight:700} .ws-input-row{display:flex;gap:8px;align-items:center;position:sticky;bottom:0;padding-top:8px} .ws-input-row input{flex:1;min-width:0;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:11px 12px} .ws-nav{display:flex;gap:8px;align-items:center;padding-top:12px;border-top:1px solid var(--line);margin-top:8px} .ws-nav .btn.primary{margin-left:auto} /* ============ v1.2: STREAK / WOCHENRÜCKBLICK ============ */ .streak-badge{font-size:12px;font-weight:800;color:var(--muted);background:var(--panel-2);border:1px solid var(--line);border-radius:20px;padding:5px 11px;white-space:nowrap} .streak-badge.hot{color:var(--warn);border-color:var(--warn)} .week-stats{display:flex;gap:10px} .week-stat{flex:1;text-align:center;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px 6px} .ws-num{font-family:var(--disp);font-weight:800;font-size:22px} .ws-num.up{color:var(--ok)} .ws-num.down{color:var(--info)} .ws-lbl{font-size:11px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.03em} /* ============ v1.2: KRAFTVERLAUF JE ÜBUNG ============ */ .lift-chart{margin-top:12px;border-top:1px solid var(--line);padding-top:10px} .lift-chart-label{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:4px} /* ============ v1.2: ERNÄHRUNG — ZULETZT / CHIPS ============ */ .recent-foods{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:8px} .food-chip{background:var(--acc-soft);border:1px solid var(--acc);color:var(--txt);border-radius:20px;padding:6px 12px;font-size:12.5px;font-weight:700;cursor:pointer} /* ============ v1.3: WORKOUT-EINGABE / SATZ-TYP ============ */ .ws-input-grid{display:grid;grid-template-columns:1fr 1fr 1fr 1.3fr;gap:8px;margin-top:10px} .ws-input-grid input,.ws-input-grid select{background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 8px;min-width:0;width:100%} .set-tag{font-size:10px;font-weight:800;padding:2px 6px;border-radius:6px;text-transform:uppercase;letter-spacing:.03em} .set-tag.warm{background:rgba(255,182,72,.18);color:var(--warn)} .set-tag.drop{background:rgba(255,122,89,.18);color:var(--c-fat)} /* ============ v1.3: SCHEIBENRECHNER ============ */ .pc-result{margin-top:6px;min-height:24px} .plate-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} .plate-pill{background:var(--acc-soft);border:1px solid var(--acc);border-radius:8px;padding:6px 10px;font-size:13px;font-weight:700} /* ============ v1.3: VOLUMEN / WOCHE ============ */ .vol-list{display:flex;flex-direction:column;gap:8px} .vol-row{display:flex;align-items:center;gap:10px} .vol-name{flex:0 0 34%;font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vol-track{flex:1;height:10px;border-radius:6px;background:var(--panel-2);overflow:hidden} .vol-fill{height:100%;background:var(--acc);border-radius:6px} .vol-num{flex:none;font-weight:800;font-family:var(--disp);min-width:24px;text-align:right} /* ============ v1.3: PROGRESSIONS-BANNER ============ */ .progress-banner{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:space-between;margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(67,209,138,.12);border:1px solid var(--ok);font-weight:700;font-size:13px} /* ============ v1.3: KLICKBARE ZEILEN ============ */ .row-clickable{cursor:pointer} .row-clickable:hover{background:var(--acc-soft)} /* ============ v1.4: ONLINE-LEBENSMITTEL / BARCODE ============ */ .of-results{display:flex;flex-direction:column;gap:6px;margin-top:10px;max-height:48vh;overflow-y:auto} .of-row{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;background:var(--panel-2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;width:100%} .of-row:hover{border-color:var(--acc)} .of-name{font-weight:700} .bc-video{width:100%;max-height:48vh;border-radius:12px;background:#000;object-fit:cover} /* ============ v1.2: KONFETTI (PR) ============ */ .confetti-wrap{position:fixed;inset:0;pointer-events:none;z-index:200;overflow:hidden} .confetti-bit{position:absolute;top:-30px;animation:confetti-fall 2.2s ease-in forwards} @keyframes confetti-fall{0%{transform:translateY(-30px) rotate(0);opacity:1}100%{transform:translateY(102vh) rotate(540deg);opacity:.2}} .wide{width:100%} /* ============ SCROLLBAR (Webkit) ============ */ ::-webkit-scrollbar{width:8px;height:8px} ::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:var(--line);border-radius:20px} ::-webkit-scrollbar-thumb:hover{background:var(--muted-2)} /* ============================================================================ v1.5 — WASSER-QUICK (Dashboard) · VARIABLE MENGE · GESPEICHERTE MENÜS ========================================================================= */ /* Dashboard-Wasser-Karte: Mini-Fortschritt + Quick-Buttons */ .water-stat{display:flex;flex-direction:column} .water-mini-track{height:6px;border-radius:6px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden;margin:8px 0 2px} .water-mini-fill{height:100%;background:linear-gradient(90deg,var(--info),var(--acc));border-radius:6px;transition:width .4s cubic-bezier(.2,.9,.3,1)} .water-quick-mini{display:flex;gap:6px;margin-top:auto;padding-top:10px} .water-quick-mini .btn{padding:7px 10px;font-size:12.5px} .water-quick-mini #dash-water-add{flex:1} .water-quick-mini #dash-water-custom{flex:none;min-width:42px;font-size:16px;line-height:1} /* Variable Menge in der Wasser-Ansicht */ .water-custom-row{display:flex;gap:8px;align-items:center;margin-top:10px} .water-custom-row input{flex:1;min-width:0} .water-config{margin-top:12px;border-top:1px solid var(--line);padding-top:10px} .water-config summary{cursor:pointer;font-weight:700;font-size:13px;color:var(--muted);list-style:none;padding:4px 0} .water-config summary::-webkit-details-marker{display:none} .water-config summary::before{content:'⚙️ ';opacity:.8} .water-config[open] summary{color:var(--txt)} /* „Meine Menüs"-Chips (1-Tipp-Einfügen) */ .menu-chip{background:rgba(67,209,138,.12);border-color:var(--ok)} .menu-chip::before{content:'🍱 ';font-size:11px} /* Menü-Picker-Dialog: Liste gespeicherter Menüs */ .menu-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto} .menu-row{display:flex;flex-direction:column;gap:8px;background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:12px} .menu-row-info b{font-size:14.5px} .menu-row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap} .menu-row-actions .mp-slot{flex:1;min-width:120px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:8px 10px} .menu-row-actions .btn{flex:none} /* ============================================================================ v1.5 — POLITUR: konsistente Interaktion & Barrierefreiheit (app-weit) ========================================================================= */ /* Sichtbarer Tastatur-Fokus (A11y) — überall */ :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible{ outline:2px solid var(--acc);outline-offset:2px;border-radius:8px; } /* Weiche, compositor-freundliche Übergänge für interaktive Flächen */ .btn{transition:transform .12s cubic-bezier(.2,.9,.3,1.2),border-color .16s ease,background .16s ease,box-shadow .16s ease} .btn.primary:hover{box-shadow:0 6px 18px rgba(47,107,255,.30)} .food-chip,.dash-action-btn,.navbtn,.subnav-btn,.of-row,.row-clickable{transition:transform .12s ease,border-color .16s ease,background .16s ease,color .16s ease} .food-chip:hover{border-color:var(--acc-dim);transform:translateY(-1px)} .food-chip:active{transform:scale(.96)} .dash-action-btn:hover{border-color:var(--acc);background:var(--acc-soft)} .dash-action-btn:active{transform:scale(.99)} .subnav-btn:active,.navbtn:active{transform:scale(.96)} .icon-btn{transition:transform .12s ease,color .16s ease,background .16s ease} .icon-btn:active{transform:scale(.9)} .water-stat{transition:border-color .16s ease} /* Bewegung reduzieren, wenn das System es wünscht */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .tabpage{animation:none} }