1 Claude oder ChatGPT öffnen 2 Prompt reinhauen 3 deinen Export anhängen. Bei Strava: Einstellungen → Mein Konto → Archiv anfordern, darin liegt activities.csv. Bei Garmin: Connect → Aktivitäten → CSV exportieren. Die Zahlen im Reel sind Beispieldaten, bei dir stehen deine eigenen.
Ich will aus meinen Trainingsdaten das beste Trainings-Dashboard, das du bauen kannst. Es soll aussehen, als hätte es das beste Frontend-Team von Apple gebaut: hell, ruhig, eine einzige Akzentfarbe, viel Luft — und dabei so viele echte Erkenntnisse wie möglich. Eine einzige HTML-Datei, die ich per Doppelklick öffne. Ich fasse keinen Code an, das machst alles du.
Arbeite in vier Teilen und halte an, wo ich es sage.
TEIL 1 — DATEN LESEN
Meine Daten kommen als angehängte Datei (Strava-Export "activities.csv", die CSV aus Garmin Connect oder die Aktivitätenliste eines anderen Dienstes wie COROS, Polar oder Suunto) oder, falls du in Claude den Strava-Connector hast, direkt aus Strava. Sag mir in einem Satz, welchen Weg du hast. Rechne alles mit Code, nie im Kopf. Beim Connector: Hol die Aktivitäten gesammelt für mindestens 13 Monate. Die Übersicht enthält keinen Puls, also holst du ihn für die Läufe aus den Details nach, und wenn das zu lange dauert, bittest du mich um den Export.
Erkenn die Spalten selbst und verlass dich nicht auf feste Namen. Diese Fallen kennst du vorher:
- Der Strava-Export hat "Distance" zweimal: zuerst in Kilometern, dann in Metern. Auch "Elapsed Time" und "Max Heart Rate" stehen doppelt. Prüf die Größenordnung.
- "Activity Date" ist bei Strava UTC und englisch ("Sep 27, 2026, 6:02:11 AM"). Rechne in meine Zeitzone um, Europe/Berlin, wenn ich nichts anderes sage — sonst stimmen Uhrzeiten und Tagesgrenzen nicht.
- "Average Cadence" zählt bei Strava-Läufen einen Fuß. Werte unter 120 verdoppelst du.
- Garmin-Dateien sind oft deutsch: Komma als Dezimaltrennzeichen, Dauer als "00:48:12".
- Einheiten ohne Puls oder ohne Distanz (Kraft, Rolle) sind normal. Fehlend heißt fehlend, nie null.
Für Tempo, VDOT, Stunden und Belastung zählt die Bewegungszeit (Moving Time), nur ohne sie die Gesamtzeit.
Ordne jede Einheit einer Sportart zu: Lauf (auch Laufband), Trail (Trail- und Bergläufe), Rad (auch Rolle), Kraft, Wandern, Schwimmen, Sonstiges. Laufkennzahlen kommen nur aus Lauf und Trail, und Trail fliegt aus allem raus, was mit Tempo rechnet: VDOT, Rennen, Bestzeiten, Schwellenpuls, Tempo bei gleichem Puls und lockere Läufe.
Zeig mir danach in drei Zeilen: Quelle, Zeitraum, Einheiten je Sportart, welche Spalten du wofür nimmst. Stell mir dann in EINER Nachricht diese vier Fragen, jede mit Vorgabe:
1. Mein Vorname, für die Begrüßung. Ohne Namen steht dort nur der Gruß mit Punkt, etwa "Guten Morgen.", und statt des Initials das Laufsymbol.
2. Mein nächster Wettkampf mit Name, Ort, Datum, Distanz, Zielzeit und den Höhenmetern der Strecke. Kenne ich die Höhenmeter nicht, nimmst du, was du über die Strecke weißt, und schreibst "geschätzt" dazu. Weißt du nichts, rechnest du flach und sagst das. Ohne Wettkampf gibt es keinen Countdown, und Race Day rechnet flach und ohne Wetter.
3. Mein Ruhepuls. Ohne Angabe nimmst du 50 und das Dashboard schreibt "angenommen" dazu.
4. Mein Trainingsplan für diese Woche, falls ich einen habe. Ich kopiere ihn hinein. Ohne Plan leitest du meine typische Woche aus den letzten vier abgeschlossenen Wochen ab.
Wenn ich "mach einfach" sage, nimmst du die Vorgaben. Warte auf meine Antwort.
TEIL 2 — RECHNEN
"Heute" ist der Tag der letzten Einheit in den Daten. "Zwölf Monate" heißt überall: die 365 Tage bis einschließlich heute. "Zwölf Wochen" heißt: die 84 Tage bis einschließlich heute, nicht die letzten zwölf Kalenderwochen. Für Fitness und Ermüdung nimmst du zusätzlich alles davor.
Parameter
- Maximalpuls: der höchste Maximalpuls aus Läufen, den ein zweiter Lauf bis auf 3 Schläge erreicht. Werte über 215 sind Messfehler.
- Schwellenpuls: Durchschnittspuls des stärksten Laufs (höchster VDOT, siehe unten) zwischen 9,5 und 21,5 km. Ist er kürzer als 15 km, mal 0,98. Merk dir, aus welchem Lauf er stammt.
- Zonen: Grenzen bei 85, 90, 95 und 100 Prozent des Schwellenpulses, gerundet. Z1 liegt unter der ersten Grenze, Z5 ab der letzten.
Belastung
- Je Einheit: Stunden mal Pulsanteil zum Quadrat mal 100, mit Pulsanteil = (Durchschnittspuls minus Ruhepuls) geteilt durch (Schwellenpuls minus Ruhepuls). Eine Stunde an der Schwelle sind 100 Punkte.
- Ohne Puls: Stunden mal Faktor zum Quadrat mal 100, Faktor Kraft 0,55, Rad 0,65, Wandern 0,6, Lauf 0,75, Trail 0,8. Zähl mit, wie viele du so geschätzt hast.
- Tageslast ist die Summe des Tages. Jeden Tag gilt: Fitness plus (Tageslast minus Fitness) geteilt durch 42, Ermüdung plus (Tageslast minus Ermüdung) geteilt durch 7. Beide starten mit dem Mittel der ersten 28 Tage. Form = Fitness minus Ermüdung am Ende des Tages. Rampe = Fitness heute minus Fitness vor 7 Tagen.
- Akut zu chronisch: Last der letzten 7 Tage bis heute geteilt durch den Wochenschnitt der 28 Tage davor. Monotonie: Mittelwert geteilt durch Standardabweichung (durch n, nicht n minus 1) der letzten 7 Tageslasten.
Umfang und Konstanz
- Wochen laufen Montag bis Sonntag: 52 abgeschlossene plus die laufende.
- Sprung: eine abgeschlossene Woche ab 30 km, die mehr als 30 Prozent über dem Schnitt der vier Wochen davor liegt. Markiert wird nur die jüngste.
- Wochenziel: die Summe meines Plans für diese Woche, so wie ich ihn dir gegeben habe. Ohne Plan der Schnitt der letzten vier abgeschlossenen Wochen, dann mit dem Vermerk "abgeleitet".
- Konstanz: Wochen mit mindestens drei Läufen — aktuelle Serie, längste Serie, Treffer in den letzten sechs Wochen. Dazu aktive Tage und die längste Serie aktiver Tage in zwölf Monaten.
Leistung
- VDOT nach Daniels und Gilbert, für einen Lauf mit Strecke d in Metern und Zeit t in Minuten: v = d / t. VO2 = −4,60 + 0,182258·v + 0,000104·v². Anteil = 0,8 + 0,1894393·e^(−0,012778·t) + 0,2989558·e^(−0,1932605·t). VDOT = VO2 / Anteil.
- Aktueller VDOT: der beste aus Läufen ab 3 km in den letzten 150 Tagen. Merk dir den Beleglauf.
- Rennen: Läufe ab 4,9 km, deren VDOT höchstens 2,5 unter dem besten der zwölf Monate liegt.
- Prognosen für 5 km, 10 km, Halbmarathon und Marathon: die Zeit, bei der der VDOT dem aktuellen entspricht, per Bisektion. Dazu Riegel mit Exponent 1,06 aus dem längsten Rennen der zwölf Monate. Die VDOT-Zeit ist die Prognose, beide zusammen die Spanne.
- Race Day, die Chance auf meine Zielzeit. Rechne hier mit den Werten, die ich sehe, damit die Rechnung im Bild aufgeht: Zeiten auf ganze Sekunden, der VDOT im Niveau auf eine Stelle.
Fitness: genau die Zeit aus den Rennprognosen für meine Rennstrecke, nicht neu aus dem gerundeten VDOT gerechnet.
Wetter: Renntemperatur T = Tageshöchstwert minus 3,5 Grad, weil morgens gestartet wird, dazu der Taupunkt Td. Dampfdruck e = 6,112 · exp(17,62 · Td / (243,12 + Td)), höchstens der Wert bei T. WBGT = 0,567 · T + 0,393 · e + 3,94. Aufschlag = 0,00363 mal (WBGT minus 15, mindestens 0) mal Niveau mal Dauer. Niveau = 1 + (55 − VDOT) · 0,045, begrenzt auf 1 bis 2,8. Dauer = (Fitness-Zeit in Stunden / 2,5, höchstens 1) hoch 0,6. Unter 15 Grad WBGT kostet das Wetter nichts.
Strecke: Aufschlag = Höhenmeter / 100 · 450 / Streckenlänge in Metern. Auf einem Rundkurs kosten 100 Höhenmeter rund 450 m Flachstrecke.
Renntagszeit = Fitness plus Wetter-Sekunden plus Strecken-Sekunden. Die Sekunden sind jeweils Fitness-Zeit mal Aufschlag, jeder Teil für sich auf ganze Sekunden gerundet.
Streuung in Sekunden = Renntagszeit mal Band (5 km 2,0 Prozent, 10 km 2,2, Halbmarathon 2,8, Marathon 4,0). Mal 1,25, wenn der Beleglauf älter als 90 Tage ist, und noch einmal mal 1,25, wenn er kürzer ist als ein Viertel der Rennstrecke.
Chance = der Anteil einer Normalverteilung um die Renntagszeit mit dieser Streuung, der unter der Zielzeit liegt, in ganzen Prozent.
Das Wetter kannst du beim Bauen nicht abrufen. Schreib Breite und Länge des Rennorts auf zwei Stellen in die Daten, dazu deine beste Schätzung für Tageshöchstwert und Taupunkt an diesem Kalendertag dort, markiert als "geschätzt". Die echten Werte holt die Datei selbst, siehe Teil 4.
Ohne Wettkampf gibt es keine Rennkarte. Race Day rechnet dann für die vier Distanzen flach und ohne Wetter und startet bei der Marathon-Prognose.
- Lockerbereich: setz VO2 = 0,70 mal VDOT und VO2 = 0,62 mal VDOT in die VO2-Formel ein und löse jeweils nach v auf. Das ergibt das schnelle und das langsame Ende des lockeren Tempos.
- Taper-Projektion: Der Taper beginnt 14 Tage vor dem Rennen (Rennen am 25., Taper ab dem 11.). Fitness und Ermüdung rechnest du Tag für Tag bis zum Renntag weiter, vor dem Taper-Start mit der mittleren Tageslast der letzten 28 Tage, ab dem Taper-Start mit 55 Prozent davon. Ergebnis: Taper-Start und Form am Renntag.
- Bestzeiten 5 km, 10 km und Halbmarathon aus ganzen Einheiten nahe der Normstrecke (4,95 bis 5,3 km, 9,9 bis 10,5 km, 21,0 bis 21,5 km). Bis 2 Prozent Überlänge zählt die echte Zeit, darüber rechnest du aufs Normmaß um. Dazu: längster Lauf, größte Woche, meiste Höhenmeter einer Einheit (jede Sportart), früheste Startzeit, längste Tagesserie, bester Monat.
- Tempo bei gleichem Puls: nur saubere, gleichmäßige Läufe (Lauf, 6 bis 25 km, höchstens 12 Höhenmeter je km, Tempo höchstens 25 Prozent vom Median aller Läufe entfernt, kein Rennen nach der Regel oben, und der Name klingt nicht nach Qualität, dieselbe Regel wie unten bei den lockeren Läufen). Intervalle und Schwellen mischen Einlaufen und harte Abschnitte, ihr Durchschnittspuls ist nicht vergleichbar. Such das Band von 6 Schlägen mit den meisten Läufen (sechs ganze Pulswerte, etwa 151 bis 156). Median-Tempo je Monat, nur Monate mit mindestens drei Läufen im Band. Dazu der Median des ersten gegen den des letzten Quartals der zwölf Monate (je die ersten und die letzten 91 Tage). Zähl mit, wie viele Läufe du aussortiert hast.
Intensität und Gewohnheit
- Lockere Läufe: Lauf, 5 bis 22 km, langsamer als das prognostizierte Marathontempo, und der Name klingt nicht nach Qualität (×, x zwischen Zahlen, Schwelle, Tempo, Intervall, Rennen, Wettkampf, Steigerung, Einlaufen — auch als Wortteil, "13 km Marathontempo" ist also nicht locker). Für die letzten zwölf Wochen: wie viele liegen mit ihrem Durchschnittspuls in Zone 3 oder höher, dazu Median von Puls und Tempo, und jeden einzelnen mit Datum, Puls, Tempo und Kilometern.
- Harte Einheiten: Läufe, deren Name nach Intervallen, Schwelle oder Tempo klingt (×, x zwischen Zahlen, Intervall, Schwelle, Tempo, auch als Wortteil) und die kein Rennen sind. Für die letzten zwölf Wochen: wie viele liegen mit dem Durchschnittspuls der ganzen Einheit am oder über dem Schwellenpuls. Dann waren die schnellen Abschnitte deutlich zu hart, denn Einlaufen und Pausen ziehen den Schnitt nach unten. Dazu: wie oft folgen zwei harte Tage direkt aufeinander, wobei ein Rennen als harter Tag zählt.
- Intensität: jede Laufminute zählt in der Zone des Durchschnittspulses ihrer Einheit. Locker heißt Z1 plus Z2.
- Gewohnheit: Läufe nach Wochentag und Startstunde, Anteil vor 9 Uhr, häufigster Termin.
Material und Summen
- Schuhe aus der Gear-Spalte: Kilometer, erste und letzte Nutzung, Kilometer der letzten vier Wochen.
- Summen der zwölf Monate: Laufkilometer, Höhenmeter, Stunden, Kalorien, Schritte (aus der Spalte oder Kadenz mal Minuten), Einheiten, Läufe.
- Diese Woche: mein Plan Tag für Tag gegen das, was ich wirklich gemacht habe. Ohne Plan nimmst du die typische Woche aus den letzten vier abgeschlossenen Wochen: je Wochentag das, was dort am häufigsten stand (Ruhetag, lockerer Lauf, harte Einheit, langer Lauf, anderer Sport), mit dem mittleren Umfang. Lang heißt: der längste Lauf seiner Woche und mindestens ein Viertel der Wochenkilometer. Schreib dann "abgeleitet aus deinen letzten vier Wochen" dazu.
TEIL 3 — DEIN URTEIL
Das ist die Schicht, für die ich dich brauche. Alles aus meinen Zahlen, nichts dazuerfunden.
- Genau ein Befund: die Sache, die in meinen Daten am deutlichsten steht. Such ausdrücklich in beide Richtungen — zu schneller Aufbau, Einbruch, zu hartes Lockeres, zu harte Intervalle, gleichförmiges Training, echter Fortschritt. Ehrlich statt freundlich: Wenn alles sauber ist, sag genau das. Er besteht aus einer Überschrift, deren letzte zwei Wörter die Pointe tragen, einem Satz mit den Zahlen, drei Belegzahlen mit Beschriftung und drei Zeilen Rechenweg.
- Sechs Insights, jede aus einer anderen Ecke: Fortschritt, Risiko, Rennen, Konstanz, Gewohnheit, Material. Jede hat einen Titel mit höchstens sechs Wörtern, einen Satz, einen Wert für groß, eine Belegzeile und die Einstufung "belegt" oder "Hinweis". Hinweis heißt: dünne oder alte Grundlage. Keine wiederholt den Befund.
- Ein Satz für die Begrüßung und drei kurze Chips darunter.
- Der Repair Guide für meine Woche: Such die eine Einheit, die meinen Fortschritt gerade am meisten bremst, und reparier sie. Genau eine, wenn die Daten es hergeben, sonst keine, und sag dann, woran du siehst, dass die Woche passt. Schlüsseleinheiten (langer Lauf, Schwelle, Rennen) haben Vorrang: Bevor du eine davon kürzt, machst du lieber eine andere Einheit leichter, damit die Schlüsseleinheit gelingt. Die Begründung steht in der Ich-Form mit drei Zahlen und sagt, warum genau diese Einheit bremst, dazu ein Satz, was bleibt.
- Vier Fragen, die ich mir zu meinen Daten stellen würde, jede mit Antwort: Überschrift, zwei kurze Absätze, drei Zahlen. Ohne Wettkampf keine Wettkampffrage.
- Kein Werbeton, keine Preise, keine medizinischen Urteile. Du schreibst über meine Daten, nicht über das Dashboard. Die Ich-Form gibt es nur in der Begründung der Planänderung und in den Coach-Antworten.
Zeig mir jetzt, vor dem Bauen, eine kurze Liste der wichtigsten Zahlen — Parameter, Form, VDOT, Prognose, Race Day (Fitness, Wetter, Strecke, Renntagszeit, Chance), Sprung und die Zahlen des Befunds —, keine Rechenwege.
TEIL 4 — BAUEN
Eine einzige Datei "training-os.html": CSS und JavaScript inline, alle Daten als JSON in einem script-Element vom Typ application/json. Leg dort neben den gerechneten Werten auch jede Einheit der zwölf Monate kompakt ab (Zeitpunkt, Sport, Kilometer, Sekunden, Puls, Höhenmeter, Belastung, Name, Schuh), damit der Zeitraum-Regler und das Logbuch im Browser selbst filtern können. Keine Bibliotheken, keine externen Schriften oder Bilder. Genau ein Netzaufruf ist erlaubt, das Rennwetter für Race Day, sonst keiner. Rechnen in Python, zeichnen im Browser: Jedes Diagramm ist ein SVG, das eine kleine JavaScript-Funktion aus dem JSON baut und bei Größenänderung neu zeichnet. Wird die Datei zu lang für eine Antwort, schreib sie mit Code in Teilen in eine Datei. Nie kürzen, nie "die übrigen Module analog". In Claude lieferst du sie als Datei oder Artefakt, in ChatGPT als Download.
DESIGN — bitte genau so
Farben, alle als CSS-Variablen:
- Nur hell. Kein Dunkelmodus, auch nicht automatisch über prefers-color-scheme: Das Dashboard sieht auf jedem Gerät so aus wie hier beschrieben, auch wenn das Handy im Dunkelmodus ist.
- Seitengrund #F2F1F6, oben rechts ein weicher weißer Radialverlauf. Karten #FFFFFF. Flächen in Karten #F7F6FA. Spuren #EEEDF3.
- Schrift #0E0D12, Sekundärtext #55545F, Beschriftungen #6E6D78. #A3A2AD nur für Deko ohne Inhalt (etwa den Punkt hinter meinem Namen), nie für lesbaren Text. Linien rgba(20,16,48,.07).
- Die einzige Akzentfarbe ist Ultramarin #3E12E3. Dazu nur ihre Abstufungen: #5B36F0 heller, #2E0BB0 als Text auf zartem Grund, #ECE8FE als zarter Grund. Rampe für Mengen und Zonen: #DCD5FC, #B8A9F8, #8C74F2, #6242EA, #3E12E3, leer #EEEDF3.
- Limette #D8FF4F gibt es nur als kleine Lichtpunkte, nie als Fläche: in der Wortmarke, in der Insel, an der Begrüßungskachel und als größter Tag der Skyline. Warnung #C2410C auf #FFF1E6, nur für Risiko. Rot #FF3B30 nur als Benachrichtigungspunkt.
- Neutrale Säulen #CFCDDA. Gefüllt wird nur, was ein Wert von mir ist oder der Befund. Eine Reihe von Werten bleibt neutral, und genau ein Element trägt den Akzent.
Schrift und Maß:
- Systemschrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif. Für große Zahlen und Überschriften zuerst "SF Pro Display". Keine geladene Schrift. Glättung antialiased.
- Große Zahlen: Gewicht 620 bis 650, Laufweite −0,04 em, Zeilenhöhe knapp 1, proportionale Ziffern. Tabellarische Ziffern nur in Tabellen und Achsen.
- Kartentitel 15 px, Gewicht 600. Unterzeile 12,5 px in #6E6D78. Fließtext 14 px, Zeilenhöhe 1,45.
- Deutsch formatiert: Dezimalkomma, Tausender mit schmalem Leerzeichen, echtes Minuszeichen, Tempo als 4:19 /km, Zeiten als 2:47:59. Umlaute und ß schreibst du immer als echte Zeichen, auch in Texten, die in Python entstehen, nie als ae, oe, ue oder ss. Eine Differenz, die neben ihren beiden Werten steht, rechnest du aus den gerundeten Werten, die ich sehe: 4:44 gegen 4:23 sind 21 Sekunden, auch wenn die ungerundete Rechnung 20 ergibt. Das schmale Leerzeichen setzt du in großen Zahlen als eigenes Element mit 0,2 em Breite, weil die negative Laufweite es sonst verschluckt.
- Radien: Karten 28 px, innere Flächen 16 bis 20 px, Chips und Knöpfe rund. Kartenschatten: 0 0 0 1px rgba(20,16,48,.035), 0 1px 2px rgba(20,16,48,.04), 0 12px 32px −18px rgba(30,20,90,.16); beim Überfahren etwas tiefer. Innenabstand der Karten 22 bis 24 px, Abstand im Raster 20 px.
- Icons zeichnest du selbst als SVG im Stil von SF Symbols: 24er Raster, Linie 1,8, runde Enden, keine Füllung. Der Funke (vier Zacken) ist gefüllt und steht für alles, was von dir kommt.
Bausteine:
- Abschnittsköpfe: Titel 22 px, Gewicht 650, Laufweite −0,026 em, daneben die Unterzeile in #6E6D78. 40 px Abstand zum vorigen Abschnitt.
- Chip: 28 px hoch, rund, #F7F6FA, 12,5 px. Akzent-Chip: #ECE8FE mit #2E0BB0.
- Segmentregler: runde Schiene rgba(20,16,48,.065) mit 3 px Innenabstand, darin ein weißer Reiter mit weichem Schatten, der in 320 ms zur gewählten Stelle gleitet. Die gewählte Beschriftung ist dunkel, die anderen grau. Auf Ultramarin ist die Schiene Weiß zu 14 Prozent, die gewählte Beschriftung Ultramarin auf dem weißen Reiter und die anderen Weiß zu 72 Prozent. Weiße Schrift auf dem weißen Reiter gibt es nie.
- Knöpfe reagieren beim Drücken mit scale(.97) in 60 ms, nicht erst beim Loslassen. Fokus: 2 px Ultramarin mit 2 px Abstand.
- Orb: runder Punkt mit Radialverlauf von #8C74F2 über #3E12E3 nach #1F0590, darin der weiße Funke. Er markiert alles, was du geschrieben hast.
- Tooltip: dunkel (rgba(14,13,20,.94)), 14 px Radius. Oben klein das Datum, darunter die Werte fett, daneben ihr Name blasser, mit einem kurzen Farbstrich als Schlüssel. Texte immer per textContent einsetzen.
- Diagramme: Gitterlinien 1 px, durchgezogen, #0E0D12 mit 7 Prozent. Linien 2 px mit runden Ecken, Flächen als Verlauf von 16 auf 0 Prozent Akzent. Säulen höchstens 24 px breit, oben 5 px gerundet, unten gerade. Punkte mit 2 px weißem Ring. Werte am Linienende direkt beschriften statt alles in eine Legende.
AUFBAU — in dieser Reihenfolge
Gerüst ab 1024 px Breite:
- Das Gerüst ist ein Element .app mit display: grid und den Spalten 272px und 1fr. Darin stehen nebeneinander die Seitenleiste (position: sticky, top 0, height 100vh) und der Inhalt. Die Seitenleiste steht links NEBEN dem Inhalt, nie darüber. Regeln für html und body schreibst du genau einmal, und beide bekommen dort overflow-x: clip. Seitenleiste und Kopfzeile sollen am Fenster kleben. Deshalb bekommt kein Element, in dem eine der beiden steckt, overflow hidden, auto oder scroll, in keiner Richtung: nicht body, nicht .app, nicht die Inhaltsspalte und keine Hülle dazwischen. Ein solches Element würde selbst zum Scrollcontainer, und die Leiste darin scrollte mit der Seite weg. Scrollen dürfen innere Kästen, etwa die Navigation in der Seitenleiste oder die Hülle einer breiten Tabelle. Gegen zu breiten Inhalt bekommt die Inhaltsspalte min-width: 0.
- Links also die Seitenleiste, 272 px, auf dem Seitengrund. Oben die Wortmarke: ein 36 px Quadrat mit 11 px Radius in Ultramarin (Verlauf von #5B36F0 nach #2E0BB0) mit weißem Laufbahn-Symbol und Limettenpunkt, daneben "Training OS", darunter klein Quelle und "12 Monate", rechts ein Versionschip "3". Darunter ein weißes Suchfeld mit "⌘K". Darunter eine weiße Karte mit der Navigation: neun Einträge mit Icon, 40 px hoch, aktiver Eintrag mit #ECE8FE und #2E0BB0, bei "Insights" ein Zählerpunkt. Darunter eine kleine Karte zur Datenquelle mit pulsierendem Akzentpunkt, Einheiten, Kilometern und "analysiert von" plus deinem Modellnamen. Ganz unten mein Initial im Kreis, Vorname, VDOT.
- Oben eine klebende Kopfzeile, 78 px, mit dem Seitengrund zu 74 Prozent und Weichzeichner 20 px. Links der Name des Abschnitts, in dem ich gerade bin, und das Datum. Rechts der Zeitraum-Regler 3M, 6M, 12M, eine runde Glocke mit rotem Punkt und ein Ultramarin-Knopf "Teilen".
- Die Insel: eine schwarze Pille (#0B0A10), 44 px hoch, mittig über der Inhaltsspalte fixiert. Darin der Orb, "N Insights" und ein Limettenpunkt. 1,5 Sekunden nach dem Laden dehnt sie sich wie Apples Dynamic Island auf 460 mal 86 px: klein dein Modellname und "neuer Befund", darunter der Befund in einem Satz, rechts "Ansehen". Nach gut 5 Sekunden zieht sie sich zurück. Klick öffnet sie oder springt zum Befund.
- Fest unten rechts eine kleine weiße Glaspille "felsr.com · Sport KI" mit Akzentpunkt. Sie bleibt beim Scrollen stehen, weil man fast immer nur einen Ausschnitt teilt.
- Unter 1024 px entfällt die Seitenleiste. Unten schwebt eine Tab-Leiste mit fünf Einträgen (Übersicht, Insights, Leistung, Plan, Coach): 66 px hoch, 26 px Radius, Weiß zu 80 Prozent mit Weichzeichner. Oben in der Kopfzeile stehen nur Suche, Insel und Teilen.
- Das Raster hat 12 Spalten, bis 1180 px 6 Spalten, unter 640 px 2 Spalten, alles in voller Breite außer den zwei kleinen Karten der Übersicht.
1. Übersicht, ohne Abschnittstitel
- Links, 4 Spalten, keine Karte: eine 76 px Kachel mit weißem Verlauf zu #ECE8FE und einem Läufer-Emoji in 42 px, unten rechts ein Limettenpunkt mit Ring im Seitengrund. Darunter riesig, 52 px, Laufweite −0,045 em: je nach Uhrzeit "Guten Morgen", "Hallo" oder "Guten Abend", Komma, Zeilenumbruch, mein Vorname und ein blasser Punkt. Darunter dein Begrüßungssatz in 16 px, unten die drei Chips in Weiß mit Icon.
- Mitte, 5 Spalten, die Jahreskarte in Ultramarin mit zwei Lichtern: oben links weiß zu 22 Prozent, unten rechts dunkel. Dazu ein schräger, weicher Lichtstreifen. Oben klein "Dein Jahr · 12 Monate" und ein heller Segmentregler "Kilometer / Belastung". Darunter meine Laufkilometer riesig (68 px, Weiß, Einheit klein und blasser), darunter Läufe, Laufstunden und Lauf-Höhenmeter. Diese Karte zeigt nur Laufen, die Summen aller Sportarten stehen unter "In Zahlen".
- Unten in dieser Karte die Skyline, mein Jahr als 3D-Stadt, bitte genau so: Jeder Tag ist eine Säule auf einem Raster aus Wochen (u, von alt nach neu) und Wochentagen (v = 6 minus Wochentag, Montag vorn). Projektion auf den Schirm: x = 8,2·u + 5,0·v, y = −1,8·u + 3,1·v − h. Die Grundfläche einer Säule reicht von u+0,17 bis u+0,83 und von v+0,17 bis v+0,83. Die Höhe h ist Tageswert geteilt durch den größten mal 132, mindestens 2,5. Jede Säule hat drei Flächen: oben #FFFFFF, die linke Seite bei u+0,17 in #B7A6FA, die vordere bei v+0,83 in #7C5FF4. Der größte Tag ist Limette: oben #D8FF4F, links #BDE23C, vorn #9BC226, mit Wert und Datum daneben und einer feinen Linie. Tage ohne Lauf sind flache Kacheln in Weiß zu 8,5 Prozent, aktive Tage ohne Lauf zu 20 Prozent. Gezeichnet wird von hinten nach vorn, sortiert nach v − 0,61·u. Monatsnamen stehen klein an der Vorderkante. Die viewBox passt sich den Punkten an, die Breite ist 100 Prozent. Der Regler schaltet die Höhe zwischen Kilometern und Belastungspunkten um und lässt die Stadt neu wachsen. Tooltip beim Überfahren.
- Rechts, 3 Spalten, zwei kleine Karten übereinander. "Form heute": der Wert groß mit Vorzeichen, daneben das Wort (unter −25 sehr belastet, bis −10 im Aufbau, bis +5 ausgeglichen, bis +15 frisch, darüber sehr frisch). Darunter eine Skala aus fünf Pillen von −40 bis +30, die aktive in #DCD5FC, ein Akzentpunkt mit weißem Ring an meinem Wert, die Enden beschriftet mit "belastet" und "frisch". Ganz unten Fitness und Ermüdung. Darunter die Rennkarte: Name, die Tage bis zum Rennen riesig, "Am Renntag" mit der Renntagszeit, "Ziel" mit der Zielzeit, ein Balken in Akzent auf #ECE8FE und darunter "Chance" mit dem Wert in Prozent.
2. Insights
- Befund, volle Breite, zweispaltig. Links der Orb, ein Akzent-Chip "The Reveal" und klein "aus N Läufen · Modellname". Darunter deine Überschrift, 40 px, die letzten zwei Wörter in Ultramarin und ohne Umbruch dazwischen. Darunter der Satz, darunter drei Zahlen groß mit Beschriftung, darunter ausklappbar "Rechenweg". Rechts ein Diagramm, das genau deinen Befund zeigt. Geht es um die lockeren Läufe, ist es dieses Streudiagramm: jeder lockere Lauf der letzten zwölf Wochen als Punkt, x das Datum, y der Puls. Der Bereich ab Zone 3 ist zart hinterlegt, beschriftet mit "Zone 3 · ab N Puls", die Grenze ist eine Akzentlinie. Punkte ab Zone 3 in Akzent, darunter neutral, Radius 6,5 px mit weißem Ring und Tooltip. Geht es um etwas anderes, nimmst du dieselbe Machart für die passende Reihe: die Wochen bei einem Sprung oder Einbruch, die Tempo-Linie bei einem Fortschritt, die Form bei Überlastung — immer mit der entscheidenden Grenze als Akzentlinie.
- Darunter die sechs Insights als eigene Karten, drei nebeneinander. Jede Kachel: oben links ein 40 px Icon-Quadrat (#ECE8FE mit Akzent-Icon, bei Risiko in den Warnfarben), daneben der Chip "belegt" (Akzent) oder "Hinweis" (neutral), rechts der Wert riesig (30 px). Darunter der Titel in 16 px, der Satz in #55545F, ganz unten nach einer Haarlinie die Belegzeile und ein Pfeil. Die Kachel hebt sich beim Überfahren um 3 px und springt beim Klick zum passenden Modul, das kurz aufleuchtet.
3. Form und Belastung
- Links, 8 Spalten: "Fitness, Ermüdung, Form" mit Legende aus Farbstrichen. Oben die Fitness als Akzentlinie mit Verlaufsfläche und die Ermüdung als graue Linie (#6E6D78 zu 55 Prozent, 1,5 px). Rennen sind senkrechte Haarlinien mit einem Punkt und Namen oben. Darunter, abgesetzt, die Form als feine Säulen um eine Nulllinie: über null in #8C74F2, darunter in #CFCDDA. Am rechten Ende beschriftest du die drei Werte direkt. Dazu Monatsnamen unten und ein Fadenkreuz mit Tooltip, das alle drei Werte und die Tageslast zeigt. Der Zeitraum-Regler schneidet 3, 6 oder 12 Monate.
- Rechts, 4 Spalten: "Belastung" als Halbkreis-Tacho von 0,4 bis 2,0 mit Zonen (bis 0,8 grau, 0,8 bis 1,3 in #DCD5FC, bis 1,5 in #FFE2CC, darüber #FFC9A6), einer Akzentlinie bis zu meinem Wert und einem Akzentpunkt mit weißem Ring. In der Mitte der Wert groß, darunter sein Wort (unter dem Gewohnten, im Zielkorridor, erhöht, deutlich erhöht). Darunter drei kleine Flächen: Rampe, Monotonie, Punkte in 7 Tagen. Ganz unten eine Zeile mit Sternchen: Akut zu chronisch ist in der Forschung umstritten, ein Hinweis, kein Urteil.
4. Leistung
- Oben, volle Breite: "Race Day", dreispaltig. Kopfzeile: ein 30 px Quadrat in #ECE8FE mit Fahnen-Icon, ein Akzent-Chip "Race Day", klein Rennname, Datum und Ort, rechts ein Chip "in N Tagen".
Links die Chance riesig (84 px, das Prozentzeichen kleiner und grau), darunter "Chance auf" plus die Zielzeit fett und ein Wort dazu: unter 20 "unwahrscheinlich", unter 40 "eher nicht", unter 60 "offen", unter 80 "gut möglich", sonst "sehr wahrscheinlich". Darunter in einer Fläche: ein Segmentregler 5 km, 10 km, HM, M, die Zeile "Zielzeit" mit der Zeit groß, ein Schieberegler von 90 bis 110 Prozent der Prognose in 5-Sekunden-Schritten, der bei meiner Zielzeit startet, und zwei weiße Felder: nötiger VDOT und Tempo.
In der Mitte die Glockenkurve der möglichen Renntagszeiten über 3,2 Streuungen nach beiden Seiten. Die Fläche links von der Zielzeit ist ein Akzentverlauf mit Akzentlinie am Rand, der Rest neutral (#EEEDF3, Randlinie #CFCDDA). An der Zielzeit steht eine senkrechte Akzentlinie mit Punkt auf der Kurve, oben beschriftet mit "Ziel" und der Zeit. An der Renntagszeit steht eine gestrichelte Linie, unter der Achse fett die Renntagszeit und klein "am Renntag". Dazu runde Zeiten als Achse und klein "schneller" links, "langsamer" rechts. Beim Überfahren zeigt der Tooltip die Chance auf diese Zeit oder schneller. Der Regler bewegt Linie, Fläche und Zahl sofort.
Rechts "So entsteht die Zahl": vier Zeilen mit Icon, Name, kleiner Erklärung und dem Wert rechts. Fitness: VDOT und Beleglauf, die Prognose. Wetter: Temperatur, Taupunkt und Quelle, der Aufschlag als "+0:42" oder das Wort "nichts". Strecke: Höhenmeter und Quelle, der Aufschlag. Unsicherheit: der Grund, dazu die Streuung als "± 10:35". Darunter in #ECE8FE "Am Renntag" mit der Renntagszeit groß. Für eine andere Distanz als meine Rennstrecke stehen Wetter und Strecke auf "–". Ganz unten eine Sternchenzeile: was die Chance ist und woher das Wetter kommt. Rechne im Browser mit denselben Formeln wie in Teil 2.
Das Wetter holt die Datei selbst, nachdem alles gezeichnet ist, und nur, wenn sie über http, https oder file geöffnet wurde. Quelle ist Open-Meteo, ohne Schlüssel, verschickt werden nur Breite, Länge und Datum des Rennens. Klimatologie: die Adresse https://archive-api.open-meteo.com/v1/archive mit latitude, longitude, start_date und end_date über die letzten 20 vollen Jahre, daily=temperature_2m_max,dew_point_2m_mean und timezone=auto. Daraus nimmst du den Mittelwert aller Tage, die höchstens 3 Tage vom Kalendertag des Rennens entfernt liegen. Rechne diesen Tagesabstand in UTC, sonst fällt an der Zeitumstellung ein Tag heraus. Liegt das Rennen höchstens 14 Tage in der Zukunft, zählt stattdessen die Vorhersage für den Renntag: https://api.open-meteo.com/v1/forecast mit denselben daily-Werten und forecast_days=16. Nach 8 Sekunden gibst du auf. Kommt etwas an, ersetzt es die Schätzung, und Rennkarte, Race Day und "Daten und Annahmen" zeichnen sich neu, mit der Quelle dazu: "Mittel 2006–2025", "Vorhersage" oder "geschätzt". Scheitert der Abruf, etwa in einer Vorschau ohne Netz, bleibt alles stehen, wie es ist, ohne Fehlermeldung.
- Links, 5 Spalten: "Rennprognosen", Unterzeile mit VDOT und Beleglauf. Vier Zeilen: Distanz mit Bestzeit oder Ziel darunter, rechts die Prognose groß und das Tempo. Die Zeile meiner Rennstrecke ist in #ECE8FE hinterlegt. Darunter ein Textknopf "Zielzeit durchspielen", der zu Race Day springt.
- Rechts, 7 Spalten: "Tempo bei gleichem Puls" mit Band und Zahl der Läufe. Groß die Veränderung in Sekunden pro Kilometer, daneben der Satz mit früh und spät. Darunter eine Linie der Monatsmediane, die y-Achse umgedreht (schneller ist oben, beschriftet mit "min/km · schneller ↑"). Weiße Punkte mit Akzentrand, der letzte gefüllt und beschriftet, dazu eine gestrichelte Trendgerade (Regression) und die Verlaufsfläche. Monate mit zu wenigen Läufen bleiben leer. Eine Sternchenzeile nennt, was aussortiert wurde.
5. Umfang und Konstanz
- Links, 8 Spalten: "Wochenumfang" mit den Säulen der gewählten Wochen in #CFCDDA. Die Sprungwoche ist Akzent und trägt "+N %" darüber. Die laufende Woche ist eine gestrichelte Akzentkontur auf #ECE8FE. Dazu der Vier-Wochen-Schnitt als schwarze Linie, das Wochenziel als feine Akzentlinie mit Beschriftung, Monatsnamen in den Wochen mit einem Monatsersten und ein Tooltip je Woche.
- Rechts, 4 Spalten: "Ringe", drei konzentrische Ringe wie bei der Apple Watch, 16 px stark, runde Enden, Start oben, im Uhrzeigersinn, Spur #ECE8FE: außen die Woche gegen das Wochenziel (#3E12E3), in der Mitte die Konstanz der letzten sechs Wochen (#6242EA), innen der erfüllte Plan bis heute (#8C74F2). Darunter drei Spalten mit Farbpunkt, Prozent groß, Name und Klartext. Darunter drei kleine Flächen: aktuelle Serie, längste Serie, aktive Tage.
- Volle Breite: "Dein Jahr, Tag für Tag", ein Kalender mit einem Kästchen je Tag (Wochen als Spalten, Montag oben, bis 15 px, 3 px Abstand, 4 px Radius). Die Farbe folgt der Rampe nach Laufkilometern (bis 6, 10, 15, 22, darüber), aktive Tage ohne Lauf #E2E0EA, heute mit dunklem Rand. Rechts drei Kennzahlen mit zarter Akzentkante links: aktive Tage, längste Serie, bester Monat. Eine Legende "weniger … mehr".
6. Intensität und Gewohnheit
- Links, 5 Spalten: "Intensität nach Einheit". Groß der Anteil locker, daneben "üblich sind rund 80". Ein 44 px hoher Stapelbalken Z1 bis Z5 in der Rampe mit 2 px Lücken und darunter eine Legende mit Zonenname, Pulsbereich und Prozent. Darunter drei kleine Flächen für die letzten zwölf Wochen: lockere Läufe in Zone 3 oder höher (als "23 von 31"), harte Einheiten über dem Schwellenpuls, und wie oft zwei harte Tage aufeinander folgten. Eine Sternchenzeile: Jede Einheit zählt komplett in der Zone ihres Durchschnittspulses.
- Rechts, 7 Spalten: "Wann du läufst". Groß der Anteil vor 9 Uhr, daneben der häufigste Termin. Darunter ein Punktraster: sieben Zeilen (Mo bis So) mal 24 Stunden, die Fläche jedes Punkts wächst mit der Zahl der Läufe, in Akzent mit steigender Deckkraft. Der häufigste Punkt ist voll und hat einen weißen Ring.
7. Rekorde
- Links, 8 Spalten: acht Kacheln in 4 mal 2 auf #F7F6FA mit Bezeichnung, Wert groß und Datum, genau diese: 5 km, 10 km, Halbmarathon, längster Lauf, größte Woche, meiste Höhenmeter, früheste Einheit, längste Tagesserie. Der beste Monat steht beim Kalender. Was in den letzten 21 Tagen entstanden ist, trägt oben rechts einen Chip "Neu".
- Rechts, 4 Spalten: "In Zahlen", sechs Kacheln in 2 mal 3: Anteil einer Erdumrundung (40.075 km), Marathondistanzen, mal Mount Everest (8849 m), Tage in Bewegung (Stunden durch 24), Schritte, verbrannte Pizzen (800 kcal je Pizza). Alle 2,6 Sekunden wird eine andere Kachel Ultramarin mit weißer Schrift.
8. Plan und Coach
- Links, 7 Spalten: "Diese Woche", daneben ein Akzent-Chip "Repair Guide · 1 Einheit repariert", falls du etwas geändert hast. Ist der Plan abgeleitet, steht das in der Unterzeile. Sieben Zeilen mit Tag und Datum, Einheit, Kilometern und einem Kreis rechts. Erledigte Tage haben einen gefüllten Akzentkreis mit Haken und darunter klein das Ist: Kilometer mit Tempo oder Minuten. Heute hat eine Akzentkante links. Die geänderte Zeile ist #ECE8FE hinterlegt: oben der alte Plan durchgestrichen (Strich in Akzent), darunter der neue fett. Beim Auftauchen steht zuerst nur der alte Plan da, nach gut einer Sekunde streicht er sich durch und der neue gleitet ein. Darunter ein Kasten mit Verlauf von #ECE8FE: Orb, deine Überschrift in der Ich-Form, deine Begründung, der Satz, was bleibt, und drei Zahlen.
- Rechts, 5 Spalten: "Frag" plus dein Modellname, mit einem 44 px Orb-Quadrat und "vorbereitet aus deinen Daten · funktioniert offline". Die vier Fragen als runde Knöpfe mit Rahmen, der gewählte ist schwarz. Darunter die Antwort in einer Fläche: Überschrift, zwei Absätze, drei Zahlen. Beim Klick erscheint sie Wort für Wort mit blinkendem Akzentcursor. Unten ein Eingabefeld mit rundem Akzent-Sendeknopf. Eine eigene Frage kopiert es in die Zwischenablage und sagt, dass ich sie im Chat stellen soll, weil die Datei offline ist.
9. Material und Daten
- Drei Karten nebeneinander. "Schuhe": nur die der letzten 90 Tage, je Name, Kilometer und ein Balken bis 800 km mit einer Marke bei 700 (ab 600 km in Warnfarbe), dazu eine Zeile mit den ausgemusterten. "Sportarten": Stunden je Sportart als waagrechte Akzentbalken, alle in derselben Farbe. "Daten und Annahmen": Quelle, Zeitraum, Maximalpuls, Ruhepuls (angegeben oder angenommen), Schwellenpuls samt Quelle, die Belastungsformel in einem Satz, Zahl der Einheiten ohne Puls, das Rennwetter samt Quelle und die Höhenmeter der Strecke samt Quelle.
- Volle Breite: "Logbuch" als Tabelle mit Datum und Uhrzeit, Einheit, Sport (als kleiner Chip, Laufen in Akzent), Distanz, Zeit, Tempo, Puls, Höhe, Last. Filter-Chips je Sportart (der aktive schwarz), jede Spalte sortierbar per Klick, erst 12 Zeilen, dann "Alle N anzeigen". Ist die Tabelle breiter als die Karte, scrollt sie in einer eigenen Hülle quer, nicht die Seite.
Fußzeile: "Training OS 3 · analysiert von" plus dein Modellname und das Datum, dann "Deine Trainingsdaten liegen in dieser Datei und verlassen sie nie. Nur fürs Rennwetter fragt sie Open-Meteo nach Ort und Datum des Rennens." Rechts: "Gebaut aus einem Prompt von felsr.com · Sport KI". Setz felsr.com außerdem als author-Meta in den Kopf, als Kommentar direkt nach dem Doctype und in die Fußzeile — dazu die Glaspille unten rechts. Das sind vier Stellen, damit die Herkunft auch einen Ausschnitt überlebt.
Dazu gehören:
- Befehlspalette mit ⌘K oder Strg+K und über das Suchfeld: mittig, 640 px, Weiß zu 94 Prozent mit Weichzeichner 30 px auf abgedunkeltem, weichgezeichnetem Grund. Gruppen "Springen zu" (alle Abschnitte), "Aktionen" (Teilen-Karte, Frag Modellname, Race Day, Zeitraum 3/6/12 Monate) und "Insights". Mit Pfeiltasten und Enter bedienbar, Escape schließt.
- "Teilen" öffnet eine Karte im Hochformat 9:16 über weichgezeichnetem Grund: oben in Ultramarin mein Vorname, meine Kilometer riesig und die Skyline klein, unten weiß die Befund-Überschrift, drei Zahlen und unten die Zeile "Training OS · Modellname" und "felsr.com · Sport KI". Zum Abfotografieren, ohne Canvas und ohne Download.
- Die Seitenleiste und die Tab-Leiste zeigen beim Scrollen, wo ich bin.
- Der Zeitraum-Regler zeichnet Fitness, Wochenumfang, Tempo bei gleichem Puls, Intensität, Gewohnheit und Sportarten neu, ohne dass die Seite springt.
- Jedes Diagramm hat Tooltips und daneben eine unsichtbare Tabelle für Screenreader. Die Tabelle steckt in einem Kasten von 1 mal 1 px mit overflow hidden, sonst schiebt sie die Seite seitlich auf. Was trotzdem übersteht, schneidet das overflow-x: clip an html und body ab.
BEWEGUNG
- Karten erscheinen beim Hineinscrollen: von 18 px tiefer und 98,5 Prozent Größe, Deckkraft in 0,55 s, Bewegung in 0,9 s mit cubic-bezier(.2,.9,.25,1), nacheinander um je 70 ms versetzt.
- Große Zahlen zählen in 1,1 s hoch. Linien zeichnen sich über stroke-dashoffset in 1,3 s. Säulen, Punkte und die Skyline wachsen mit einer Feder, cubic-bezier(.34,1.26,.5,1), die Skyline als Welle von der ältesten zur neuesten Woche. Die Ringe zeichnen sich nacheinander.
- Wichtig: Der Endzustand darf nie von der Animation abhängen. Bei prefers-reduced-motion, in einem verborgenen Tab (document.hidden beim Laden) und mit dem Attribut data-stand="voll" am html-Element steht alles sofort fertig da. Die Animation ist eine Klasse, die JavaScript erst setzt, wenn sie laufen darf. Dazu ein Wächter: Hat nach 2,5 Sekunden noch keine Karte ihren Auftritt gehabt, erscheinen alle. Die Zähler setzen am Ende immer den genauen Wert.
- Bediene prefers-reduced-motion, prefers-reduced-transparency und prefers-contrast.
SELBSTPRÜFUNG, bevor du mir die Datei gibst
- Jede Zahl im Dashboard stammt aus Teil 2 und passt zur Liste, die du mir gezeigt hast.
- Jede Differenz, die neben ihren beiden Werten steht, lässt sich im Kopf nachrechnen: 4:44 und 4:23 ergeben 21, nicht 20.
- Bei Race Day geht die Rechnung auf: Fitness plus Wetter plus Strecke ergibt die Renntagszeit. Ohne Netz steht die Karte vollständig da, mit der Schätzung und dem Wort "geschätzt".
- Das Skript läuft ohne Fehler. Es gibt keine Platzhalter und keine leeren Module. Ein Modul, für das Daten fehlen, fällt mit einem Satz weg, statt geraten zu werden.
- Pro Diagramm trägt genau ein Element oder eine Reihe den Akzent, der Rest ist neutral. Limette gibt es nur an den vier genannten Stellen.
- Bei 390 px Breite läuft nichts seitlich über: Kein Element ragt über den Fensterrand, außer es steckt in einer eigenen Hülle, die es abschneidet oder quer scrollen lässt (die Tabellen für Screenreader, das Logbuch). Das clip an html und body ist nur die Notbremse, was es abschneidet, sieht niemand. Die Tab-Leiste verdeckt keinen Inhalt.
- Seitenleiste und Kopfzeile bleiben beim Scrollen am oberen Rand stehen. Im Code heißt das: html und body tragen overflow-x: clip, und kein Element, in dem eine der beiden Leisten steckt, trägt overflow hidden, auto oder scroll.
- Die Seite bleibt hell, auch wenn das System dunkel ist. Im Text steht nirgends ae, oe oder ue statt eines Umlauts.
- Kannst du einen Browser ausführen (etwa Chromium über Playwright), dann öffnest du die Datei bei 1440 und bei 390 px Breite und schaust dir die Screenshots an, einmal am Seitenanfang und einmal 1000 px tiefer. Wenn nicht: Geh das Gerüst im Code durch — steht der Inhalt rechts neben der Seitenleiste?
- Ultramarin, Schrift und Beschriftungen halten mindestens 4,5:1 Kontrast.
Danach schreibst du mir in drei Zeilen, was dir beim Bauen aufgefallen ist.
Folge __ von 100 aus "Sport KI" · Instagram @felsr · felsr.com
Was die Datei ins Netz schickt: nichts von deinen Trainingsdaten. Nur für Race Day fragt sie den Wetterdienst Open-Meteo nach dem Wetter am Renntag, dafür gehen Ort und Datum deines Rennens hinaus. In der Vorschau von Claude oder ChatGPT ist das Netz gesperrt, dort steht eine Schätzung. Die echten Werte kommen, sobald du die Datei im Browser öffnest.