/* ===================================================================== BLYNQ – Stylesheet --------------------------------------------------------------------- Alles Wichtige zum Anpassen steht ganz oben in :root (Farben, Radius, Abstände). Ändere einfach die Werte – die ganze App zieht mit. ===================================================================== */ /* Weiche, abgerundete Schrift – lokal eingebunden (offline-fähig) */ @font-face { font-family: "Nunito"; src: url("nunito.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; } :root { /* ---- Farben (werden teils per JS/Settings überschrieben) ---- */ --accent: #4f8cff; /* Akzentfarbe – in Settings änderbar */ --accent-soft: rgba(79,140,255,.15); --bg: #0b0d12; /* App-Hintergrund */ --bg-elev: #141821; /* Karten / erhöhte Flächen */ --bg-elev-2: #1c2230; /* Inputs / zweite Ebene */ --line: #232a38; /* Trennlinien / Rahmen */ --text: #eef1f6; /* Haupttext */ --text-dim: #9aa4b6; /* Sekundärtext */ --text-faint: #616b7d; /* sehr dezenter Text */ --good: #34d399; --warn: #fbbf24; --bad: #f87171; /* ---- Form ---- */ --radius: 16px; --radius-sm: 11px; --gap: 14px; /* ---- System ---- */ --tabbar-h: 64px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --font: "Nunito", ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* ---- Heller Modus (Settings -> Theme) ---- */ :root[data-theme="light"] { --bg: #f4f6fb; --bg-elev: #ffffff; --bg-elev-2: #eef1f7; --line: #e2e7f0; --text: #131722; --text-dim: #5b6577; --text-faint: #98a1b2; --accent-soft: rgba(79,140,255,.14); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font); overscroll-behavior: none; /* kein Bouncen / Wegziehen */ width: 100%; } body { /* Die +1px sind Absicht: Eine Seite, die exakt so hoch ist wie das Fenster, ist nicht scrollbar – und in dem Zustand meldet der mobile Browser nach dem Aufwecken eine veraltete Höhe. Folge: Die Tab-Leiste sitzt zu hoch, darunter klafft ein Streifen. Genau deshalb war der Fehler nur in Plan und Community sichtbar (kurzer Inhalt) und verschwand in Stats/Settings (langer Inhalt). Ein Pixel Scrollweg hält die Höhe stabil. */ min-height: calc(100dvh + 1px); touch-action: pan-y; /* Seite nur vertikal ziehbar, nicht links/rechts */ /* Bewusst NUR hier, nicht auf : dort würde overflow-x das html-Element zum eigenen Scroll-Container machen – Chrome auf Android lässt sich dann nicht mehr vertikal scrollen (iOS verzeiht es). Von body aus wirkt die Regel über die Overflow-Propagierung ohnehin auf das Ansichtsfenster. */ overflow-x: hidden; /* kein horizontales Scrollen der Seite */ } /* Wortmarke – nur noch auf dem Login-Screen (siehe .auth-brand) */ .brand-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .brand-name { font-weight: 800; font-size: 20px; letter-spacing: -.5px; } /* ============ APP / VIEWS ============ */ .app { /* safe-t stand vorher in der Kopfzeile – ohne sie muss der Abstand zur Statusleiste/Notch hier hin, sonst rutscht der Titel darunter. */ padding: calc(16px + var(--safe-t)) 16px calc(var(--tabbar-h) + var(--safe-b) + 24px); max-width: 640px; margin: 0 auto; touch-action: pan-y; /* nur vertikal – kein seitliches Ziehen */ overscroll-behavior: contain; } .view { display: none; animation: fade .18s ease; } .view.active { display: block; } @keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .view-head { display: flex; align-items: baseline; justify-content: space-between; margin: 4px 2px 16px; } .view-title { font-size: 27px; font-weight: 800; letter-spacing: -.6px; } .view-sub { color: var(--text-dim); font-size: 13px; } /* ============ KARTEN ============ */ .card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: var(--gap); } .card-tap { cursor: pointer; transition: transform .08s ease, border-color .15s; } .card-tap:active { transform: scale(.985); } .card-title { font-weight: 700; font-size: 16px; margin: 0 0 3px; } .card-meta { color: var(--text-dim); font-size: 13px; } .row { display: flex; align-items: center; gap: 12px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .spacer { flex: 1; } /* ============ BUTTONS ============ */ .btn { appearance: none; border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--text); font-family: inherit; font-weight: 600; font-size: 15px; padding: 12px 16px; border-radius: var(--radius-sm); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .08s ease, filter .15s, background .15s; } .btn:active { transform: scale(.97); } .btn-primary { background: var(--accent); border-color: transparent; color: #fff; } .btn-primary:active { filter: brightness(1.08); } .btn-ghost { background: transparent; border-color: transparent; color: var(--accent); } .btn-danger { background: transparent; border-color: var(--line); color: var(--bad); } .btn-block { width: 100%; } .btn-sm { padding: 8px 12px; font-size: 14px; } .btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--bg-elev-2); border: 1px solid var(--line); } .btn-icon svg { width: 20px; height: 20px; } .icon-plus { width: 22px; height: 22px; stroke: currentColor; stroke-width: 2.4; fill: none; } /* Runder Plus-Button oben rechts */ .fab-top { width: 40px; height: 40px; border-radius: 50%; padding: 0; background: var(--accent); color: #fff; border: none; display: grid; place-items: center; cursor: pointer; } .fab-top svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.4; fill: none; } /* ============ FORM ELEMENTE ============ */ label.field { display: block; margin-bottom: 14px; } .field-label { display: block; font-size: 13px; color: var(--text-dim); margin-bottom: 6px; font-weight: 600; } input, select, textarea { width: 100%; font-family: inherit; font-size: 16px; color: var(--text); background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; outline: none; transition: border-color .15s; } input:focus, select:focus, textarea:focus { border-color: var(--accent); } input.invalid { border-color: var(--bad); box-shadow: 0 0 0 2px color-mix(in srgb, var(--bad) 22%, transparent); } input[type="number"] { -moz-appearance: textfield; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } textarea { min-height: 76px; resize: vertical; } /* Übungsnamen-Dropdown (Autovervollständigung) */ .combo { position: relative; } .combo-inp { position: relative; } .combo-inp > input { width: 100%; padding-right: 40px; } .combo-toggle { position: absolute; right: 3px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border: none; background: transparent; color: var(--text-dim); display: grid; place-items: center; cursor: pointer; padding: 0; } .combo-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .15s ease; } .combo.open .combo-toggle svg { transform: rotate(180deg); color: var(--accent); } .combo-pop { position: fixed; z-index: 200; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; max-height: 240px; overflow-y: auto; padding: 4px; box-shadow: 0 14px 38px rgba(0,0,0,.5); -webkit-overflow-scrolling: touch; } .ex-type { margin: 11px 14px 10px; width: calc(100% - 28px); } .combo-item { display: block; width: 100%; text-align: left; padding: 11px 12px; border: none; background: transparent; color: var(--text); font-family: inherit; font-size: 15px; cursor: pointer; border-radius: 8px; } .combo-item:active { background: var(--accent); color: #fff; } .combo-empty { padding: 11px 12px; color: var(--text-dim); font-size: 14px; } .seg { display: flex; background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 4px; gap: 4px; } .seg button { flex: 1; border: none; background: transparent; color: var(--text-dim); font-family: inherit; font-weight: 600; font-size: 14px; padding: 9px; border-radius: 9px; cursor: pointer; } .seg button.on { background: var(--accent); color: #fff; } /* Farb-Auswahl (Settings) */ .swatches { display: flex; gap: 12px; flex-wrap: wrap; } .swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; cursor: pointer; } .swatch.on { border-color: var(--text); } /* Farbwelt-Auswahl */ .cw-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .cw { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 10px 10px; cursor: pointer; display: flex; flex-direction: column; gap: 9px; font-family: inherit; transition: transform .08s ease; } .cw:active { transform: scale(.96); } .cw.on { outline: 2.5px solid var(--accent); outline-offset: 1px; } .cw-preview { display: flex; gap: 5px; align-items: center; } .cw-bar { flex: 1; height: 10px; border-radius: 4px; } .cw-accent { width: 10px; height: 10px; border-radius: 50%; flex: none; } .cw-name { font-size: 12px; font-weight: 700; text-align: left; } /* Akzentfarbe – Regenbogen-Schieber (touch-freundlich) */ .hue-row { display: flex; align-items: center; gap: 14px; margin-top: 16px; } .hue-slider { flex: 1; -webkit-appearance: none; appearance: none; border-radius: 999px; padding: 0; margin: 0; outline: none; cursor: pointer; /* Ohne das erbt der Regler pan-y vom Body und lässt sich per Finger nicht waagerecht ziehen – er bringt seine eigene Geste mit. */ touch-action: none; /* Sichtbar bleibt ein 16px-Band, greifbar sind 36px: der durchsichtige Rand vergrößert nur die Trefferfläche für den Daumen. */ height: 36px; border: 10px solid transparent; background-image: linear-gradient(to right, hsl(0 72% 60%), hsl(60 72% 60%), hsl(120 72% 60%), hsl(180 72% 60%), hsl(240 72% 60%), hsl(300 72% 60%), hsl(360 72% 60%)); /* muss NACH background stehen – die Kurzschreibweise würde es zurücksetzen */ background-clip: padding-box; } .hue-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.35); cursor: pointer; } .hue-slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: #fff; border: 3px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.25); cursor: pointer; } .hue-preview { width: 36px; height: 36px; border-radius: 50%; flex: none; border: 2px solid var(--line); box-shadow: 0 2px 8px rgba(0,0,0,.2); } /* ============ EMPTY STATE ============ */ .empty { text-align: center; padding: 48px 20px; color: var(--text-dim); } .empty svg { width: 46px; height: 46px; stroke: var(--text-faint); fill: none; stroke-width: 1.6; margin-bottom: 12px; } .empty h3 { color: var(--text); margin: 0 0 6px; font-size: 17px; } .empty p { margin: 0 0 18px; font-size: 14px; } /* ============ EXERCISE / SET LISTE ============ */ .ex-block { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 14px; overflow: hidden; } /* Aufklappbarer Satz-Bereich je Übung im Plan-Editor */ .set-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 12px; border-radius: var(--radius-sm); background: var(--bg-elev-2); border: 1px solid var(--line); color: var(--text-dim); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; text-align: left; } .set-toggle span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; } .set-toggle svg { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; transition: transform .18s ease; } .set-toggle.open { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .set-toggle.open svg { transform: rotate(180deg); } .p-sets { margin-top: 10px; } .p-set-row { display: flex; align-items: flex-end; gap: 8px; padding: 6px 0; } .p-set-row + .p-set-row { border-top: 1px solid var(--line); } .p-set-no { flex: none; width: 26px; height: 40px; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .p-set-row .mini-x { align-self: center; padding: 0 2px; } /* Griff zum Umsortieren der Übungen im Plan-Editor */ .drag-grip { flex: none; width: 32px; align-self: stretch; padding: 0; display: grid; place-items: center; cursor: grab; background: none; border: none; color: var(--text-faint); touch-action: none; /* der Griff zieht selbst, kein Scrollen */ } .drag-grip svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; } .drag-grip:active { cursor: grabbing; color: var(--accent); } .ex-block.dragging { position: relative; z-index: 5; border-color: var(--accent); box-shadow: 0 14px 30px rgba(0,0,0,.45); } .ex-block.dragging .drag-grip { color: var(--accent); } .ex-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px; background: var(--bg-elev-2); } .ex-name { font-weight: 700; flex: 1; } .ex-name-in { flex: 1; border: none; background: transparent; padding: 0; font-weight: 700; font-size: 16px; color: var(--text); } .ex-name-in:focus { outline: none; } .ex-name-fixed { flex: 1; font-weight: 700; font-size: 16px; color: var(--text); } .ex-block.ex-done .ex-head { background: color-mix(in srgb, var(--good) 14%, var(--bg-elev-2)); } .ex-check { color: var(--good); font-weight: 800; font-size: 17px; flex: none; } /* Ausgelassene Übung im Verlauf */ .ex-block.ex-skipped { border-color: color-mix(in srgb, var(--bad) 42%, var(--line)); } .ex-block.ex-skipped .ex-head { background: color-mix(in srgb, var(--bad) 12%, var(--bg-elev-2)); } .ex-block.ex-skipped .ex-name-fixed { color: var(--text-dim); text-decoration: line-through; } .ex-skip-tag { font-size: 12px; font-weight: 700; color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); padding: 3px 10px; border-radius: 999px; flex: none; } /* Kopfzeile der Satz-Tabelle */ .set-head { display: grid; gap: 7px; align-items: center; padding: 8px 12px 2px; color: var(--text-faint); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } /* mittig über den Feldern – die tragen links/rechts die ±-Knöpfe */ .set-head > div { text-align: center; } .set-row { display: grid; gap: 7px; align-items: center; padding: 7px 12px; transition: background .15s; } .set-row + .set-row { border-top: 1px solid var(--line); } .set-row input { padding: 12px 10px; text-align: center; font-size: 16px; } /* Wdh. und Gewicht mit ± : die Knöpfe liegen im Feld, sind optisch stark zurückgenommen, haben durch die volle Feldhöhe und 30px Breite aber eine bequeme Trefferfläche für den Daumen. */ .stepper { display: flex; align-items: stretch; position: relative; min-width: 0; } .stepper input { flex: 1; min-width: 0; padding-left: 27px; padding-right: 27px; } .step-btn { position: absolute; top: 0; bottom: 0; width: 30px; display: grid; place-items: center; background: none; border: none; padding: 0; cursor: pointer; color: var(--text-faint); font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1; user-select: none; -webkit-user-select: none; transition: color .12s, background .12s; } .step-btn[data-bump="-1"] { left: 0; border-radius: var(--radius-sm) 0 0 var(--radius-sm); } .step-btn[data-bump="1"] { right: 0; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } .step-btn:active { color: var(--accent); background: var(--accent-soft); } .set-row.done .step-btn { opacity: .5; } /* Wiederholungen: reine Anzeige, nur über ± änderbar – kein Tastaturfeld */ .stepper input.ro { pointer-events: none; font-weight: 700; } /* − Satz / + Satz nebeneinander */ .set-actions { display: flex; } .set-actions .set-add { flex: 1; } .set-actions .set-add + .set-add { border-left: 1px dashed var(--line); } /* Vorgeschlagener Wert (Arbeitsgewicht der letzten Einheit): sichtbar, aber erkennbar noch nicht bestätigt – wird beim Ändern oder Abhaken normal. */ .set-row input.pre { color: var(--text-faint); } .set-row input.pre:focus { color: var(--text); } /* Abhak-Button pro Satz */ .set-check { width: 44px; height: 44px; border-radius: 12px; padding: 0; border: 1.5px solid var(--line); background: var(--bg-elev-2); color: var(--text-dim); font-weight: 800; font-size: 16px; display: grid; place-items: center; cursor: pointer; transition: transform .08s ease, background .15s, border-color .15s; } .set-check:active { transform: scale(.9); } .set-row.done { background: color-mix(in srgb, var(--good) 13%, transparent); } .set-row.done .set-check { background: var(--good); border-color: transparent; color: #fff; } .set-row.done input { opacity: .5; } .mini-x { background: transparent; border: none; color: var(--text-faint); font-size: 20px; cursor: pointer; padding: 0; } .set-add { width: 100%; background: transparent; border: none; border-top: 1px dashed var(--line); color: var(--accent); font-weight: 600; padding: 13px; cursor: pointer; font-family: inherit; font-size: 14px; } /* Fortschrittsbalken im Workout */ .wo-progress { margin: 0 2px 18px; } .wo-bar { height: 9px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; } .wo-bar > span { display: block; height: 100%; background: var(--good); border-radius: 999px; transition: width .3s ease; } .wo-bar-txt { font-size: 12px; color: var(--text-dim); margin-top: 7px; font-weight: 600; } /* ============ SWIPE (Übung erledigt / auslassen) ============ */ .swipe-hint-txt { text-align: center; font-size: 11px; color: var(--text-faint); margin: 0 0 12px; } .ex-swipe { position: relative; overflow: hidden; border-radius: var(--radius-sm); margin-bottom: 14px; touch-action: pan-y; /* vertikal scrollen bleibt nativ */ } .ex-swipe .ex-block { position: relative; z-index: 1; margin-bottom: 0; background: var(--bg-elev); /* deckt den Farb-Hintergrund ab */ will-change: transform; touch-action: pan-y; /* horizontal = für die Wisch-Geste reserviert */ } .ex-swipe-hint { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 24px; font-weight: 800; font-size: 15px; color: #fff; opacity: 0; } .hint-done { justify-content: flex-end; background: var(--good); } /* links wischen -> rechts sichtbar */ .hint-skip { justify-content: flex-start; background: var(--bad); } /* rechts wischen -> links sichtbar */ .ex-swipe.sw-left .hint-done { opacity: 1; } .ex-swipe.sw-right .hint-skip { opacity: 1; } /* Erledigt/Ausgelassen-Pillen unten */ .ex-pills { display: flex; flex-direction: column; gap: 8px; margin-bottom: 6px; } .ex-pill { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; cursor: pointer; animation: pillIn .3s cubic-bezier(.2,.8,.2,1); } .ex-pill:active { transform: scale(.985); } .pill-done { background: color-mix(in srgb, var(--good) 15%, transparent); border: 1px solid color-mix(in srgb, var(--good) 40%, transparent); } .pill-skip { background: color-mix(in srgb, var(--bad) 13%, transparent); border: 1px solid color-mix(in srgb, var(--bad) 38%, transparent); } .pill-ico { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 14px; color: #fff; flex: none; } .pill-done .pill-ico { background: var(--good); } .pill-skip .pill-ico { background: var(--bad); } .pill-name { flex: 1; font-weight: 600; } .pill-done .pill-name { text-decoration: line-through; opacity: .75; } .pill-skip .pill-name { opacity: .7; } .pill-tag { font-size: 12px; color: var(--text-dim); } @keyframes pillIn { from { opacity: 0; transform: translateY(-10px) scale(.97); } to { opacity: 1; transform: none; } } /* ============ PAUSEN-TIMER (schwebend im Workout) ============ */ .rest-timer { position: fixed; right: 16px; bottom: calc(82px + var(--safe-b)); z-index: 55; } .rest-fab { width: 62px; height: 62px; border-radius: 50%; padding: 0; border: none; cursor: pointer; background: var(--accent); display: grid; place-items: center; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .1s ease; } .rest-fab:active { transform: scale(.92); } .rest-fab-inner { width: 54px; height: 54px; border-radius: 50%; background: var(--bg-elev); display: grid; place-items: center; color: var(--accent); } .rest-timer.running .rest-fab-inner { color: var(--text); } .rest-ico { width: 26px; height: 26px; } .rest-timer.running .rest-ico { display: none; } .rest-time { display: none; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; letter-spacing: -.5px; } .rest-timer.running .rest-time { display: block; } /* nur zeigen, wenn Timer läuft – sonst Icon zentriert */ .rest-pop { position: absolute; bottom: 72px; right: 0; width: 214px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; padding: 14px; box-shadow: 0 12px 34px rgba(0,0,0,.45); animation: pillIn .18s ease; } .rest-pop-title { font-weight: 700; font-size: 14px; margin-bottom: 10px; } .rest-pop-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rest-preset { padding: 13px 0; border-radius: 11px; border: 1px solid var(--line); background: var(--bg-elev-2); color: var(--text); font-weight: 700; font-size: 15px; font-family: inherit; cursor: pointer; font-variant-numeric: tabular-nums; } .rest-preset:active { background: var(--accent); color: #fff; border-color: transparent; } /* zuletzt genutzte Pause – schnell wiederfindbar */ .rest-preset.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .rest-pop-time { font-size: 34px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; margin-bottom: 12px; letter-spacing: -1px; } .rest-pop-row { display: flex; gap: 8px; } .rest-pop-row .btn { flex: 1; } .tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); } .chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; } /* ============ TIMER ============ */ .timer-wrap { text-align: center; padding: 18px 16px 16px; } .timer-ring { position: relative; width: 240px; height: 240px; margin: 6px auto 20px; } .timer-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; } .timer-ring .track { fill: none; stroke: var(--line); stroke-width: 12; } .timer-ring .prog { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .3s linear; } .timer-num { position: absolute; inset: 0; display: grid; place-items: center; flex-direction: column; } .timer-time { font-size: 52px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -1px; } .timer-label { color: var(--text-dim); font-size: 14px; margin-top: 2px; } .preset-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 8px; margin-bottom: 16px; } .preset { padding: 14px 0; border-radius: var(--radius-sm); background: var(--bg-elev); border: 1px solid var(--line); font-weight: 700; cursor: pointer; color: var(--text); font-family: inherit; } .preset.on { border-color: var(--accent); color: var(--accent); } .timer-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ============ STATS ============ */ .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: var(--gap); } .stat-tile { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; } .stat-val { font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1; } .stat-key { color: var(--text-dim); font-size: 13px; margin-top: 6px; } .chart-card { padding: 16px 12px 12px; } .chart-legend { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-dim); margin: 0 6px 4px; } .lg-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; } /* Übungs-Tabelle in den Stats */ .stat-table { width: 100%; border-collapse: collapse; } .stat-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--text-faint); font-weight: 700; padding: 12px 14px 8px; } .stat-table th.num { text-align: right; } .stat-table td { padding: 14px; border-top: 1px solid var(--line); font-size: 15px; } .stat-table .st-name { font-weight: 700; } .stat-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); font-weight: 600; } .stat-table .st-ww { color: var(--text-dim); font-weight: 500; } .stat-table th.num { padding-left: 4px; } .stat-table .st-chev { width: 22px; padding-left: 0; text-align: right; } .stat-table .st-chev svg { width: 16px; height: 16px; stroke: var(--text-faint); fill: none; stroke-width: 2; vertical-align: middle; } .stat-row { cursor: pointer; } .stat-row:active { background: var(--bg-elev-2); } canvas { width: 100%; display: block; } /* Statistik-Bereichsüberschriften */ .stat-section { font-weight: 800; font-size: 19px; margin: 26px 2px 12px; } .stat-section:first-of-type { margin-top: 20px; } /* Überschrift über einer Tabellen-Karte */ .table-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 700; color: var(--text); margin: 18px 4px 8px; } .table-head:first-of-type { margin-top: 0; } .table-head span { font-size: 11.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .3px; } /* Körpermaße */ .measure-row { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 12px 2px; border-top: 1px solid var(--line); } .measure-row:first-of-type { border-top: none; } .measure-row:active { background: var(--bg-elev-2); } .measure-chev { width: 16px; height: 16px; stroke: var(--text-faint); fill: none; stroke-width: 2; flex-shrink: 0; } .measure-delta { font-size: 12px; font-weight: 700; margin-left: 6px; color: var(--text-dim); } .measure-delta.up { color: var(--accent); } .measure-delta.down { color: var(--good); } .unit-sm { font-size: 14px; color: var(--text-dim); font-weight: 600; } /* Zeile unter einem Diagramm, die den vollen Verlauf öffnet */ .chart-open { width: 100%; margin-top: 8px; padding: 9px 6px 2px; display: flex; align-items: center; justify-content: center; gap: 4px; background: none; border: none; cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-dim); } .chart-open svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; } .chart-open:active { color: var(--accent); } /* Bestätigung: Übung entfernen / neu tracken */ .reset-name { font-size: 21px; font-weight: 800; text-align: center; margin: 2px 0 16px; } .reset-item { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); } .reset-item:first-child { border-top: none; padding-top: 4px; } .reset-item b { font-size: 14.5px; font-weight: 700; display: block; margin-bottom: 2px; } .reset-item .card-meta { line-height: 1.45; } .reset-ico { flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 1px; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--accent-soft); color: var(--accent); } .reset-ico.ok { background: color-mix(in srgb, var(--good) 16%, transparent); color: var(--good); } /* Manuelle PR/WW-Werte */ .manual-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; margin-left: 2px; } .manual-hint { font-size: 12.5px; color: var(--accent); background: var(--accent-soft); border-radius: 10px; padding: 8px 12px; margin: 0 0 12px; } .hist-month { font-size: 13px; font-weight: 700; color: var(--text-dim); margin: 16px 4px 8px; text-transform: uppercase; letter-spacing: .4px; } .hist-item { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); } .hist-item:last-child { border-bottom: none; } .hist-date { width: 44px; text-align: center; } .hist-date .d { font-size: 19px; font-weight: 800; line-height: 1; } .hist-date .m { font-size: 11px; color: var(--text-dim); text-transform: uppercase; } /* Alle Sätze einer Einheit im Verlauf – darf umbrechen statt abzuschneiden */ .hist-sets { flex: 1; min-width: 0; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.4; } /* ---- Community ---- */ .switch { flex: none; width: 48px; height: 29px; border-radius: 999px; padding: 0; border: 1px solid var(--line); background: var(--bg-elev-2); cursor: pointer; position: relative; transition: background .18s, border-color .18s; } .switch > span { position: absolute; top: 2px; left: 2px; width: 23px; height: 23px; border-radius: 50%; /* helle Farbwelten: --text-faint hebt sich von der hellen Schiene ab */ background: var(--text-faint); box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s ease, background .18s; } .switch.on { background: var(--accent); border-color: transparent; } .switch.on > span { transform: translateX(19px); background: #fff; } .switch:active > span { width: 27px; } /* kurzes Zusammendrücken beim Tippen */ /* Kennzahlen-Zeilen in der Gewichts-Analyse */ .bw-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid var(--line); font-size: 14px; } .bw-row:first-of-type { border-top: none; } .bw-row > span:first-child { color: var(--text-dim); } .bw-row > span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } /* Die drei Vorlagen-Aktionen nebeneinander – gleich breit, knappe Beschriftung */ .tpl-actions { display: flex; gap: 6px; } .tpl-actions .btn { flex: 1; min-width: 0; padding: 9px 4px; font-size: 13px; } /* Einstiegsseite, solange die Community aus ist */ .comm-intro { text-align: center; padding: 22px 8px 20px; } .comm-intro-ico { width: 68px; height: 68px; border-radius: 20px; display: inline-grid; place-items: center; background: var(--accent-soft); color: var(--accent); margin-bottom: 14px; } .comm-intro-ico svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .comm-intro-titel { font-size: 21px; font-weight: 800; letter-spacing: -.3px; } .comm-intro-text { color: var(--text-dim); font-size: 14px; line-height: 1.5; margin: 6px auto 0; max-width: 400px; } /* Suchfeld über der Profilliste */ .comm-search { position: relative; margin-bottom: var(--gap); } .comm-search input { padding-left: 42px; padding-right: 40px; } .comm-search > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--text-faint); fill: none; stroke-width: 2; stroke-linecap: round; pointer-events: none; } .comm-search button { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; padding: 0; border: none; background: none; color: var(--text-faint); font-size: 15px; cursor: pointer; } /* schlägt das display der Regel darüber, sonst bliebe das ✕ sichtbar */ .comm-search button[hidden] { display: none; } .comm-day { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 8px; } .comm-day.leer { opacity: .5; } .comm-wd { flex: none; width: 34px; font-weight: 800; font-size: 13px; color: var(--text-dim); } .comm-day .btn-sm { padding: 7px 10px; font-size: 13px; } .comm-avatar { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 800; font-size: 17px; } /* Karte "Aktuelle Sätze" in der Übungs-Detailansicht */ .cur-set { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); } .cur-set:first-of-type { border-top: none; } .cur-no { flex: none; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; background: var(--bg-elev-2); color: var(--text-faint); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; } .cur-val { font-weight: 700; font-variant-numeric: tabular-nums; } .cur-sum { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--text-dim); font-size: 13px; font-weight: 600; } /* Veränderung zur vorherigen Einheit im Übungs-Verlauf */ .hist-diff { font-size: 12px; font-weight: 700; color: var(--text-faint); font-variant-numeric: tabular-nums; } .hist-diff.up { color: var(--good); } .hist-diff.down { color: var(--text-dim); } /* ============ SETTINGS ============ */ .set-list { } .set-item { display: flex; align-items: center; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--line); } .set-item:last-child { border-bottom: none; } .set-item .k { font-weight: 600; } .set-item .sub { font-size: 12px; color: var(--text-dim); } /* (Die frühere, auf gebaute Schalter-Variante stand hier. Sie wurde nicht mehr benutzt, überschrieb aber die aktuelle Definition weiter oben – daher entfernt. Der Schalter steht jetzt nur noch im Community-Abschnitt.) */ /* ============ BOTTOM TABBAR ============ */ .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b); display: flex; background: color-mix(in srgb, var(--bg-elev) 92%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-top: 1px solid var(--line); } /* Verlängert die Leiste nach unten aus dem Bild heraus. Bleibt beim Aufwecken doch ein Spalt zwischen Leiste und Bildschirmrand, ist er dadurch in der Farbe der Leiste statt schwarz. Im Normalfall liegt das unsichtbar außerhalb. */ .tabbar::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 160px; background: var(--bg-elev); pointer-events: none; } .tab { flex: 1; background: none; border: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; color: var(--text-faint); font-family: inherit; font-size: 11px; font-weight: 600; transition: color .15s; } .tab-ico { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .tab.on { color: var(--accent); } .tab.on .tab-ico { stroke-width: 2.1; } /* ============ SHEET / MODAL ============ */ .sheet-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.5); display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease; } /* Höhere Spezifität als .sheet-backdrop, damit [hidden] wirklich versteckt */ .sheet-backdrop[hidden] { display: none; } .sheet { width: 100%; max-width: 640px; max-height: 92dvh; overflow-y: auto; touch-action: pan-y; overscroll-behavior: contain; /* kein seitliches Ziehen */ background: var(--bg-elev); border-top-left-radius: 22px; border-top-right-radius: 22px; padding: 10px 18px calc(24px + var(--safe-b)); animation: slideup .26s cubic-bezier(.2,.8,.2,1); } @keyframes slideup { from { transform: translateY(100%); } to { transform: none; } } /* Griffleiste: sieht aus wie ein schmaler Strich, ist zum Ziehen aber ein 24px hohes Band über die volle Breite – sonst kaum zu treffen. touch-action:none, damit das Wischen nicht als Scrollen abgefangen wird. */ .sheet-grip { height: 24px; margin: -7px 0 7px; display: grid; place-items: center; cursor: grab; touch-action: none; } .sheet-grip::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: var(--line); transition: background .15s, width .15s; } .sheet-grip:active { cursor: grabbing; } .sheet-grip:active::before { background: var(--text-faint); width: 52px; } .sheet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .sheet-title { font-size: 20px; font-weight: 800; } /* ---- Vollbild-Workout-Screen ---- */ .sheet.full { max-height: 100dvh; height: 100dvh; border-radius: 0; padding: 0; overflow: hidden; display: flex; flex-direction: column; } .wo-top { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: calc(10px + var(--safe-t)) 12px 10px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg-elev) 92%, transparent); } .wo-top-title { font-weight: 800; font-size: 18px; letter-spacing: -.3px; } .wo-top-spacer { width: 92px; flex: none; } /* symmetrisch zum Abbrechen-Button */ .wo-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; padding: 16px 18px 24px; touch-action: pan-y; overscroll-behavior: contain; } .wo-bottom { flex: none; padding: 12px 18px calc(12px + var(--safe-b)); border-top: 1px solid var(--line); background: var(--bg-elev); } .ex-grip { color: var(--text-faint); font-size: 16px; flex: none; opacity: .5; } /* ============ TOAST ============ */ .toast { position: fixed; left: 50%; bottom: calc(var(--tabbar-h) + var(--safe-b) + 18px); transform: translateX(-50%); z-index: 60; background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 14px; box-shadow: 0 8px 30px rgba(0,0,0,.3); animation: toastin .25s ease; } @keyframes toastin { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%,0); } } .divider { height: 1px; background: var(--line); margin: 18px 0; border: none; } .text-dim { color: var(--text-dim); } .mt { margin-top: 14px; } .center { text-align: center; } /* ============ WOCHENPLAN ============ */ .wd-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 4px 0 18px; } .wd { position: relative; padding: 12px 0 9px; border-radius: 12px; background: var(--bg-elev); border: 1px solid var(--line); text-align: center; cursor: pointer; transition: transform .08s ease; } .wd:active { transform: scale(.94); } .wd-d { font-size: 13px; font-weight: 700; color: var(--text-dim); } .wd.today:not(.sel) { border-color: var(--accent); } .wd.sel { background: var(--accent); border-color: transparent; } .wd.sel .wd-d { color: #fff; } .wd-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); margin: 5px auto 0; } .wd-dot-note { background: var(--text-dim); } /* Notiz-Tag: grauer Punkt */ .wd.sel .wd-dot { background: #fff; } .wd.wd-rest { opacity: .45; } /* Ruhetag ausgegraut */ .wd.wd-rest.sel { opacity: .85; } .plan-ex { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); } .plan-ex:first-child { border-top: none; } /* Ruhetag-Karte */ .day-rest-card { opacity: .85; } .rest-badge { width: 46px; height: 46px; border-radius: 13px; flex: none; background: var(--bg-elev-2); display: grid; place-items: center; color: var(--text-dim); } .rest-badge svg { width: 24px; height: 24px; } /* ============ LOGIN-SCREEN ============ */ .auth-screen { position: fixed; inset: 0; z-index: 100; overflow: hidden; background: var(--bg); display: grid; place-items: center; padding: 24px calc(24px + env(safe-area-inset-right,0)) 24px calc(24px + env(safe-area-inset-left,0)); } /* Zwei weiche Lichtkegel in der Akzentfarbe – gibt dem sonst flachen Hintergrund Tiefe, ohne von den Eingabefeldern abzulenken. */ .auth-screen::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(58% 38% at 50% 14%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%), radial-gradient(48% 32% at 50% 102%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 72%); } /* nach dem Login ausblenden – schlägt das display:grid oben */ .auth-screen[hidden] { display: none !important; } .auth-card { width: 100%; max-width: 360px; position: relative; z-index: 1; } .auth-brand { display: grid; place-items: center; margin-bottom: 26px; } .auth-logo { width: 76px; height: 76px; border-radius: 23px; display: grid; place-items: center; color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, var(--bg-elev)); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 14px 34px color-mix(in srgb, var(--accent) 26%, transparent); } .auth-logo svg { width: 48px; height: 48px; } .auth-word { font-size: 31px; font-weight: 800; letter-spacing: -.9px; margin-top: 15px; } .auth-tag { color: var(--text-dim); font-size: 13.5px; margin-top: 3px; } .auth-form { padding: 20px 18px 18px; box-shadow: 0 18px 44px rgba(0,0,0,.34); } .auth-msg { color: var(--bad); font-size: 13px; min-height: 18px; margin: 2px 2px 10px; text-align: center; } .auth-foot { text-align: center; color: var(--text-faint); font-size: 12px; margin-top: 18px; } /* ============ DESKTOP (ab 900px) ========================================== Am Handy bleibt alles unverändert. Auf großen Bildschirmen wandert die Navigation an den linken Rand, der Inhalt bekommt Breite statt in einer handybreiten Spalte zu kleben, und Fenster erscheinen mittig als Dialog statt von unten hereinzufahren. */ @media (min-width: 900px) { :root { --sidebar: 236px; } /* --- Tab-Leiste wird zur Seitenleiste --- */ .tabbar { top: 0; bottom: 0; right: auto; width: var(--sidebar); height: 100dvh; padding: 28px 14px 18px; flex-direction: column; justify-content: flex-start; gap: 6px; border-top: none; border-right: 1px solid var(--line); } .tab { flex: none; flex-direction: row; justify-content: flex-start; gap: 14px; padding: 13px 16px; border-radius: 12px; font-size: 15px; transition: color .15s, background .15s; } .tab:hover { color: var(--text-dim); background: var(--bg-elev-2); } .tab.on { background: var(--accent-soft); } .tab.on:hover { color: var(--accent); } .tab-ico { width: 22px; height: 22px; } /* --- Inhalt neben der Leiste, mittig und lesbar begrenzt --- */ .app { max-width: none; margin: 0; padding: 34px 40px 60px calc(var(--sidebar) + 40px); } .view { max-width: 1000px; margin: 0 auto; } .view-title { font-size: 32px; } /* Mehr Platz -> mehr Spalten, wo es sich lohnt */ .stat-grid { grid-template-columns: repeat(4, 1fr); } .cw-grid { grid-template-columns: repeat(6, 1fr); } /* --- Fenster: mittiger Dialog statt Bottom-Sheet --- */ .sheet-backdrop { align-items: center; padding: 28px; } .sheet { max-width: 640px; max-height: 86dvh; border-radius: 20px; padding: 18px 22px 24px; animation: dialogin .18s ease; } .sheet.full { width: 100%; max-width: 900px; height: auto; max-height: 88dvh; border-radius: 20px; padding: 0; } .sheet-grip { display: none; } /* Wischgriff ergibt mit Maus keinen Sinn */ .wo-bottom { padding-bottom: 14px; } @keyframes dialogin { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } } /* --- Schwebende Elemente an den Bildschirm anpassen --- */ .rest-timer { right: 28px; bottom: 28px; } .toast { left: calc(50% + var(--sidebar) / 2); bottom: 28px; } /* Zeigefinger-Feedback braucht es nicht, Mauszeiger schon */ .card-tap:hover, .stat-row:hover, .hist-item[data-act]:hover { border-color: var(--line); } /* --- Plan: Wochenplan links, Verlauf rechts --- */ .plan-cols { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 30px; align-items: start; } .plan-col > .row-between:first-child { margin-top: 4px !important; } /* Verlauf-Kopf auf Höhe der Leiste */ .wd-strip { gap: 8px; } .wd { padding: 12px 0; } /* Der ausgewählte Tag darf die volle Spaltenhöhe nutzen */ .plan-ex { padding: 11px 0; } /* --- Community: Profile als Kachelraster --- */ #comm-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } #comm-list > .card { margin-bottom: 0; height: 100%; } #comm-list > .empty { grid-column: 1 / -1; } .comm-search { max-width: 520px; } /* Eigene Vorschau bleibt volle Breite und hebt sich ab */ [data-act="comm-preview"] { margin-bottom: 20px; } } /* Ausführliche Auswertung (nur Desktop, siehe renderAnalyse) */ .an-hint { font-size: 11.5px; font-weight: 600; color: var(--text-faint); text-transform: uppercase; letter-spacing: .3px; margin-left: 8px; } .an-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; align-items: start; } .an-bar { height: 6px; border-radius: 999px; background: var(--bg-elev-2); overflow: hidden; } .an-bar > span { display: block; height: 100%; border-radius: 999px; background: var(--accent); } @media (max-width: 1100px) { .an-grid { grid-template-columns: 1fr; } }