/* =========================================================================
Traxx — App-Styles
Die Farben, Maße und Schriften kommen aus css/tokens.css (Design-System,
in Claude Design gebaut). Diese Datei setzt sie in Komponenten um. Der
:root-Block direkt darunter ist eine Brücke: Er lässt die gewachsenen
Namen dieser Datei (--bg, --ink, --accent …) auf die Traxx-Tokens
(--c-bg, --c-text, --c-accent …) zeigen, damit nicht jede der rund
hundert var()-Stellen umgeschrieben werden musste.
Dunkel ist der Grundzustand (Studio, eine Hand, verschwitzt), Hell ist
vollwertig, und ohne data-theme folgt die App der Systemeinstellung.
FARBE STEHT FÜR ANSTRENGUNG, nicht für den Einheitstyp:
calm (Cyan) vorbereiten und erholen — Aufwärmen, Mobilität,
Prehab, Baseline-Messung, Runterkommen
work (Orange) arbeiten — Kraft, Skill
peak (Rot) der harte Teil — Finisher
Den Einheitstyp kennt man beim Start; die Anstrengung muss man mitten in
der Einheit ablesen können. [data-tone] färbt deshalb nur noch den
kleinen Typ-Punkt im Screen-Kopf (power/combat/short/flow).
========================================================================= */
:root {
/* --------------------------------------------------------------------
Brücke auf die Traxx-Tokens. Die alten Namen bleiben, damit keine der
rund 100 var()-Stellen im Rest dieser Datei angefasst werden muss.
Etappe 6 der Migration löst diese Schicht wieder auf.
-------------------------------------------------------------------- */
--bg: var(--c-bg);
--surface: var(--c-surface);
--surface-2: var(--c-surface-2);
--surface-3: var(--c-surface-3);
--ink: var(--c-text);
--ink-soft: var(--c-text-2);
--muted: var(--c-text-3);
--rule: var(--c-border);
--edge: var(--c-border-inset);
--glass: var(--c-glass);
--glass-edge: var(--c-border-strong);
--accent: var(--c-accent);
--accent-dim: var(--c-accent-press);
--accent-ink: var(--c-on-accent);
--accent-bg: var(--c-accent-soft);
/* Einheitstyp-Klima. Noch färbt es die ganze Ansicht; Task 5 schrumpft
seine Reichweite auf den Typ-Punkt im Kopf. */
--tone-power: var(--c-accent);
--tone-combat: var(--c-warn);
--tone-short: var(--c-calm);
--tone-flow: var(--c-ok);
--goal: var(--c-warn);
--goal-bg: var(--c-warn-soft);
--ok: var(--c-ok);
--ok-bg: var(--c-ok-soft);
/* --f-display, --f-body und --f-data kommen aus tokens.css und sind dort
eine Erweiterung derselben Systemstacks — hier bewusst nicht gesetzt. */
/* --nav-h kommt jetzt aus tokens.css (66px). Die frühere Überschreibung auf
64px ist mit Traxx Bold entfallen — das Redesign will mehr Luft, und die
Nav-Pille verträgt die zwei Pixel. */
--nav-gap: 14px;
--pad: var(--gutter);
--radius: var(--r-l);
--radius-s: var(--r-s);
/* --------------------------------------------------------------------
Bewegungssprache — genau zwei Federcharaktere (Leitbild §5).
Arbeit kritisch gedämpft, KEIN Nachschwingen. Alles Alltägliche:
Tippen, Öffnen, Wechseln. Gewichte wackeln nicht.
Erfolg genau EIN Überschwinger. Nur wenn etwas geschafft ist:
Durchstrich-Stempel, Einheit fertig.
Eine dritte Feder gibt es nicht. Der gewachsene Name --spring zeigt
deshalb auf „Arbeit" — damit werden die rund 15 Altstellen in dieser
Datei mit einer Zeile ruhiggestellt, statt sie einzeln zu ändern.
Dauern kommen ausschließlich aus --d-fast / --d-base / --d-slow.
-------------------------------------------------------------------- */
--e-arbeit: cubic-bezier(.22, .72, .3, 1); /* @kind other */
--e-erfolg: cubic-bezier(.2, 1.5, .4, 1); /* @kind other */
--spring: var(--e-arbeit);
--ease-out: var(--e-out);
/* Der Durchstrich hat eine eigene Dauer, weil er zweimal vorkommt:
einmal für die Satzzeile, einmal schwerer für die ganze Übung. */
--d-strich: 200ms; /* @kind other */
--d-strich-schwer: 240ms; /* @kind other */
/* --------------------------------------------------------------------
Tonfarbe. --tone ist die eine Variable, die Durchstrich und
Vorgangsleiste einfärbt; --on-tone ist der garantiert kontrastreiche
Text darauf. Grundwert ist die Marke; [data-tone] setzt den
Einheitstyp, die Anstrengungsklassen (.is-calm/.is-work/.is-peak)
setzen ihn innerhalb eines Blocks noch einmal um.
-------------------------------------------------------------------- */
--tone: var(--c-accent);
--on-tone: var(--c-on-accent);
/* Zwei fehlende Kontrastpartner. tokens.css liefert --c-on-accent und
--c-on-calm, aber nichts für Warn und Ok — die tragen als combat und
flow ebenfalls Tonflächen. */
--c-on-warn: #1C1200;
--c-on-ok: #05210F;
/* Höhe der Vorgangsleiste. Steht hier, weil #view seinen unteren
Freiraum daraus rechnet. */
--vorgang-h: 64px;
/* Ruhewerte der drei Größen, die js/ui.js zur Laufzeit setzt: Restanteil
der Countdown-Füllung, Mittelpunkt der Halten-Füllung, Haltedauer. */
--anteil: 1; /* @kind other */
--hx: 50%;
--halte-dauer: 400ms; /* @kind other */
}
/* --------------------------------------------------------------------
Kontrastkorrektur an der dritten Textstufe.
--c-text-3 aus dem Design-System misst auf Graphit 4,36:1 und auf
--c-surface 3,99:1 — beides unter der Pflichtgrenze von 4,5:1. Die
Stufe trägt in dieser App aber echte Information (Dosierungen,
Datumszeilen, ausgeschaltete Übungen), keine Dekoration. Zwei
Helligkeitsstufen mehr, und sie hält überall 4,5:1.
Gehört bei nächster Gelegenheit ins Design-System zurückgespielt.
-------------------------------------------------------------------- */
:root,
[data-theme="dark"] { --c-text-3: #7C8492; }
[data-theme="light"] {
--c-text-3: #5F6672;
--c-on-warn: #FFFFFF;
--c-on-ok: #FFFFFF;
/* Gold auf Weiß bleibt sonst bei 4,49:1 hängen */
--tone-combat: #8A5D02;
}
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--c-text-3: #5F6672;
--c-on-warn: #FFFFFF;
--c-on-ok: #FFFFFF;
--tone-combat: #8A5D02;
}
}
/* Sattere Akzente auf modernen Displays. Der Block spiegelt die Theme-Struktur
von tokens.css: Im Light sind calm und peak bewusst dunkler gewählt, damit
sie auf hellem Grund 4,5:1 halten — ein pauschales :root würde das brechen. */
@supports (color: color(display-p3 1 0 0)) {
:root,
[data-theme="dark"] {
--c-accent: color(display-p3 1 0.36 0.10); /* #FF5C1A */
--c-calm: color(display-p3 0.21 0.82 0.90); /* #35D2E6 */
--c-peak: color(display-p3 1 0.23 0.23); /* #FF3B3B */
}
[data-theme="light"] {
--c-accent: color(display-p3 1 0.36 0.10); /* #FF5C1A, unverändert */
--c-calm: color(display-p3 0.05 0.48 0.58); /* #0E7A93 */
--c-peak: color(display-p3 0.84 0.16 0.16); /* #D62828 */
}
/* Light über die Systemeinstellung — ohne diesen Zweig bekäme ausgerechnet
der Standardfall die zu hellen Dark-Werte. */
@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
--c-accent: color(display-p3 1 0.36 0.10);
--c-calm: color(display-p3 0.05 0.48 0.58);
--c-peak: color(display-p3 0.84 0.16 0.16);
}
}
}
/* Das Light-Theme kommt vollständig aus tokens.css. Die Brücke oben zeigt auf
--c-*, und die wechseln dort je Theme — es muss hier nichts wiederholt werden. */
/* --------------------------------------------------------------------
Einheitstyp — nur noch der Punkt im Kopf.
Bis hierher übersteuerte [data-tone] die Variable --accent und färbte
damit jede Ansicht komplett um. Diese Rolle hat jetzt die Anstrengung
(siehe unten): Den Typ kennt man beim Start, die Anstrengung muss man
mitten in der Einheit ablesen können.
Was [data-tone] weiterhin setzt, ist --tone: die Farbe, in der die
Signatur der App schreibt — der Durchstrich und die Vorgangsleiste.
-------------------------------------------------------------------- */
[data-tone="power"] { --tone: var(--tone-power); --on-tone: var(--c-on-accent); }
[data-tone="combat"] { --tone: var(--tone-combat); --on-tone: var(--c-on-warn); }
[data-tone="short"] { --tone: var(--tone-short); --on-tone: var(--c-on-calm); }
[data-tone="flow"] { --tone: var(--tone-flow); --on-tone: var(--c-on-ok); }
/* Der Punkt vor dem Eyebrow ist ganz weg — nicht nur entfärbt.
Ein Kritiker hatte pixelweise nachgemessen: „Es ist dieselbe Komponente,
einmal Amber, einmal Cyan, 400 px auseinander, ohne Legende. Das ist keine
Kodierung, das ist Zufall, der wie Kodierung aussieht." Behoben war das nur
halb: Der Typ-Punkt verlor seine Farbe, blieb aber stehen — und damit
standen in Heute ein grauer und ein cyanfarbener 8-px-Punkt an derselben
linken Kante, der eine bedeutete Anstrengung, der andere nichts.
Leitbild §4 beantwortet das selbst: „Lautet die Antwort ‚keinen', ist sie
Text." Der farbige 8-px-Punkt (.ak-punkt / .tr-punkt) bedeutet in der
ganzen App genau eine Sache — Anstrengung. Den Einheitstyp tragen das
Motiv und die Vorgangsleiste; er braucht keinen zweiten Marker. */
/* --------------------------------------------------------------------
Anstrengung. Die Zuordnung folgt den block.key aus planner.js:
calm warmup, mobility, cooldown, prehab, baseline (Messung)
work strength, skill
peak finisher
-------------------------------------------------------------------- */
.is-calm {
--effort: var(--c-calm);
--effort-row: var(--g-row-calm);
--effort-dot: var(--g-dot-calm);
--tone: var(--c-calm);
--on-tone: var(--c-on-calm);
}
.is-work {
--effort: var(--c-accent);
--effort-row: var(--g-row-accent);
--effort-dot: var(--g-dot-accent);
--tone: var(--c-accent);
--on-tone: var(--c-on-accent);
}
.is-peak {
--effort: var(--c-peak);
--effort-row: var(--g-row-peak);
--effort-dot: var(--g-dot-peak);
--tone: var(--c-peak);
--on-tone: var(--c-on-peak);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
margin: 0;
/* Traxx Bold: Tiefe entsteht über Verläufe statt über Schatten. */
background: var(--g-page);
background-attachment: fixed;
color: var(--ink);
font-family: var(--f-body);
font-size: var(--t-body-size);
line-height: 1.5;
-webkit-text-size-adjust: 100%;
overscroll-behavior-y: contain;
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
/* =============================================================== Struktur */
#view {
padding: 0 var(--pad)
calc(env(safe-area-inset-bottom) + var(--nav-h) + var(--nav-gap) + 46px);
max-width: 640px;
margin: 0 auto;
/* Die überstehende Plan-Ziffer darf hinausragen, aber die Seite nicht
seitlich verschiebbar machen — am Telefon waren das 70 px Wackeln.
clip statt hidden: hidden erzeugte einen Scroll-Container und damit
bliebe die sticky Topbar beim Scrollen nicht mehr stehen. */
overflow-x: clip;
}
/* Ist eine Vorgangsleiste eingehängt, braucht der Inhalt darunter Platz:
Nav + Leiste + Luft. Die Klasse setzt zeigeVorgang() in js/ui.js. */
body.hat-vorgang #view {
padding-bottom: calc(env(safe-area-inset-bottom) + var(--nav-h)
+ var(--nav-gap) + var(--vorgang-h) + 34px);
}
/* Ein Verlauf unter Leiste und Nav, damit scrollender Inhalt ausblendet
statt hart abgeschnitten zu wirken.
Zwei Kritiker haben unabhängig dasselbe gesehen: „Der gelbe CTA liegt
undurchsichtig über der Listenzeile ‚Hampelmänner' und schneidet das Wort
horizontal in zwei Hälften — ohne Verlaufsabdeckung, ohne Abstand, das
liest sich wie ein Bug, nicht wie ein Sticky-Element."
Das Padding unten löst es nur am Seitenende; mitten im Scrollen bleibt die
Kante. Der Verlauf nimmt ihr die Härte, ohne etwas zu verdecken, was man
nicht ohnehin gleich wegscrollt. */
body::after {
content: "";
position: fixed;
left: 0;
right: 0;
bottom: 0;
height: calc(env(safe-area-inset-bottom) + var(--nav-h) + var(--nav-gap) + 24px);
z-index: 38;
pointer-events: none;
background: linear-gradient(to top, var(--c-bg) 34%, transparent);
}
body.hat-vorgang::after {
height: calc(env(safe-area-inset-bottom) + var(--nav-h) + var(--nav-gap)
+ var(--vorgang-h) + 34px);
}
/* Ansichtswechsel: 180 ms Crossfade, 8 px Versatz nach oben. Seiten werden
gesetzt, nicht geschoben — geschoben wird in dieser App genau eine Sache,
und das ist der Eintritt in einen Vorgang (siehe @keyframes von-unten).
Keine Staffelung mehr: sie hat den Wechsel auf 740 ms gedehnt. */
@keyframes rise-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
#view > * { animation: rise-in var(--d-base) var(--e-arbeit) backwards; }
.topbar {
position: sticky;
top: 0;
z-index: 30;
background: color-mix(in srgb, var(--bg) 72%, transparent);
-webkit-backdrop-filter: blur(22px) saturate(1.5);
backdrop-filter: blur(22px) saturate(1.5);
padding: calc(env(safe-area-inset-top) + 16px) var(--pad) 12px;
margin: 0 calc(var(--pad) * -1) 22px;
-webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent);
mask-image: linear-gradient(to bottom, #000 82%, transparent);
}
.topbar-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
max-width: 640px;
margin: 0 auto;
}
/* Was rechts in der Topbar sitzt, bestimmt ihre Höhe NICHT mit.
Der Abschluss-Knopf der Trainingsansicht ist 42 px hoch und trägt nur ein
Icon — er hat keine Textgrundlinie in seiner Mitte. An der Grundlinie
ausgerichtet schob er die ganze Zeile 20 px nach unten: Die Topbar war im
Training 107,5 px hoch, in Heute und Abschluss 87,5 px, und beim Eintritt
in die Einheit sprang der komplette Screen. Gemessen, nicht geschätzt. */
.topbar-row > * + * { align-self: center; }
.topbar h1 {
font-family: var(--f-display);
font-size: var(--t-title-size);
font-weight: 800;
letter-spacing: -0.025em;
margin: 0;
}
/* Die Unterzeile der Topbar ist Kontext (Datum, Einheitstitel), nicht Marke.
In Orange war sie die vierte Akzentfarbe auf dem Screen und stritt mit der
Tonfarbe der Einheit — ein Kritiker las das als Fehler, nicht als
Unterscheidung. Nur die Tonfarbe darf hier führen (Leitbild §4).
Schrift, Größe, Sperrung und Versalien kommen aus der gemeinsamen
Eyebrow-Regel weiter unten: Die Unterzeile IST ein Eyebrow, und sie lief
mit 0.14em, während jeder andere 0.20em trug — zwei Sperrungen für eine
Rolle, in Heute sogar 100 px übereinander im selben Bild. */
.topbar .sub {
color: var(--c-text-2);
margin: 0 0 4px;
}
/* ============================================== Nav — schwebende Glas-Pille */
.nav {
position: fixed;
bottom: calc(env(safe-area-inset-bottom) + var(--nav-gap));
left: 50%;
transform: translateX(-50%);
z-index: 40;
width: min(calc(100% - 28px), 400px);
height: var(--nav-h);
border-radius: 999px;
background: var(--glass);
-webkit-backdrop-filter: blur(28px) saturate(1.7);
backdrop-filter: blur(28px) saturate(1.7);
border: 1px solid var(--glass-edge);
display: flex;
padding: 5px;
}
.nav a {
flex: 1;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
text-decoration: none;
color: var(--muted);
font-family: var(--f-body);
font-size: var(--t-eyebrow-size);
font-weight: 600;
letter-spacing: 0.01em;
border-radius: 999px;
transition: color 0.2s;
}
/* Sharp-Solid statt Linienzeichnung: dieselbe Familie wie js/icons.js.
Massive Flächen sind bei Blendung und Bewegung besser zu treffen als
1,8-px-Konturen — und der Satz ist damit in der ganzen App derselbe. */
.nav a svg {
width: 21px; height: 21px;
fill: currentColor; stroke: none;
transition: transform var(--d-base) var(--e-arbeit);
}
.nav a.on { color: var(--ink); }
.nav a.on svg { fill: var(--accent); transform: translateY(-1px); }
.nav a::before {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
background: transparent;
transition: background 0.25s var(--ease-out);
}
.nav a.on::before { background: rgba(255, 255, 255, 0.09); }
:root[data-theme="light"] .nav a.on::before { background: rgba(20, 18, 26, 0.07); }
.nav a > * { position: relative; }
/* Fokus-Modus (setzt der Router auf #/session und #/finish): Während des
Vorgangs verschwindet die Tab-Pille — im Training zählt, was als Nächstes
kommt, nicht, wohin man sonst noch könnte. Die Leiste rückt dorthin, wo
sonst die Nav sitzt, Padding und Ausblend-Verlauf rechnen ohne Nav-Höhe —
dasselbe Muster wie im Onboarding (body[data-wizard]). */
body[data-fokus] .nav { display: none; }
body[data-fokus] .vorgang { bottom: calc(env(safe-area-inset-bottom) + var(--nav-gap)); }
body[data-fokus].hat-vorgang #view {
padding-bottom: calc(env(safe-area-inset-bottom) + var(--nav-gap) + var(--vorgang-h) + 30px);
}
body[data-fokus].hat-vorgang::after {
height: calc(env(safe-area-inset-bottom) + var(--nav-gap) + var(--vorgang-h) + 24px);
}
/* Im Training gibt es jetzt Zustände ganz ohne Bodenelement: keine Nav
(Fokus-Modus) und keine Leiste (kein Vorgang — die Liste führt). Ohne
diese Regel rechnen Padding und Ausblend-Verlauf weiter mit einer
Nav-Höhe, die niemand einnimmt: rund 100 px Luft unter der letzten Zeile
und ein Verlauf, der Zeilen ausblendet, hinter denen nichts liegt. */
body[data-fokus]:not(.hat-vorgang) #view {
padding-bottom: calc(env(safe-area-inset-bottom) + var(--nav-gap) + 40px);
}
body[data-fokus]:not(.hat-vorgang)::after {
height: calc(env(safe-area-inset-bottom) + var(--nav-gap) + 20px);
}
/* ============================================================== Bausteine */
/* Nach Traxx (.tx-card): flach, größerer Radius, kein Innenglanz. Die
getönten Varianten laufen dort über einen radialen Verlauf aus der
oberen rechten Ecke statt über eine durchgefärbte Fläche. */
.card {
background: var(--g-surface);
border: 1px solid var(--c-border);
border-radius: var(--r-xl);
padding: var(--s-7);
margin-bottom: 14px;
}
/* .card.flush und .card.accent sind mit der Rückschau und dem Katalog weggefallen —
kein Vorkommen mehr in js/ oder index.html. .card.goal lebt im Abschluss weiter. */
.card.goal {
background:
radial-gradient(120% 140% at 100% 0%, var(--c-warn-soft) 0%, transparent 62%),
var(--c-surface);
border-color: var(--c-warn);
}
h2.section {
font-family: var(--f-display);
font-size: var(--t-heading-size);
font-weight: 800;
letter-spacing: -0.02em;
margin: 32px 0 12px;
}
h2.section:first-child { margin-top: 0; }
/* Erste Zeile der Dreiergruppe (Leitbild §3): 11 px, 0,20em gesperrt,
zurückgenommen. Der Eyebrow nennt den Kontext — laut ist darunter die
Heldenzahl. Wer ihn doch farbig braucht, nimmt einen der Modifier.
EINE Sperrung für die ganze Rolle. Vorher liefen neun Stellen mit
sieben verschiedenen Werten (eine davon, .stat .k, ist mit den
Bento-Kacheln der Rückschau weggefallen) (0.12 / 0.13 / 0.14 / 0.16 / 0.20em) — alle
11 px, Mono, Versalien, alle dieselbe Sache. Wer eine neue Beschriftung
setzt, hängt sie hier an, statt die vier Zeilen zu kopieren.
Rand und Farbe bleiben bei den Einzelregeln: Die Farbe trennt Kontext
(--c-text-2) von Formularbeschriftung (--c-text-3). */
.eyebrow,
.topbar .sub,
.feedback-label,
.tm-label,
.tr-gruppe,
.form-row label,
.sheet-section,
.howto-label {
font-family: var(--f-data);
font-size: var(--t-eyebrow-size);
letter-spacing: var(--t-eyebrow-ls);
text-transform: uppercase;
}
.eyebrow {
line-height: var(--t-eyebrow-lh);
color: var(--c-text-2);
margin: 0 0 7px;
}
.eyebrow.goal { color: var(--goal); }
.eyebrow.muted { color: var(--muted); }
.eyebrow.ton { color: var(--tone); }
.eyebrow.akzent { color: var(--accent); }
p.lede { color: var(--ink-soft); font-size: var(--t-body-size); margin: 0 0 14px; }
p.hint { color: var(--muted); font-size: var(--t-bodys-size); margin: 8px 0 0; }
.empty { color: var(--muted); font-size: var(--t-body-size); padding: 36px 0; text-align: center; }
.data { font-family: var(--f-data); font-variant-numeric: tabular-nums; }
/* ================================================================ Buttons */
/* Nach Traxx (.tx-btn). Bewusst --f-body statt --f-display: Ein Button ist
Bedienelement, keine Überschrift. Und bewusst Traxx' knappes Timing statt
--spring — das federnde Easing bleibt den Flächen und Sheets vorbehalten,
beim Tippen auf einen Knopf will man Quittung, kein Nachwippen. */
.btn {
font-family: var(--f-body);
font-size: var(--t-body-size);
font-weight: 650;
letter-spacing: -0.008em;
padding: 0 var(--s-7);
min-height: 52px;
border: 1px solid transparent;
background: var(--g-accent);
color: var(--accent-ink);
border-radius: var(--r-m);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s-4);
white-space: nowrap;
text-decoration: none;
transition: background var(--d-fast) var(--e-out),
border-color var(--d-fast) var(--e-out),
transform var(--d-fast) var(--e-out),
opacity var(--d-fast) var(--e-out);
box-shadow: var(--sh-cta);
}
.btn:hover { background: var(--c-accent-hover); }
.btn:active { transform: translateY(1px) scale(0.994); }
.btn svg { width: 20px; height: 20px; flex: none; }
/* Die 32 px darunter kamen bis zuletzt aus `.block { margin-bottom: 32px }` —
einer Regel für den Session-Block der Fassung vor Traxx. Den Block gibt es
nicht mehr, den Rand schon: Er stand unter jedem Vollbreiten-Knopf der App.
Jetzt steht er dort, wo er wirkt. */
.btn.block { display: flex; width: 100%; margin-bottom: 32px; }
/* Die getönte Akzentfläche ist ein Zug dieser App, den Traxx so nicht führt.
Statt sie aufzugeben, liegt sie jetzt auf den dafür gedachten Tokens. */
.btn.ghost {
background: var(--c-accent-soft);
border-color: var(--c-accent-soft-b);
color: var(--c-accent-text);
box-shadow: none;
}
.btn.ghost:hover { background: var(--c-accent-soft); border-color: var(--c-accent); }
/* entspricht tx-btn--secondary */
.btn.quiet {
background: var(--c-surface-2);
border-color: var(--c-border);
color: var(--c-text);
font-size: var(--t-body-size);
font-weight: 600;
min-height: 48px;
padding: 0 var(--s-6);
box-shadow: none;
}
.btn.quiet:hover { background: var(--c-surface-3); }
.btn.small { font-size: var(--t-bodys-size); padding: 0 var(--s-5); min-height: 42px; border-radius: var(--r-s); }
.btn:disabled { opacity: 0.42; cursor: not-allowed; transform: none; }
.btn:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-row .btn { flex: 1; }
/* ============================================================ Heute-Screen */
/* Ohne oberen Rand: Der Abstand zur Topbar kommt aus deren margin-bottom und
ist damit in allen vier Ansichten gleich. Die 6 px, die hier standen,
ließen den Kopf der Heute-Ansicht als einzigen 28 statt 22 px tief
beginnen — bei sonst identischem Aufbau. */
.plan-head {
position: relative;
padding: 0 0 22px;
margin-bottom: 22px;
overflow: visible;
}
/* Aurora: das Farbklima der Einheit strahlt weich in die Fläche */
.plan-head::before {
content: "";
position: absolute;
top: -50px;
right: -90px;
width: 300px;
height: 300px;
border-radius: 50%;
background: radial-gradient(circle, color-mix(in srgb, var(--accent) 26%, transparent) 0%, transparent 62%);
pointer-events: none;
}
/* Das Motiv des Einheitstyps — der visuelle Anker (Leitbild §3).
Es liegt hinter Titel und Nummer, rechtsbündig: Die Illustrationen halten
ihre linke Hälfte frei, dort steht die Schlagzeile. Der weiche Verlauf nach
links blendet die Bildkante aus, damit kein Rahmen entsteht — das Band soll
aus dem Hintergrund auftauchen, nicht wie ein eingeklebtes Foto wirken. */
/* „Die Kickbox-Silhouette ist ein dunkelgrauer Fleck auf Schwarz" — der
Kritiker hatte recht: Bei 82 % Deckkraft auf 78 % Breite verschwand das
Motiv hinter der Ziffer, statt der Anker zu sein, für den es gedacht war.
Jetzt größer, voll deckend und weiter oben, damit es die Schlagzeile
hinterfängt statt mit ihr um dieselbe Zeile zu streiten. */
/* Das Motiv gibt es zweimal — für Dunkel und für Hell.
Im Hellmodus stand das dunkle Band als schwarzer Kasten über dem Titel:
Die Maske blendet nur nach links aus, der Rest blieb ein harter Block.
Ein CSS-Filter half nicht, weil die Figur selbst dunkelgrau ist — jede
Aufhellung, die den Grund verschwinden lässt, frisst sie mit.
Als Hintergrundbild statt , damit die Kaskade entscheidet: Der Browser
lädt nur die Datei, die er wirklich zeigt, und ein fehlendes Bild macht
keinen Lärm (bei hätte es ein kaputtes Symbol gegeben). Die beiden
URLs kommen als Variablen aus typMotiv() in js/ui.js. */
/* Standardwert, damit die Regel auch ohne typMotiv() hält: Ohne die beiden
Variablen wäre background-image ungültig, und der Check „keine offene
Referenz" schlüge zu Recht an — die Werte kommen sonst nur aus dem
style-Attribut, das js/ui.js setzt. */
:root { --motiv: none; --motiv-hell: none; }
.typ-motiv {
position: absolute;
top: -34px;
right: calc(var(--gutter) * -1);
width: 92%;
max-width: 400px;
aspect-ratio: 16 / 9;
background-image: var(--motiv);
background-size: contain;
background-position: right center;
background-repeat: no-repeat;
pointer-events: none;
user-select: none;
-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
mask-image: linear-gradient(to right, transparent 0%, #000 38%, #000 100%);
}
:root[data-theme="light"] .typ-motiv { background-image: var(--motiv-hell); }
@media (prefers-color-scheme: light) {
:root:not([data-theme]) .typ-motiv { background-image: var(--motiv-hell); }
}
/* Wo das Motiv liegt, wäre die Aurora doppelt gemoppelt */
.plan-head:has(.typ-motiv)::before { opacity: .35; }
/* Und die dekorative Ziffer erst recht: Sie war der Ersatz für einen
visuellen Anker, den es jetzt gibt. Beide übereinander kreuzen sich nur —
„Einheit 2" steht ohnehin im Eyebrow darüber. Eine Sache pro Screen. */
.plan-head:has(.typ-motiv) .plate-num { display: none; }
/* Der Abstand zwischen Eyebrow und Held ist in allen drei Köpfen derselbe.
Er stand vorher dreimal verschieden da: 12 px in Heute, 12 px im Abschluss,
7 px (der Grundwert) im Training — dieselbe Dreiergruppe, drei Abstände. */
.plan-head .eyebrow,
.tr-kopf .eyebrow,
.ab-kopf .eyebrow { margin-bottom: 12px; }
.plan-head .eyebrow { position: relative; }
.plan-head h2 {
font-family: var(--f-display);
font-size: clamp(36px, 10.5vw, 50px);
line-height: 1.02;
font-weight: 800;
letter-spacing: -0.035em;
margin: 0 0 12px;
max-width: 82%;
text-wrap: balance;
position: relative;
}
.plan-head .lede { max-width: 90%; position: relative; }
/* Die Einheitsnummer als Ghost-Ziffer — nur Kontur, wie graviert */
/* Die Plan-Nummer.
Ein Kritiker fand sie zweimal: Sie „schneidet in die Unterlängen von
Kondition", und ihr freistehender unterer Balken „wirkt wie ein
Rendering-Rest". Beides kam davon, dass sie so groß war, dass ihre Teile
einzeln neben dem Titel auftauchten. Jetzt sitzt sie höher, ist kleiner
als der Titel und läuft deutlich schwächer — sie ist Hintergrund, nicht
zweite Schlagzeile. */
.plate-num {
position: absolute;
top: -30px;
right: -6px;
font-family: var(--f-display);
font-size: clamp(84px, 25vw, 124px);
font-weight: 800;
line-height: 1;
letter-spacing: -0.04em;
color: transparent;
-webkit-text-stroke: 1.5px color-mix(in srgb, var(--tone, var(--accent)) 32%, transparent);
user-select: none;
-webkit-user-select: none;
pointer-events: none;
}
@supports not (-webkit-text-stroke: 1px black) {
.plate-num { color: var(--accent); opacity: 0.14; }
}
/* Hier standen bis zur Glättung von Welle 2/3 die Badge-Zeile .plan-facts
(samt .goal-fact) und die Blockvorschau .block-preview (.mins/.bt/.bx).
Beide gehörten dem alten Onboarding; seit dem Umbau der Randansichten
zeigt der Assistent den Kopf und den Ablauf der Heute-Ansicht selbst
(.plan-head, .ob-blockkopf, .ob-blockliste). Kein Vorkommen mehr in js/,
index.html oder den Werkzeugen — gelöscht.
Der Ablauf der Heute-Ansicht lag hier zweimal: einmal als .plan-edit /
.plan-block / .plan-row / .pr-* aus der Fassung vor dem Redesign und einmal
als .ablauf-* weiter unten. Die alte Fassung stand nur noch im Weg — .pr-name
war dabei doppelt belegt (hier und bei den Bestleistungen im Fortschritt),
wer die eine anfasste, änderte die andere mit. Gelöscht. */
/* --------------------------------------------- Änderungs-Sheet einer Übung */
.sheet-section {
color: var(--muted);
font-weight: 500;
margin: 20px 0 8px;
}
/* Begründung des Generators — offengelegte Regeln, keine Werbetexte */
.why-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.why-list li {
position: relative;
padding-left: 16px;
font-size: var(--t-bodys-size);
line-height: 1.45;
color: var(--ink-soft);
}
/* Der Aufzählungspunkt ist ein Aufzählungspunkt, kein Zustand. In Akzent
war er der dritte runde farbige Punkt der App neben dem 8-px-Punkt, der
die Anstrengung kodiert — „zwei gleiche Punkte dürfen nicht zwei Dinge
bedeuten" (Leitbild „Farbe und Zustand"). Dieselbe Korrektur wie beim
.type-dot in Welle 1: Wer keinen Zustand kodiert, ist Text. */
.why-list li::before {
content: "";
position: absolute;
left: 0;
top: 8px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--c-text-3);
}
/* Die Alternativen des Tausch-Sheets. Sie standen in zwei Regelsätzen: hier
die Grundform und weiter unten .alt-list .alt mit dem Raster. Der Umweg
über .alt-list war nötig, solange .alt DOPPELT belegt war — im Onboarding
trug sie der Textlink „Ich habe schon ein Konto", und ein Alleingang auf
.alt verpasste ihm 60 px Mindesthöhe. Der Assistent heißt inzwischen
.ob-alt; .alt gehört wieder allein dem Sheet, also steht sie wieder an
einer Stelle. */
.alt-list { display: flex; flex-direction: column; gap: 6px; }
.alt {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 0 var(--s-5);
width: 100%;
min-height: 60px;
padding: 10px 14px;
background: var(--surface-2);
border: 1px solid var(--edge);
border-radius: var(--r-m);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: transform 0.18s var(--spring), border-color 0.18s var(--ease-out);
}
.alt:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.alt:active { transform: scale(0.97); }
.alt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.alt-name { display: block; grid-column: 1; font-size: var(--t-body-size); font-weight: 500; }
/* Eine Stufe heller als der Grundwert: --c-text-3 misst auf --c-surface-2
gerendert 4,33:1 und reißt damit die Pflichtgrenze. Auf derselben Fläche
hält --c-text-2 7,0:1. */
.alt-meta {
display: block;
grid-column: 1;
font-size: var(--t-caption-size);
color: var(--c-text-2);
margin-top: 2px;
}
.alt-zeichen {
grid-column: 2;
grid-row: 1 / span 2;
display: inline-flex;
font-size: 15px;
color: var(--c-text-2);
}
.alt:hover .alt-zeichen { color: var(--c-accent-text); }
/* ================================== Reste der Session-Fassung vor Traxx
Was die Trainingsansicht heute baut, steht unter „Training" weiter unten
(.tr-*, .dotzeile, .durchstrich). Aus der alten Fassung sind nur noch die
Teile übrig, die der KORREKTURMODUS im Verlauf weiterbenutzt: die
Übungskarte (.ex-head/.ex-dose/.ex-body), die Satzliste (.sets/.set-row)
und ihre beiden Knöpfe. Alles andere — .progress-*, section.block,
.block-title, .block-note, .group-label, .ex, .check — ist gelöscht.
.block { margin-bottom: 32px } stand ebenfalls hier und traf zuletzt nur
noch .btn.block: Jeder Vollbreiten-Knopf der App trug einen Rand aus einer
Regel für ein ganz anderes Bauteil. Die Regel steht jetzt bei den Buttons,
gerendert ändert sich nichts.
==================================================================== */
.ex {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 var(--edge);
margin-bottom: 10px;
overflow: hidden;
transition: border-color 0.25s, background-color 0.25s;
}
.ex.done { border-color: color-mix(in srgb, var(--ok) 40%, transparent); background: var(--ok-bg); }
.ex.open-detail { border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.ex-head {
display: grid;
grid-template-columns: 1fr auto;
gap: 10px;
align-items: center;
padding: 15px 16px;
cursor: pointer;
}
.ex-name {
font-family: var(--f-display);
font-size: var(--t-heading-size);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.18;
}
.ex.done .ex-name { color: var(--ink-soft); }
.ex-dose {
font-family: var(--f-data);
font-size: var(--t-caption-size);
color: var(--accent);
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.ex.done .ex-dose { color: var(--ok); }
/* Quittung des Satz-Häkchens im Korrekturmodus */
@keyframes pop {
0% { transform: scale(0.8); }
55% { transform: scale(1.16); }
100% { transform: scale(1); }
}
.ex-body {
padding: 0 16px 16px;
border-top: 1px solid var(--rule);
padding-top: 14px;
}
.sets { display: flex; flex-direction: column; gap: 8px; }
.set-row {
display: grid;
grid-template-columns: 28px 1fr 1fr 40px;
gap: 8px;
align-items: center;
}
.set-row .n {
font-family: var(--f-data);
font-size: var(--t-caption-size);
color: var(--muted);
}
.field {
display: flex;
align-items: center;
gap: 5px;
background: var(--surface-2);
border: 1px solid transparent;
border-radius: 12px;
padding: 0 11px;
height: 48px;
transition: border-color 0.2s, background-color 0.2s;
}
.field input {
width: 100%;
min-width: 0;
border: none;
background: transparent;
color: var(--ink);
font-family: var(--f-data);
font-size: var(--t-body-size);
font-variant-numeric: tabular-nums;
padding: 0;
-webkit-appearance: none;
}
.field input:focus { outline: none; }
.field:focus-within { border-color: var(--accent); background: var(--surface); }
/* Die Einheit im Feld („kg", „Wdh", „Min", „Sek") ist Information, keine
Dekoration — ohne sie steht dort eine nackte Zahl. Sie lief in --c-text-3
und hält auf der Feldfläche --c-surface-2 an den gerenderten Pixeln nur
4,33:1 (dunkel), im Fokuszustand auf --c-surface 4,77:1. Das ist unter der
Pflichtgrenze, und es betrifft jedes Zahlenfeld der App: Profil, Training,
Abschluss, Korrekturmodus, Heute. Eine Stufe heller sind es 6,19:1 dunkel
und 6,15:1 hell. */
.field .u { font-family: var(--f-data); font-size: var(--t-eyebrow-size); color: var(--c-text-2); white-space: nowrap; }
.set-done {
width: 40px; height: 40px;
border: 1.5px solid var(--surface-3);
border-radius: 12px;
background: transparent;
color: var(--muted);
cursor: pointer;
display: grid;
place-items: center;
font-size: var(--t-body-size);
transition: border-color 0.2s, background-color 0.2s, transform 0.25s var(--spring);
}
.set-done:active { transform: scale(0.9); }
.set-done.on { background: var(--ok); border-color: var(--ok); color: #072012; animation: pop 0.35s var(--spring); }
/* Korrekturmodus im Verlauf: dieselbe Satzzeile, aber mit Löschknopf und
variabler Feldzahl — je nach Übung nur Wiederholungen oder Gewicht + Zeit. */
.set-row.editable { display: flex; }
.set-row.editable .field { flex: 1; min-width: 0; }
.set-del {
flex-shrink: 0;
width: 34px; height: 40px;
border: none;
background: none;
color: var(--muted);
font-size: var(--t-heading-size);
line-height: 1;
border-radius: 10px;
cursor: pointer;
transition: color 0.18s, transform 0.18s var(--spring);
}
.set-del:hover { color: var(--ink); }
.set-del:active { transform: scale(0.9); }
.feedback { margin-top: 14px; }
.feedback-label {
color: var(--muted);
margin-bottom: 7px;
}
.chips { display: flex; gap: 7px; flex-wrap: wrap; }
/* Nach Traxx (.tx-chip). Ausgewählt heißt jetzt weiche Akzentfläche mit
Rand statt Vollfläche — dazu ein Punkt, der den Zustand auch ohne
Farbwahrnehmung erkennbar macht. */
.chip {
font-family: var(--f-body);
font-size: var(--t-bodys-size);
font-weight: 600;
letter-spacing: -0.005em;
padding: 0 var(--s-6);
border: 1px solid var(--c-border);
border-radius: var(--r-pill);
background: var(--c-surface-2);
color: var(--c-text-2);
cursor: pointer;
min-height: 40px;
display: inline-flex;
align-items: center;
gap: var(--s-3);
transition: all var(--d-fast) var(--e-out);
}
.chip:hover { color: var(--c-text); border-color: var(--c-border-strong); }
.chip:active { transform: scale(0.97); }
.chip:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.chip.on {
background: var(--c-accent-soft);
border-color: var(--c-accent-soft-b);
color: var(--c-accent-text);
}
.chip.on::before {
content: "";
width: 14px;
height: 14px;
flex: none;
border-radius: 50%;
background: var(--c-accent);
box-shadow: inset 0 0 0 2px var(--c-bg);
}
/* ================================================================= Timer
Der Vollbild-Timer steht unter „===== Timer =====" weiter unten (.uhr).
Hier lag bis zuletzt seine Vorgängerfassung: .timer-overlay mit .work /
.rest, .timer-phase, .timer-round, .timer-clock, .timer-next, .timer-ring,
.timer-actions — dazu .timer-launch, der abgelöste Starter des
Zirkel-Timers (heute .tr-zirkel). Keine Zeile davon stand noch im Markup;
gelöscht.
==================================================================== */
/* =============================================================== Historie */
.session-row {
display: grid;
grid-template-columns: 56px 1fr auto;
gap: 13px;
align-items: center;
padding: 8px 0;
margin-bottom: 8px;
text-decoration: none;
color: inherit;
}
.session-row .date {
font-family: var(--f-data);
font-size: var(--t-eyebrow-size);
text-transform: uppercase;
letter-spacing: 0.07em;
color: var(--muted);
text-align: center;
line-height: 1.2;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius-s);
padding: 8px 2px 7px;
}
.session-row .date b {
display: block;
font-family: var(--f-display);
font-size: var(--t-heading-size);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--ink);
}
.session-row .t {
font-family: var(--f-display);
font-size: var(--t-heading-size);
font-weight: 700;
letter-spacing: -0.015em;
}
.session-row .m { font-family: var(--f-data); font-size: var(--t-caption-size); color: var(--muted); }
.session-row .pct { font-family: var(--f-data); font-size: var(--t-label-size); color: var(--ok); }
/* Die Bento-Kacheln (.stat-grid / .stat mit .k/.v/.d) sind mit dem Umbau der
Rückschau weggefallen: Der Verlauf führt jetzt eine Heldenzahl und drei
Dot-Leader-Zeilen, „vier gleich laute Dinge erzählen keine Reihenfolge"
(Leitbild „Layout-Grammatik"). Kein Vorkommen mehr in js/ — gelöscht,
samt dem .stat .k aus der gemeinsamen Eyebrow-Regel weiter oben. */
.spark { display: block; width: 100%; height: 44px; margin-top: 10px; overflow: visible; }
/* Wochenziel als Segmente — gefüllt heißt trainiert */
.goal-segs { display: flex; gap: 5px; margin-top: 10px; }
.goal-segs i {
height: 8px;
flex: 1;
max-width: 36px;
border-radius: 4px;
background: var(--surface-3);
transition: background-color 0.3s;
}
.goal-segs i.on {
background: var(--ok);
box-shadow: 0 0 12px color-mix(in srgb, var(--ok) 45%, transparent);
}
/* =============================================================== Übungen */
.filter-row { display: flex; gap: 7px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.filter-row::-webkit-scrollbar { display: none; }
.filter-row .chip { flex-shrink: 0; }
/* Die alte Katalogzeile (.ex-list-item mit .n und .joy) und der Pillen-
Schalter (.switch) sind mit dem Umbau des Katalogs weggefallen: Die Liste
ist eine Dot-Leader-Zeile (.kat-zeile), der Schalter zeigt seinen Zustand
als eye / eye-slash (.kat-schalter).
Achtung beim Nachprüfen: Nach `switch` zu greppen liefert Treffer, die
keine sind — role="switch" in js/views/exercises.js, die id #switchType in
js/views/home.js und switch-Anweisungen im Code. Als KLASSE steht `switch`
in keiner Datei mehr, auch nicht im Profil: Das Akkordeon schaltet über
.chip.on (geprüft in js/, index.html, tools/ und über die Historie —
.switch lebte zuletzt im Katalog, nicht im Profil). */
/* ================================================================ Formular */
.form-row { margin-bottom: 14px; }
.form-row label {
display: block;
color: var(--muted);
margin-bottom: 7px;
}
.form-row input, .form-row textarea, .form-row select {
width: 100%;
background: var(--surface-2);
border: 1px solid transparent;
border-radius: var(--radius-s);
color: var(--ink);
font-family: var(--f-body);
font-size: var(--t-body-size);
padding: 13px 14px;
-webkit-appearance: none;
transition: border-color 0.2s, background-color 0.2s;
}
.form-row input:focus, .form-row textarea:focus {
outline: none;
border-color: var(--accent);
background: var(--surface);
}
.form-row textarea { min-height: 78px; resize: vertical; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* ============================================================== Onboarding */
/* Während des Wizards gibt es keine Navigation — der Weg ist der Wizard */
body[data-wizard] .nav { display: none; }
.wizard {
min-height: calc(100vh - 120px);
min-height: calc(100dvh - 120px);
display: flex;
flex-direction: column;
}
/* Die Punktleiste .wizard-dots ist weg: Der Assistent zeigt seinen Stand als
Stufenleiste (.ob-stufen/.stufe), erledigte Schritte werden durchgestrichen
statt abgehakt — dieselbe Leiste wie der Klimmzug-Aufbau im Fortschritt. */
.wizard-step { flex: 1; animation: rise-in 0.45s var(--spring) backwards; }
.wizard-brand {
font-family: var(--f-display);
font-size: clamp(56px, 17vw, 84px);
font-weight: 800;
letter-spacing: -0.045em;
line-height: 0.95;
margin: 10vh 0 10px;
}
.wizard-claim {
font-size: var(--t-heading-size);
color: var(--ink-soft);
max-width: 26ch;
margin: 0 0 28px;
text-wrap: balance;
}
.wizard-points { list-style: none; margin: 0 0 24px; padding: 0; }
.wizard-points li {
display: flex;
gap: 12px;
align-items: baseline;
padding: 9px 0;
color: var(--ink-soft);
font-size: var(--t-body-size);
}
/* Wie im Tausch-Sheet: Der Aufzählungspunkt kodiert keinen Zustand, also
trägt er keine Farbe (Leitbild „Farbe und Zustand"). Er stand hier mit
7 px im Akzent direkt neben der Stufenleiste, deren Rahmen dieselbe Farbe
trägt und dort etwas heißt — „auf diesem Schritt stehst du". */
.wizard-points li::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--c-text-3);
flex-shrink: 0;
transform: translateY(-1px);
}
.wizard h2 {
font-family: var(--f-display);
font-size: clamp(28px, 8vw, 36px);
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.05;
margin: 0 0 8px;
text-wrap: balance;
}
.wizard .lede { margin-bottom: 22px; }
/* .wizard-foot (samt .wizard-foot .alt) ist weg: „Weiter" ist die
Vorgangsleiste, die Nebenziele stehen in .ob-neben. Die Fußzeile war
zugleich die zweite Stelle, an der .alt belegt war — einmal für die
Alternativen des Tausch-Sheets, einmal für die Textziele des Assistenten.
Der Assistent heißt heute .ob-alt, .alt gehört wieder allein dem Sheet. */
.gear-preset {
display: block;
width: 100%;
text-align: left;
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: inset 0 1px 0 var(--edge);
padding: 14px 16px;
margin-bottom: 10px;
cursor: pointer;
color: var(--ink);
font-family: var(--f-body);
transition: border-color 0.2s, background-color 0.2s, transform 0.25s var(--spring);
}
.gear-preset:active { transform: scale(0.985); }
.gear-preset .t1 {
display: block;
font-family: var(--f-display);
font-size: var(--t-body-size);
font-weight: 700;
letter-spacing: -0.015em;
}
.gear-preset .t2 { font-size: var(--t-label-size); color: var(--muted); }
.gear-preset.on {
border-color: color-mix(in srgb, var(--accent) 55%, transparent);
background: var(--accent-bg);
}
/* ============================================================ Bottom-Sheet */
@keyframes fade-in { from { opacity: 0; } }
@keyframes sheet-up { from { transform: translateY(60px); opacity: 0.4; } }
.sheet-wrap {
position: fixed;
inset: 0;
z-index: 150;
display: flex;
align-items: flex-end;
justify-content: center;
}
.sheet-backdrop {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
animation: fade-in 0.25s;
}
:root[data-theme="light"] .sheet-backdrop { background: rgba(30, 25, 45, 0.35); }
.sheet {
position: relative;
width: 100%;
max-width: 640px;
background: var(--surface);
border: 1px solid var(--glass-edge);
border-bottom: none;
border-radius: 26px 26px 0 0;
padding: 10px 20px calc(env(safe-area-inset-bottom) + 16px);
max-height: 82vh;
max-height: 82dvh;
overflow-y: auto;
overscroll-behavior: contain;
animation: sheet-up var(--d-slow) var(--e-out);
}
.sheet-grip {
width: 40px;
height: 4px;
background: var(--surface-3);
border-radius: 2px;
margin: 6px auto 16px;
}
.sheet h3 {
font-family: var(--f-display);
font-size: var(--t-title-size);
font-weight: 800;
letter-spacing: -0.025em;
margin: 0 0 10px;
}
.sheet .eyebrow { margin-bottom: 4px; }
.howto-label {
color: var(--muted);
margin: 18px 0 8px;
}
.howto-steps {
list-style: none;
counter-reset: howto;
margin: 0;
padding: 0;
}
.howto-steps li {
counter-increment: howto;
position: relative;
padding: 0 0 12px 40px;
font-size: var(--t-bodys-size);
color: var(--ink-soft);
}
.howto-steps li::before {
content: counter(howto);
position: absolute;
left: 0;
top: -1px;
width: 26px;
height: 26px;
border-radius: 9px;
background: color-mix(in srgb, var(--accent) 16%, transparent);
color: var(--accent);
font-family: var(--f-display);
font-size: var(--t-bodys-size);
font-weight: 700;
display: grid;
place-items: center;
}
.howto-mistakes {
list-style: none;
margin: 0;
padding: 0;
}
.howto-mistakes li {
position: relative;
padding: 0 0 8px 24px;
font-size: var(--t-bodys-size);
color: var(--ink-soft);
}
.howto-mistakes li::before {
content: "✕";
position: absolute;
left: 2px;
top: 0;
color: var(--goal);
font-size: var(--t-caption-size);
font-weight: 700;
}
/* .sheet-meta ist mit dem Umbau der Sheets weggefallen — was dort stand,
steht heute in der Fakten-Zeile am Kopf (.ts-fakten / .howto-fakten). */
.toast {
position: fixed;
left: 50%;
bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + var(--nav-gap) + 14px);
transform: translateX(-50%);
background: var(--glass);
-webkit-backdrop-filter: blur(20px) saturate(1.5);
backdrop-filter: blur(20px) saturate(1.5);
border: 1px solid var(--glass-edge);
color: var(--ink);
font-size: var(--t-bodys-size);
font-weight: 500;
padding: 12px 20px;
border-radius: 999px;
z-index: 200;
max-width: 88vw;
text-align: center;
animation: toast-rise var(--d-base) var(--e-arbeit);
}
/* Randnotiz: steigt 8 px, 180 ms — mehr Auftritt hat eine Randnotiz nicht */
@keyframes toast-rise { from { opacity: 0; transform: translate(-50%, 8px); } }
/* --------------------------------------------------------------------
prefers-reduced-motion (Leitbild §5)
Nicht „alles aus": Transforms entfallen, Übergänge werden zu kurzen
Opazitätswechseln, Füllungen und Striche springen auf ihren Endzustand.
Töne und Vibration bleiben — sie ersetzen dann die Bewegung. Und kein
Bedienschritt darf hier länger dauern als ohne.
-------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 1ms !important;
animation-delay: 0ms !important;
animation-iteration-count: 1 !important;
transition-property: opacity !important;
transition-duration: 120ms !important;
}
/* Ausnahme mit Grund: Die radiale Füllung beim Halten IST die Anzeige,
wie lange noch zu halten ist. Spränge sie sofort auf voll, gäbe sie
eine Aktion vor, die noch gar nicht ausgelöst hat. */
.vorgang.haelt .vorgang-halt {
transition-property: opacity, transform !important;
transition-duration: var(--halte-dauer, 400ms) !important;
}
}
/* ------------------------------------------------ Howto-Illustrationen */
/* Die Figure reserviert 3:2, damit das lazy geladene Bild nicht springt;
fehlt die Datei, entfernt onerror in howto.js die Figure komplett. */
.howto-figure {
margin: 2px 0 18px;
aspect-ratio: 3 / 2;
border-radius: 16px;
overflow: hidden;
border: 1px solid var(--rule);
background:
radial-gradient(130% 100% at 85% -10%, var(--accent-bg), transparent 58%),
var(--surface);
}
.howto-figure img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ------------------------------------------------ Fortschritt (#/stats) */
/* .stats-card ist mit dem Umbau des Fortschritts weggefallen: Aus vier
gestapelten Karten gleicher Lautstärke sind Abschnitte mit h2.section
geworden — dieselbe Gliederung wie in Heute, Training und Abschluss. */
.stats-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 12px;
}
.stats-delta {
font-family: var(--f-data);
font-size: var(--t-caption-size);
color: var(--ink-soft);
}
.stats-delta.down { color: var(--ok); background: var(--ok-bg); border-color: transparent; }
.stats-empty { color: var(--ink-soft); font-size: var(--t-bodys-size); margin: 4px 0; }
.wg-chart { display: block; width: 100%; height: auto; }
.wg-line {
fill: none;
stroke: var(--accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1;
stroke-dashoffset: 0;
animation: wg-draw 1.1s var(--ease-out) backwards;
}
@keyframes wg-draw { from { stroke-dashoffset: 1; } }
.wg-area { animation: rise-in 0.9s var(--ease-out) backwards; }
.wg-dot { fill: var(--accent); }
.wg-goal { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; }
.wg-goal-t, .wg-axis {
font-family: var(--f-data);
font-size: var(--t-eyebrow-size);
fill: var(--muted);
}
.wg-now {
font-family: var(--f-data);
font-size: var(--t-eyebrow-size);
font-weight: 600;
fill: var(--ink);
}
.bar-list { display: grid; gap: 9px; margin: 2px 0 12px; }
.bar-row {
display: grid;
grid-template-columns: 108px 1fr 26px;
align-items: center;
gap: 10px;
}
.bar-label {
font-size: var(--t-label-size);
color: var(--ink-soft);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bar {
height: 10px;
border-radius: 999px;
background: var(--surface-2);
overflow: hidden;
}
.bar i {
display: block;
height: 100%;
border-radius: inherit;
background: linear-gradient(90deg, var(--accent-dim), var(--accent));
animation: bar-grow 0.7s var(--ease-out) backwards;
}
@keyframes bar-grow { from { width: 0 !important; } }
.bar-val {
font-family: var(--f-data);
font-size: var(--t-caption-size);
color: var(--muted);
text-align: right;
}
.pr-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding: 9px 0;
border-bottom: 1px solid var(--rule);
}
.pr-row:last-child { border-bottom: none; }
.pr-name { font-size: var(--t-bodys-size); font-weight: 500; min-width: 0; }
.pr-name small, .pr-best small {
display: block;
font-family: var(--f-data);
font-size: var(--t-eyebrow-size);
color: var(--muted);
font-weight: 400;
margin-top: 1px;
}
.pr-best {
font-family: var(--f-data);
font-size: var(--t-bodys-size);
font-weight: 600;
color: var(--accent);
text-align: right;
white-space: nowrap;
}
/* Die Zielzeilen (.goal-line / -head / -note) sind mit dem Umbau des
Fortschritts weggefallen: Die zwei erklärten Ziele führen jetzt als
Heldenzahl mit Stufenleiste (.fs-ziel), statt als vierte von vier gleich
lauten Karten mitzulaufen. */
/* =====================================================================
== BAUSTEINE DES LEITBILDS ========================================
=====================================================================
Alles ab hier ist Grundausstattung, keine Ansicht. Jede View benutzt
diese Klassen; keine baut sie nach. Reihenfolge:
1 Der Durchstrich (die Signatur)
2 Ausgeschaltet — die Gegenprobe, die kein Strich sein darf
3 Die Vorgangsleiste
4 Typo-Grammatik: Eyebrow · Held · Fakten · Dot-Leader · Datenzeile
5 Das eine Slide-Muster + Icon-Grundmaß
===================================================================== */
/* ------------------------------------------------------- 1 Durchstrich
„Bei Traxx wird nichts abgehakt — es wird durchgestrichen, wie auf
einem Trainingszettel."
Ein Tap, ein satter Balken in Tonfarbe fährt in 200 ms durch die
Zeile, die Zeile sackt 2 px ab wie ein Stempel, es klackt (siehe
durchstreichen() in js/ui.js).
Der Zustand IST die Klasse .ist-durch — sie ist zugleich Animation und
gespeicherter Zustand. Wer eine Ansicht neu aufbaut, setzt sie einfach
wieder und bekommt den Endzustand ohne Sonderfall.
Der Text darunter bleibt hell. Ein ausgegrauter durchgestrichener Text
wäre bei Blendung und Schweiß das schlechteste Erledigt-Signal, das man
bauen kann — der Strich sagt „geschafft", nie „gestrichen".
-------------------------------------------------------------------- */
.durchstrich {
position: relative;
top: 0;
transition: top var(--d-strich) var(--e-erfolg);
}
/* Der Balken liegt ÜBER dem Text, nicht darunter.
Erste Fassung hatte ihn hinter die Zeile gelegt (die Kinder trugen
position:relative und verdeckten ihn), und ein Kritiker las das prompt als
das, was es dann war: „eine Fokus-Unterstreichung, kein Durchstrich — die
Ziffern bleiben unberührt". Ein Durchstrich fährt durch die Zeichen, wie
ein Filzstift über einen Trainingszettel.
Das Easing ist bewusst nicht --e-out: Dessen Kurve ist nach 70 ms schon bei
90 %, im Frame-Strip war vom Fahren nichts zu sehen. Diese Kurve läuft
sichtbar durch und bremst erst zum Schluss. */
.durchstrich::after {
content: "";
position: absolute;
left: 0;
right: 0;
top: 50%;
z-index: 2;
height: 3px;
border-radius: 2px;
background: var(--tone);
transform: translateY(-50%) scaleX(0);
transform-origin: left center;
transition: transform var(--d-strich) cubic-bezier(.35, .12, .28, 1);
pointer-events: none;
}
.durchstrich.ist-durch::after { transform: translateY(-50%) scaleX(1); }
/* Der Stempel: die Zeile sackt 2 px ab und bleibt unten.
Bewusst top statt translateY: Ein transform schiebt das Element auf eine
eigene Compositing-Ebene, und Chrome schaltet dort die Subpixel-
Kantenglättung ab — die gestrichene Zeile wirkt dann blasser als die
Zeilen darüber. Genau das darf sie nicht, der Text bleibt voll lesbar.
Zwei Pixel relatives Versetzen kosten dagegen nichts. */
.durchstrich.ist-durch { top: 2px; }
/* Ganze Übung statt einzelner Satz: schwerer, langsamer, sichtbar mehr
Gewicht. Dieselbe Mechanik, nur zwei Zahlen anders. */
.durchstrich--schwer::after { height: 5px; transition-duration: var(--d-strich-schwer); }
/* Der Text steht unter dem Balken — z-index 1 gegen die 2 des ::after. */
.durchstrich > * { position: relative; z-index: 1; }
/* Erledigt heißt auch: tritt zurück. Ein Kritiker vermisste genau das —
„die Ziffern bleiben unberührt und voll hell, nichts wird abgedunkelt".
Aber nur so weit, dass die Zeile lesbar bleibt: Ausgrauen wäre bei
Blendung und Schweiß das schlechteste Erledigt-Signal, und der Strich
soll „geschafft" sagen, nicht „gestrichen". 72 % ist der Kompromiss. */
.durchstrich.ist-durch > * { opacity: .72; }
/* ------------------------------------------------- 2 Ausgeschaltet
„Nie wieder vorschlagen" ist KEIN Durchstrich. Ein Strich darf nicht
zweierlei heißen: Erledigt ist Tonfarbe und heller Text, Aus ist
gedämpfter Text hinter gestricheltem Rahmen (dazu in der Ansicht das
Icon eye-slash). Wer beides gleich zeichnet, nimmt der Signatur ihre
Bedeutung.
-------------------------------------------------------------------- */
.ist-aus {
color: var(--c-text-3);
border: 1px dashed var(--c-border-strong);
background: transparent;
}
.ist-aus .name,
.ist-aus .wert { color: var(--c-text-3); }
/* Sicherung: sollte eine Ansicht beide Klassen an ein Element hängen,
gewinnt „aus" — gestrichen wird hier nichts. */
.ist-aus.durchstrich::after { content: none; }
/* --------------------------------------------------- 3 Vorgangsleiste
Fest über der Navigation, außerhalb jedes Scroll-Containers, 64 px
hoch, volle Breite, Tonfarbe der Einheit. Eine blind treffbare Fläche,
immer am selben Ort.
Was sie tragen darf: TRAINING STARTEN · WEITERMACHEN · PAUSE
ÜBERSPRINGEN · EINHEIT ABSCHLIESSEN · FERTIG — Verben auf
Vorgangsebene. Was sie NIE trägt: „Satz fertig", „Übung erledigt".
Begründung steht am Helfer in js/ui.js.
Zwei Modi, ein Element: normal trägt sie das Verb, in der Pause ist sie
der Timer (Füllung läuft rückwärts leer, Restsekunden im Verb-Slot).
-------------------------------------------------------------------- */
/* Die Leiste teilt die Formensprache der Nav-Pille darunter.
Zwei Kritiker nannten unabhängig denselben Fehler: „Der hartkantige gelbe
Balken widerspricht der sonst durchgehend runden Formensprache und drückt
direkt auf die schwebende Tab-Pille" und „Zwei unten verankerte Balken,
entgegengesetzte Ecken-Grammatik, direkt übereinander."
Deshalb dieselbe Breite, derselbe Radius, dieselbe Mittelachse — die beiden
lesen sich jetzt als ein Sockel. Randlos wäre einen Tick besser zu treffen,
aber 400 × 64 px trifft man auch verschwitzt blind, und eine Formsprache,
die sich selbst widerspricht, kostet mehr, als die 14 px Rand einbringen. */
.vorgang {
position: fixed;
/* Zentriert über margin-inline statt translateX: Die Einblend-Animation
(von-unten) belegt transform, und zwei Transforms auf einem Element
lassen die Leiste beim Einblenden nach links springen. */
left: 0;
right: 0;
margin-inline: auto;
bottom: calc(env(safe-area-inset-bottom) + var(--nav-gap) + var(--nav-h) + 10px);
z-index: 45;
width: min(calc(100% - 28px), 400px);
border-radius: 999px;
height: var(--vorgang-h);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 3px;
padding: 0 var(--pad);
/* Nur die Block-Ränder zurücksetzen. Die Shorthand `margin: 0` stünde hier
zwölf Zeilen nach `margin-inline: auto` und nähme die Zentrierung gleich
wieder weg — die Leiste klebte dann links. */
margin-block: 0;
border: none;
background: var(--tone);
color: var(--on-tone);
font-family: var(--f-display);
text-align: center;
cursor: pointer;
overflow: hidden;
isolation: isolate;
-webkit-tap-highlight-color: transparent;
/* Halten darf keinen Text markieren und keine Lupe aufrufen */
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
touch-action: manipulation;
animation: von-unten var(--d-slow) var(--e-arbeit) backwards;
}
.vorgang:active { filter: brightness(0.94); }
.vorgang:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -5px; }
.vorgang-verb {
position: relative;
z-index: 2;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.1;
text-transform: uppercase;
font-variant-numeric: tabular-nums;
/* Im Training steht hier der Name des Helden — „Kettlebell Goblet Squat"
darf die 64-px-Leiste nicht zweizeilig sprengen. */
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.vorgang-danach {
position: relative;
z-index: 2;
max-width: 100%;
font-family: var(--f-data);
font-size: var(--t-caption-size);
font-weight: 500;
letter-spacing: 0.01em;
line-height: 1.2;
opacity: 0.85;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Gesperrt: 600 ms nach jedem Verb-Wechsel ist die Leiste taub. Sichtbar
gemacht, damit ein Fehltipp nicht wie ein toter Knopf wirkt. */
.vorgang.gesperrt { opacity: 0.72; }
/* Countdown. Fläche wird Fast-Schwarz, Schrift und Füllung tragen die
Tonfarbe — so ist die Pause aus drei Metern von der Arbeit zu
unterscheiden. Die Füllung bleibt bewusst schwach: der Text darüber
muss auf beiden Hälften 4,5:1 halten. */
.vorgang.zaehlt {
/* Fast-Schwarz mit einem Hauch Ton: rein --c-bg-sunken ist von der
Seitenfläche nicht zu unterscheiden, und dann sähe man nicht die
Füllung leerlaufen, sondern die Leiste schrumpfen. */
background: color-mix(in srgb, var(--tone) 8%, var(--c-bg-sunken));
color: var(--tone);
border-top: 1px solid color-mix(in srgb, var(--tone) 45%, transparent);
}
.vorgang-fuell {
position: absolute;
inset: 0;
z-index: 0;
transform: scaleX(0);
transform-origin: left center;
background: color-mix(in srgb, var(--tone) 20%, transparent);
pointer-events: none;
}
.vorgang.zaehlt .vorgang-fuell { transform: scaleX(var(--anteil, 1)); }
/* Halten als Gegenaktion: radiale Füllung unter dem Finger, 400 ms.
Halten ist immer nur die Abkürzung — die Ansicht stellt zusätzlich ein
sichtbares Textziel bereit. */
.vorgang-halt {
position: absolute;
top: 50%;
left: var(--hx, 50%);
width: 320px;
height: 320px;
margin: -160px 0 0 -160px;
border-radius: 50%;
background: color-mix(in srgb, var(--on-tone) 20%, transparent);
transform: scale(0);
opacity: 0;
z-index: 1;
pointer-events: none;
}
.vorgang.zaehlt .vorgang-halt { background: color-mix(in srgb, var(--tone) 26%, transparent); }
.vorgang.haelt .vorgang-halt {
transform: scale(1);
opacity: 1;
transition: transform var(--halte-dauer, 400ms) linear,
opacity var(--d-fast) var(--e-arbeit);
}
/* ----------------------------------------------- 4 Typo-Grammatik
Das Grundmuster jeder Ansicht (Leitbild §3 und §6):
EYEBROW · HELD · FAKTEN · KÖRPER (Dot-Leader) · NEBEN (Datenzeile)
-------------------------------------------------------------------- */
/* Die Heldenzahl. Größen sind gemessen, nicht geschätzt — vier Sora-
Ziffern belegen bei 176 px rund 380 px von 390 px Bildschirmbreite.
Deshalb genau diese vier Stufen:
--gross 132 px 1–2 Ziffern (87 Minuten, Stufe 2)
--mittel 104 px 3 Ziffern (140 Minuten)
--uhr 112 px Uhrzeit 0:24 (Timer)
--lang 88 px Uhrzeit 12:24 (langer Zirkel)
Wer eine Heldenzahl setzt, prüft sie im Screenshot bei 390 px. */
.held {
display: block;
font-family: var(--f-display);
font-size: 104px;
font-weight: var(--t-numeral-w);
line-height: var(--t-numeral-lh);
letter-spacing: var(--t-numeral-ls);
font-variant-numeric: tabular-nums;
color: var(--c-text);
margin: 0;
}
.held--gross { font-size: 132px; }
.held--mittel { font-size: 104px; }
.held--lang { font-size: 88px; }
/* --uhr (112 px) stand hier als vierte Stufe und ist nie benutzt worden:
Der Vollbild-Timer setzt seine Ziffer selbst (.uhr, 248 px) — dort ist die
Zahl der einzige Grund, warum der Screen existiert, und die Tabelle des
Leitbilds gilt für Zahlen im Fließtext. Gelöscht statt mitgeschleppt. */
.held--ton { color: var(--tone); }
/* Die Einheit hinter der Zahl läuft nie mit ihr mit */
.held small {
font-family: var(--f-data);
font-size: var(--t-body-size);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--c-text-2);
margin-left: 8px;
}
/* Die dritte Zeile der Dreiergruppe: das Label unter der Heldenzahl
(Leitbild §3, 11–13 px). Es gab diese Klasse schon, und trotzdem hat sie
sich jede Ansicht neu gebaut — Training als .tz-wort, Abschluss als
.ab-wort, beide 14,5 px, beide dasselbe. Jetzt eine Klasse, ein Maß.
Ohne eigenen Rand: Das Label steht in beiden Fällen als Flex-Kind neben
seiner Zahl, den Abstand macht dort der Gap. */
.held-label {
font-family: var(--f-body);
font-size: var(--t-label-size);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
color: var(--c-text-2);
margin: 0;
}
/* Fakten: EINE Zeile. Details wandern in ⓘ oder hinter eine Aufklappzeile,
nie in einen eigenen Absatz. Läuft die Zeile über, scrollt sie seitlich,
statt einen zweiten Absatz aufzumachen. */
.fakten {
display: flex;
align-items: center;
gap: 10px;
margin: 0 0 4px;
padding-bottom: 2px;
font-family: var(--f-data);
font-size: var(--t-caption-size);
color: var(--c-text-2);
white-space: nowrap;
overflow-x: auto;
scrollbar-width: none;
}
.fakten::-webkit-scrollbar { display: none; }
.fakten > * + *::before {
content: "·";
margin-right: 10px;
color: var(--c-text-3);
}
.fakten b { color: var(--c-text); font-weight: 600; }
/* „gedrosselt" ist eine Angabe, keine Warnung. In der Tonfarbe war es bei
einer Combat-Einheit gelb auf gelb und las sich als Fehler; jetzt steht es
wie jede andere Angabe im Text, nur etwas heller hervorgehoben. */
.fakten .ton { color: var(--c-text); font-weight: 600; }
/* Datenzeile: was zurücktritt. Kein eigener Absatz, keine eigene Karte. */
.datenzeile {
font-family: var(--f-data);
font-size: var(--t-data-size);
line-height: var(--t-data-lh);
letter-spacing: var(--t-data-ls);
font-variant-numeric: tabular-nums;
color: var(--c-text-3);
margin: 6px 0 0;
}
/* Dot-Leader-Zeile: Name links (kürzbar), Wert rechts, Punktlinie
dazwischen. Der Leader ist das ::before des Flex-Containers und rutscht
per order zwischen die beiden Kinder — so kommt die Zeile mit zwei
schlichten aus, ohne Füll-Element im Markup.
Warum ::before und nicht ::after, wo ::after näher liegt: Genau diese
Zeile ist der Regelfall für den Durchstrich („Satz 2 …… 12 × 40 kg"
antippen), und dem gehört ::after. Beide auf demselben Pseudoelement
hieß in der ersten Fassung: Zeile gestrichen, Punktlinie weg.
Der Name bricht NIE um: „Rumänisches Kreuzheben einbeinig" ist bei
390 px länger als die Zeile, und eine zweite Zeile zerlegt die Liste. */
.dotzeile {
display: flex;
align-items: baseline;
gap: 8px;
width: 100%;
min-height: 48px;
padding: 12px 0;
margin: 0;
border: none;
background: none;
color: inherit;
font: inherit;
text-align: left;
}
.dotzeile::before {
content: "";
order: 1;
flex: 1 1 auto;
min-width: 14px;
align-self: baseline;
margin-bottom: 3px;
border-bottom: 2px dotted color-mix(in srgb, var(--c-text-3) 60%, transparent);
}
/* Eine Punktlinie, die zu nichts führt, verbindet nichts: Zeilen ohne Wert
bekommen keine. Der Katalog hatte diese Regel für sich allein gebaut, sie
gilt für jede Dot-Leader-Zeile. Zwei Schreibweisen, weil zwei Ansichten
„kein Wert" verschieden bauen: Der Katalog lässt das Element weg, die
Trainingsansicht setzt es leer (Übung ohne Dosierung). */
.dotzeile:not(:has(> .wert))::before,
.dotzeile:has(> .wert:empty)::before { display: none; }
.dotzeile > * { order: 0; min-width: 0; }
.dotzeile > :first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--t-body-size);
}
/* Der Wert rechts. Beide Selektoren, und das ist der Punkt: Sobald eine Zeile
ein drittes Kind bekommt (Winkel, „Ändern"), greift :last-child nicht mehr —
und dann hatte sich jede der vier Ansichten ihre eigene Kopie dieser sieben
Zeilen gebaut (.ablauf-kopf, .plan-zeile, .tr-zeile, .ab-klapp, alle
wortgleich). Einmal reicht. */
.dotzeile > :last-child,
.dotzeile > .wert {
order: 2;
flex: none;
font-family: var(--f-data);
font-size: var(--t-data-size);
font-variant-numeric: tabular-nums;
color: var(--c-text-2);
white-space: nowrap;
}
/* --kopf: Die Zeile ist eine Abschnittszeile — der Kopf eines Blocks im
Ablauf, ein Abschnitt des Profil- und Konto-Akkordeons, „Notizen" im
Abschluss, „4 Gründe" im Tausch-Sheet, ein Block in der Vorschau des
Assistenten. Sechs Stellen, dieselbe Rolle, und sie war dreimal wortgleich
nachdeklariert (.ablauf-kopf .name, .pf-kopf > .name, .ob-blockkopf >
.name) und zweimal anders beantwortet: .ab-klapp lief in der Fließschrift
mit 600, .ts-warum im Grundwert 400. Vier Typografien für eine Rolle.
Jetzt eine Regel: Anzeigeschrift, 700, dieselbe Sperrung wie jeder andere
Abschnittstitel — und der Name bricht um, statt zu kürzen (Leitbild
„Typografie": „Aktuelles Gewicht nachtrage…" verrät nichts mehr).
Die Klasse hieß bis hierher --gross und setzte min-height: 64px. Diese
Zeile ist nie angekommen: button.dotzeile (0-1-1) steht darüber und
gewinnt gegen .dotzeile--gross (0-1-0) — alle sechs Köpfe sind 56 px hoch,
und alle sechs Ansichten sind mit 56 px gebaut und geprüft worden. Statt
die Ansichten nachträglich um 8 px zu strecken, ist die Regel weg und der
Name sagt, was die Klasse wirklich tut. */
.dotzeile--kopf > .name {
font-family: var(--f-display);
font-weight: 700;
letter-spacing: -0.02em;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
/* Und weil der Name umbrechen darf, muss die Punktlinie verschwinden können,
statt als Vierpunkt-Stummel danebenzustehen — „wirkt wie ein
Rendering-Rest". Das Profil hatte das für sich gelöst; es gilt für jede
Abschnittszeile, deren Name lang werden kann („Schulter vorbereiten" im
Ablauf bricht bei 390 px genauso um wie „Aktuelles Gewicht nachtragen"). */
.dotzeile--kopf::before { min-width: 0; }
/* --auskunft: Hier ist der Wert die Aussage der Zeile, nicht der Name —
„Telefon …… +49 761 8878 6208", „Serie …… 0 Wochen". Zwei Ansichten hatten
das unabhängig voneinander erfunden und verschieden gelöst: Das Impressum
hob nur den Wert auf --c-text, der Verlauf hob den Wert UND setzte den
Namen auf 13 px Datenschrift. Damit las sich dieselbe Zeile in Verlauf und
Impressum wie zwei Bauteile. Jetzt eine Klasse: Der Name bleibt der Name
(Fließschrift, wie in jeder anderen Dot-Leader-Zeile), der Wert bekommt
den vollen Kontrast. */
.dotzeile--auskunft > .wert { color: var(--c-text); }
/* Der Aufklapp-Winkel am Ende einer Zeile. Er stand zweimal im CSS —
in Heute 11 px in --c-text-3, im Abschluss 13 px in --c-text-2, mit 12
bzw. 10 px Abstand: dasselbe Zeichen an derselben Stelle, zwei Maße.
Jetzt eine Klasse; gedreht wird über das aria-expanded der Zeile, damit
keine Ansicht dafür eine eigene Regel braucht. */
.dotzeile > .dz-chev {
order: 3;
flex: none;
margin-left: 12px;
font-size: 12px;
line-height: 0;
color: var(--c-text-3);
transition: transform var(--d-base) var(--e-arbeit);
}
.dotzeile[aria-expanded="true"] > .dz-chev { transform: rotate(180deg); }
/* Als Knopf: die ganze Zeile ist das Ziel, 64 px hoch, volle Breite.
Blind treffbar, kein Achsen-Lock, kein Wischen. */
button.dotzeile { min-height: 56px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button.dotzeile:active { background: var(--c-surface-2); }
button.dotzeile:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.dotzeile + .dotzeile { border-top: 1px solid var(--c-border-inset); }
/* Die Übungszeile — im Ablauf der Heute-Ansicht (.plan-zeile), in der Liste
der Trainingsansicht (.tr-zeile) und in der gelesenen Einheit des Verlaufs
(.vd-zeile) dieselbe Zeile: Name über die volle Breite mit Umbruch,
darunter rechts der Wert. Sie stand dreimal im Blatt, zuletzt mit drei
Mindesthöhen (52 / 52 / 52 nach Welle 1, davor 46 / 52). Der Verlauf hat
seine Kopie beim Bauen selbst als solche vermerkt: „Die drei gehören bei
der nächsten Glättung in EINE Regel." Hier ist sie.
Der Übungsname wird nie gekürzt (Leitbild „Typografie") — er ist die
wichtigste Information der Zeile. „Battle Ropes — lock…" ist ein Fehler,
kein Layout. Deshalb bricht er um statt abzuschneiden; die Zeile wird dann
eben zweizeilig, Dosierung und „Ändern" rutschen unter den Namen.
Was die drei trennt, steht bei ihnen: der Einzug (Heute), die Breite neben
dem Haken (Training), das Feedback am Ende (Verlauf). */
.uebungszeile {
min-height: 52px;
padding: 10px 0;
flex-wrap: wrap;
row-gap: 2px;
}
.uebungszeile > .name {
flex: 1 1 100%;
min-width: 0;
white-space: normal;
overflow: visible;
text-overflow: clip;
}
/* ------------------------------------- 5 Slide-Muster und Icon-Grundmaß
Genau EIN Slide-Muster in der ganzen App: der Eintritt in einen
Vorgang (Heute → Training, Verlauf → Detail, Vorgangsleiste). Alles
andere fadet. Kein Nachrücken von rechts, kein diagonaler Riss.
-------------------------------------------------------------------- */
@keyframes von-unten {
from { transform: translateY(100%); opacity: 0; }
}
.tritt-ein { animation: von-unten var(--d-slow) var(--e-arbeit) backwards; }
/* Grundmaß für die Inline-Icons aus js/icons.js (icon(name, cls) gibt