/* styles.css — Tracker Farbregel: Grün und Rot sind Daten. Alles andere ist farblos. Drei Farbkonzepte über data-theme auf . */ /* Schriften lokal. Tabellenziffern sind Pflicht — die Ring-Zähler stehen an fester Position und dürfen beim Hochzählen nicht springen (SPEC.md Abschnitt 6). */ @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:swap; src:url(fonts/ibm-plex-sans-400.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:500;font-display:swap; src:url(fonts/ibm-plex-sans-500.woff2) format("woff2")} @font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:600;font-display:swap; src:url(fonts/ibm-plex-sans-600.woff2) format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url(fonts/ibm-plex-mono-400.woff2) format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap; src:url(fonts/ibm-plex-mono-500.woff2) format("woff2")} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap; src:url(fonts/ibm-plex-mono-600.woff2) format("woff2")} :root, [data-theme="dark"]{ --page:#0a0d10;--bg:#14181D;--surf:#1D2329;--surf2:#232a31;--hover:#222931;--hover2:#28313a; --line:#262d35;--line2:#1a2027;--frame:#22282f;--txt:#E8E6E1;--dim:#8A9099;--chev:#5c636c; --inset:#14181D;--handle:#2C343C;--track:#20262d;--scrim:rgba(8,10,13,.62); --iconFilter:brightness(0) invert(1);--iconOpacity:.62;--shadow:rgba(0,0,0,.45); --success:#5FA83C;--fail:#D0453F;--empty:#2C343C;--weekGray:#39414a;--dashed:#3a434c; } [data-theme="anthracite"]{ --page:#101010;--bg:#1E1E1E;--surf:#272727;--surf2:#2F2F2F;--hover:#2C2C2C;--hover2:#343434; --line:#363636;--line2:#232323;--frame:#333;--txt:#EDEBE8;--dim:#9A9793;--chev:#6A6864; --inset:#191919;--handle:#3A3A3A;--track:#2C2C2C;--scrim:rgba(0,0,0,.64); --iconFilter:brightness(0) invert(1);--iconOpacity:.66;--shadow:rgba(0,0,0,.5); --success:#63A840;--fail:#CE4A44;--empty:#3A3A3A;--weekGray:#4A4A4A;--dashed:#505050; } [data-theme="light"]{ --page:#D9D6D1;--bg:#F6F4F1;--surf:#fff;--surf2:#EFECE7;--hover:#F1EEE9;--hover2:#EAE6E0; --line:#E4E0DA;--line2:#EDEAE4;--frame:#DDD9D3;--txt:#23262A;--dim:#6E7378;--chev:#A7A9AC; --inset:#F0EDE8;--handle:#DBD7D1;--track:#E7E3DD;--scrim:rgba(32,34,37,.38); --iconFilter:none;--iconOpacity:.55;--shadow:rgba(0,0,0,.14); --success:#4C8F2E;--fail:#B33A34;--empty:#DEDAD4;--weekGray:#C6C2BB;--dashed:#C6C2BB; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0;background:var(--bg);color:var(--txt); font:400 13px/1.45 "IBM Plex Sans",system-ui,sans-serif; font-feature-settings:"tnum" 1;-webkit-font-smoothing:antialiased; display:flex;flex-direction:column;overflow:hidden; transition:background 300ms ease,color 300ms ease; } /* Auf iOS misst height:100% das grosse Fenster — dessen unteres Ende liegt hinter der ein- und ausfahrenden Adressleiste, die Navigation waere dort teilweise verdeckt. dvh folgt der tatsaechlich sichtbaren Hoehe. Aeltere Browser behalten die Zeile darueber. */ @supports (height: 100dvh){ html,body{height:100dvh} } .mono{font-family:"IBM Plex Mono",ui-monospace,monospace} .muted{color:var(--dim);font-size:11px;line-height:1.5;margin:0} .label{font-size:11px;color:var(--dim)} .label--grow{flex:1} .pad{padding:14px 18px 24px} .stack{display:flex;flex-direction:column;gap:10px} .stack--tight{gap:7px} .stack--loose{gap:20px} .row{display:flex;align-items:center;gap:8px} .row--tight{gap:7px} .row--fill>*{flex:1} .card{background:var(--surf);border-radius:14px;padding:14px 13px} .hidden,[hidden]{display:none !important} /* Icons: lucide-static als Maskenbild, damit sie der Textfarbe folgen */ .icon{width:17px;height:17px;flex:none; background:var(--url) center/contain no-repeat; filter:var(--iconFilter);opacity:var(--iconOpacity)} .icon--sm{width:14px;height:14px} .icon--xs{width:11px;height:11px} /* ---------- Header ---------- */ /* #app steht zwischen body und den drei Bereichen. Ohne diese Regel ist die Flex-Kette unterbrochen: .scroll{flex:1} liefe ins Leere, der Bereich bekaeme Inhaltshoehe statt Resthoehe, overflow-y:auto loeste nie aus — und body{overflow:hidden} schnitte den Ueberhang unerreichbar ab. min-height:0 ist Pflicht, sonst verhindert die Vorgabe min-height:auto das Schrumpfen eines Flex-Elements unter seine Inhaltshoehe. */ #app{flex:1;min-height:0;display:flex;flex-direction:column} .hdr{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px 20px 6px} .hdr__title{font-size:17px;font-weight:600;letter-spacing:-.2px} .scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior:contain} .scroll::-webkit-scrollbar{width:0} /* ---------- Ringe ---------- */ .rings{display:flex;justify-content:space-between;gap:9px;padding:12px 18px 4px} .ring{margin:0;display:flex;flex-direction:column;align-items:center;gap:7px} .ring figcaption{font-size:11px;color:var(--dim)} .ring__box{position:relative;width:110px;height:110px} .ring__svg{width:110px;height:110px;display:block} .ring__svg path,.ring__svg circle{transition:stroke 380ms ease,stroke-width 380ms cubic-bezier(.2,.8,.2,1)} .ring__center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;pointer-events:none} .ring__num{font-size:20px;font-weight:500;letter-spacing:-1.2px} .ring__unit{font-size:8.5px;color:var(--dim)} .hint{margin:8px 18px 0;padding:9px 12px;background:var(--surf);border-radius:10px;font-size:12px;color:var(--dim);animation:hintIn 240ms ease} /* ---------- Kacheln ---------- */ .tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:18px 18px 22px} .tile{background:var(--surf);border-radius:16px;overflow:hidden;transition:background 300ms ease} .tile.is-open{grid-column:span 2} .tile__head{all:unset;display:flex;flex-direction:column;gap:10px;width:100%;min-height:88px;padding:14px;cursor:pointer;color:var(--txt);box-sizing:border-box} .tile__head:hover{background:var(--hover)} .tile__top{display:flex;align-items:center;justify-content:space-between;width:100%} .tile__name{font-size:13px;font-weight:500;line-height:1.25;text-align:left} .tile__count{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--dim)} .tile__list{display:flex;flex-direction:column;border-top:1px solid var(--line)} .sub{all:unset;display:flex;align-items:center;gap:11px;width:100%;min-height:46px;padding:8px 14px;cursor:pointer;color:var(--txt);border-bottom:1px solid var(--line2);box-sizing:border-box} .sub:hover{background:var(--hover)} .sub__name{flex:1;font-size:12.5px;line-height:1.2} .sub__chev{color:var(--chev);font-size:13px} .dots{display:flex;align-items:center;gap:3px} .dots b{width:6px;height:6px;border-radius:3px;background:var(--success);display:block} .dots i{width:6px;height:6px;border-radius:3px;background:var(--empty);display:block} .dots span{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim)} /* ---------- Verlauf ---------- */ .day{display:flex;flex-direction:column;gap:7px} .day__label{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim)} .day__list{background:var(--surf);border-radius:14px;overflow:hidden;display:flex;flex-direction:column} .entry{display:flex;align-items:center;gap:11px;padding:11px 13px;border-bottom:1px solid var(--line2);min-height:46px} .entry__dot{width:7px;height:7px;border-radius:4px;flex:none} .entry__dot--success{background:var(--success)} .entry__dot--fail{background:var(--fail)} .entry__body{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .entry__name{font-size:12.5px} .entry__note{font-size:11px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ---------- Einstellungen / Konfiguration ---------- */ .cat{background:var(--surf);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;margin-bottom:9px} .cat__head{display:flex;align-items:center;gap:10px;padding:12px 13px 9px} .cat__name{flex:1;font-size:12px;font-weight:500} .cat__slots{font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--dim)} .cfg-row{display:flex;align-items:center;gap:10px;padding:4px 13px;border-top:1px solid var(--line2);min-height:48px} .cfg-row__name{flex:1;font-size:12.5px;line-height:1.25} .is-retired .cfg-row__name,.cat.is-retired .cat__name{color:var(--dim);text-decoration:line-through} .stepper{display:flex;align-items:center} .stepper button{all:unset;cursor:pointer;width:38px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:15px} .stepper button:hover{color:var(--txt)} .stepper span{font-family:"IBM Plex Mono",monospace;font-size:13px;width:14px;text-align:center} .form{display:flex;flex-direction:column;gap:11px;padding:13px;border-top:1px solid var(--line2);background:var(--inset);animation:hintIn 200ms ease} .chips{display:flex;flex-wrap:wrap;gap:7px} .chip{all:unset;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:var(--surf);border-radius:11px;color:var(--dim)} .chip.is-active{box-shadow:inset 0 0 0 1.5px var(--txt);color:var(--txt)} .add-row{all:unset;cursor:pointer;min-height:46px;display:flex;align-items:center;gap:9px;padding:0 13px;border-top:1px solid var(--line2);font-size:12px;color:var(--dim)} .add-row:hover{color:var(--txt);background:var(--hover)} /* ---------- Buttons ---------- */ .btn{all:unset;cursor:pointer;min-height:46px;display:flex;align-items:center;justify-content:center;gap:8px; background:var(--surf);border-radius:12px;font-size:12.5px;color:var(--txt);box-sizing:border-box;padding:0 14px} .btn:hover{background:var(--hover)} .btn--flex{flex:1} .btn--block{width:100%;min-height:52px;background:var(--surf2);font-size:14px;font-weight:500;border-radius:13px} .btn--big{min-height:60px;background:var(--surf2);border-radius:14px;font-size:14px;font-weight:500} .btn--big:hover{background:var(--hover2)} .btn--quiet{color:var(--dim)} .btn.is-active{color:var(--txt)} .btn:not(.is-active).is-choice{color:var(--dim)} .btn-chip{all:unset;cursor:pointer;min-height:36px;padding:0 10px;display:flex;align-items:center;background:var(--surf);border-radius:9px;font-size:11px;color:var(--dim)} .btn-chip:hover{color:var(--txt);background:var(--hover)} .btn-chip.is-active{color:var(--txt)} .btn-quiet{all:unset;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;color:var(--dim)} .btn-quiet:hover{color:var(--txt)} .btn-icon{all:unset;cursor:pointer;min-height:44px;min-width:44px;display:flex;align-items:center;justify-content:center;color:var(--dim)} .btn-icon:hover{color:var(--txt)} .btn-link{all:unset;cursor:pointer;font-size:12.5px;font-weight:500;text-decoration:underline;min-height:44px;display:flex;align-items:center} .btn-day{all:unset;cursor:pointer;min-height:44px;padding:0 18px;display:flex;align-items:center;background:var(--inset);border-radius:11px;font-size:12.5px;color:var(--dim)} .btn-day.is-active{color:var(--txt)} .btn-row{all:unset;cursor:pointer;min-height:44px;display:flex;align-items:center;padding:0 4px 0 8px;font-size:11px;color:var(--dim)} .btn-row:hover{color:var(--txt)} :focus-visible{outline:2px solid var(--dim);outline-offset:-2px} .swatch{width:13px;height:13px;border-radius:7px;border:1px solid var(--dim);background:linear-gradient(90deg,var(--txt) 0 50%,transparent 50% 100%)} .dot{width:9px;height:9px;border-radius:5px;flex:none} .dot--success{background:var(--success)} .dot--fail{background:var(--fail)} .dot--dark{background:#14181D;border:1px solid var(--line);width:11px;height:11px} .dot--anthracite{background:#2F2F2F;border:1px solid var(--line);width:11px;height:11px} .dot--light{background:#F6F4F1;border:1px solid var(--line);width:11px;height:11px} /* ---------- Felder ---------- */ .field{display:flex;align-items:center;background:var(--surf);border-radius:13px;padding:0 6px 0 15px;gap:6px} .field__input{all:unset;flex:1;min-height:52px;font-size:13px;letter-spacing:.4px;color:var(--txt)} .field__input--boxed{background:var(--inset);border-radius:12px;min-height:46px;padding:0 14px;width:100%;letter-spacing:0} input[type=range]{flex:1;accent-color:var(--dim);height:44px} .error{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--fail);margin:0} /* ---------- Navigation ---------- */ .nav{flex:none;display:flex;border-top:1px solid var(--frame);background:var(--bg);padding-bottom:env(safe-area-inset-bottom)} .nav__item{all:unset;cursor:pointer;flex:1;min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:10.5px;color:var(--dim)} .nav__item.is-active{color:var(--txt)} /* ---------- Login ---------- */ .login{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;justify-content:space-between;padding:0 26px 30px;z-index:20} .login__body{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;max-width:320px} .login__mark{width:52px;height:52px;display:block} .login__title{font-size:22px;font-weight:600;letter-spacing:-.5px;margin:0} .login__foot{display:flex;flex-direction:column;gap:6px} /* ---------- Sheet & Toast ---------- */ .scrim{position:fixed;inset:0;background:var(--scrim);display:flex;align-items:flex-end;z-index:30} .scrim__hit{all:unset;position:absolute;inset:0;cursor:pointer} .sheet{position:relative;width:100%;background:var(--surf);border-radius:22px 22px 0 0;padding:18px 18px calc(22px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:16px;animation:sheetIn 260ms cubic-bezier(.2,.8,.2,1)} .sheet__grip{width:36px;height:4px;border-radius:2px;background:var(--handle);align-self:center} .sheet__title{font-size:16px;font-weight:600;letter-spacing:-.2px;margin:0} .toast{position:fixed;left:14px;right:14px;bottom:calc(70px + env(safe-area-inset-bottom));background:var(--surf2);border-radius:13px;padding:13px 15px;display:flex;align-items:center;gap:12px;box-shadow:0 12px 32px var(--shadow);animation:toastIn 200ms ease;z-index:40} .toast__text{flex:1;font-size:12.5px} @keyframes sheetIn{from{transform:translateY(100%)}to{transform:translateY(0)}} @keyframes toastIn{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}} @keyframes hintIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} @media (prefers-reduced-motion:reduce){*{animation-duration:1ms !important;transition-duration:1ms !important}} /* Desktop-Vorschau: Telefonbreite mittig */ @media (min-width:520px){ body{max-width:393px;margin:0 auto;box-shadow:0 0 0 1px var(--frame)} .login{left:50%;transform:translateX(-50%);width:393px} .toast{left:50%;transform:translateX(-50%);width:365px;right:auto} }