body.e-h3{ --bg:#0a0b0e; --bg2:#08090b; --panel:#101216; --panel2:#161920; --line:#1b1e23; --line2:#282c34; /* ── Textstufen: eine Korrektur, und sie betrifft auch Runde 3 ── In H steht als Kommentar, --faint sei von 4,2:1 auf "~5,3:1" angehoben worden. Diese Runde hat es nachgerechnet, statt es zu glauben: #646b76 auf #08090b ergibt 3,70:1, nicht 5,3:1. Auf dem helleren --panel (#101216) — Einheitenblatt, Nebenziel- karten, Monatsraster — sind es 3,49:1. Beides gemessen im laufenden Bildschirm, nicht geschaetzt. AA verlangt unter 18 px 4,5:1. Betroffen war damit alle Kleinschrift beider Entwuerfe, einschliesslich des neuen Inhalts dieser Runde (die Vorgabezeile im Blatt). Angehoben werden DREI Stufen gemeinsam, damit die Hierarchie txt > dim > faint erhalten bleibt statt auf zwei Stufen zusammenzufallen: --faint #7d838d 5,2:1 auf --bg2 · 4,9:1 auf --panel --dim #9aa1ab 7,7:1 auf --bg2 · 7,2:1 auf --panel Die Zurueckhaltung des Entwurfs kommt danach aus Groesse und Abstand, nicht mehr aus Unlesbarkeit. */ --txt:#f3f5f8; --dim:#9aa1ab; --faint:#7d838d; --sig:#d4fa52; --sig2:#b0d636; --sigdim:#222c0d; --ent:#ffc46b; --entdim:#2c2214; --r:13px; --rs:9px } body.e-h3{ background:var(--bg2) } body.e-h3 #view{ padding:2px 18px 48px } /* Phase 6, Block 5 — gemessen, nicht geschätzt: der feste Fuß der Vorlage (Onboarding, „Deine Angaben") ist 77 px hoch, der Rand unter dem Inhalt hier nur 48 px. Am Ende jedes rollenden Onboarding-Schritts lagen damit 19 px der letzten Karte unter dem Fuß, die letzte Textzeile halb verdeckt. Die Grundgestaltung hatte 100 px (`.body`); H3 hatte sie seit Block 3 überschrieben. Mit 96 bleiben über dem Fuß 23 px Luft, auf allen vier rollenden Schritten nachgemessen. */ body.e-h3 #view.ob{ padding-bottom:96px } body.e-h3 .top{ border-bottom:none } body.e-h3 .top b{ font-weight:650; letter-spacing:-.03em } /* Typoskala */ body.e-h3 .hK{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint) } body.e-h3 .hDisp{ font-size:30px; line-height:1.07; letter-spacing:-.035em; font-weight:650; margin:8px 0 0 } body.e-h3 .hDisp u{ text-decoration:none; color:var(--ent) } body.e-h3 .hSec{ display:flex; align-items:center; gap:12px; margin:32px 0 12px } body.e-h3 .hSec h2{ margin:0; font-size:17px; letter-spacing:-.02em; font-weight:650; white-space:nowrap } body.e-h3 .hSec i{ flex:1; height:1px; background:var(--line2) } /* Der Abschnittslink ist eine echte Navigation — im Fortschritt ist er der Zugang zum Archiv. Gemessen war seine Trefferflaeche 15 px hoch, also nur die Zeilenhoehe. Polster plus negativer Aussenabstand heben sie auf 41 px, ohne die Zeile hoeher zu machen. Die 44 px der Plattformvorgabe waeren nur zu erreichen, indem der Abschnittskopf selbst waechst — das kostet auf vier Koepfen je Bildschirm mehr, als es bringt. */ body.e-h3 .hSec a{ font-family:var(--sans); font-size:11.5px; font-weight:500; color:var(--sig); text-decoration:none; cursor:pointer; flex:none; letter-spacing:0; padding:12px 8px; margin:-12px -8px } body.e-h3 .hBody{ font-size:13.5px; line-height:1.62; color:var(--dim) } body.e-h3 .hBody b{ color:var(--txt); font-weight:600 } body.e-h3 .hMeta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; color:var(--faint) } body.e-h3 .hHead{ position:relative; margin:0 -18px; padding:20px 18px 0 } body.e-h3 .hHead::before{ content:''; position:absolute; inset:-28px -10% auto -10%; height:200px; background:radial-gradient(58% 100% at 50% 0%,rgba(212,250,82,.07),transparent 70%); pointer-events:none } body.e-h3 .hHead > *{ position:relative } /* ── Der Behälter für die heutige Einheit ────────────────────────────── Product-Owner-Kritik: die bevorstehende Einheit wirkte wie eine gewöhnliche Überschrift. Sie bekommt einen eigenen Ort — mit den ruhigsten Mitteln, die die Aufgabe lösen: abgesetzter Grund, Haarlinie, ein Lichtstrich in Limette an der Oberkante. Der Strich ist die einzige Farbe und er ist zwei Pixel hoch. */ body.e-h3 .hEinheit{ position:relative; margin:8px 0 0; padding:20px 18px 16px; border-radius:20px; background:linear-gradient(180deg,#15191f 0%,#101318 100%); border:1px solid var(--line2); overflow:hidden } body.e-h3 .hEinheit::before{ content:''; position:absolute; left:16%; right:16%; top:0; height:2px; background:linear-gradient(90deg,transparent,var(--sig),transparent); opacity:.85 } body.e-h3 .hEinheit .hK{ color:var(--sig) } body.e-h3 .hEinheit .hDisp{ font-size:27px; margin-top:8px } /* Das Band braucht im Behälter eine eigene Spur. Die dunklen Blöcke — Aufwärmen, Gelenkarbeit, Ausklang — liegen farblich sehr nah am neuen Behältergrund; ohne Spur verschwanden sie darin, und das Band sah aus wie eine gestrichelte Linie mit Lücken statt wie ein voller Balken. Genau so im Bildschirm gesehen, nicht vermutet. */ body.e-h3 .hEinheit .hKomp{ margin:16px 0 0; background:#090b0e } /* Erledigt und unterbrochen sind keine bevorstehende Einheit: derselbe Ort, aber der Lichtstrich nimmt sich zurück. */ body.e-h3 .hEinheit.erledigt::before{ background:var(--line2); opacity:1 } body.e-h3 .hEinheit.erledigt .hK{ color:var(--faint) } body.e-h3 .hEinheit.unterbrochen::before{ background:linear-gradient(90deg,transparent,var(--ent),transparent) } body.e-h3 .hEinheit.unterbrochen .hK{ color:var(--ent) } body.e-h3 .hEinheit.ruhe{ background:none; border-style:dashed; border-color:var(--line) } body.e-h3 .hEinheit.ruhe::before{ display:none } body.e-h3 .hEinheit.ruhe .hK{ color:var(--faint) } body.e-h3 .hEinheit.ruhe .hDisp{ color:var(--dim) } /* Die zurückgenommene Fassung: keine Überschrift, kein Kicker, kein Lichtstrich — sie steht unter der Fortsetzen-Karte, und die trägt den Namen bereits. */ body.e-h3 .hNachtrag{ margin:12px 0 0; padding:0 2px } body.e-h3 .hNachtrag .hKomp{ margin:8px 0 0; background:#141821 } body.e-h3 .hNachtrag .hTun{ margin:12px 0 0 } body.e-h3 .hNachtrag .hTun button.z{ margin-top:0; padding:12px } body.e-h3 .hTun{ margin:20px 0 0 } body.e-h3 .hTun button{ width:100%; border:0; border-radius:999px; padding:16px; font:650 15px/1 var(--sans); background:var(--sig); color:#111606; cursor:pointer } body.e-h3 .hTun button.z{ background:transparent; color:var(--dim); border:1px solid var(--line2); font-weight:500; font-size:13px; padding:16px; margin-top:8px } body.e-h3 .hTun .zwei{ display:flex; gap:9px; margin-top:8px } body.e-h3 .hTun .zwei button{ flex:1; background:transparent; color:var(--dim); border:1px solid var(--line2); font-weight:500; font-size:12.5px; padding:16px } /* Wochenzeile */ body.e-h3 .hWoche{ display:flex; gap:2px; margin:24px 0 0 } body.e-h3 .hWoche div{ flex:1; text-align:center; padding:8px 0; border-radius:8px } body.e-h3 .hWoche b{ display:block; font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--faint); font-weight:400 } body.e-h3 .hWoche i{ display:block; width:4px; height:4px; border-radius:50%; margin:8px auto 0; background:#22252a } body.e-h3 .hWoche .plan i{ background:var(--dim) } body.e-h3 .hWoche .done i{ background:var(--sig) } body.e-h3 .hWoche .heute{ background:var(--panel) } body.e-h3 .hWoche .heute b{ color:var(--txt) } /* Silhouette. Die neuen Figuren tragen sil UND silx. silx setzt Form und Strichstaerke (mit !important, weil die Anwendung .sc.now .sil auf 6,5 hebt), die FARBE bleibt hier steuerbar. Der Kopf ist ein gefuellter Kreis und braucht eine eigene Regel NACH der fill:none-Regel — sonst gewinnt diese ueber die Spezifitaet und der Kopf bleibt hohl. */ body.e-h3 .hFig{ color:var(--sig) } body.e-h3 .hFig svg{ width:100%; height:100%; overflow:visible } body.e-h3 .hFig .sil{ stroke:currentColor; fill:none; stroke-width:4.2; stroke-linecap:round; stroke-linejoin:round } body.e-h3 .hFig .sil.kopfx{ fill:currentColor } body.e-h3 .hFig .bar-l, body.e-h3 .hFig .barx{ stroke:#31353c; stroke-width:1.9; opacity:1 } body.e-h3 .hFig.aus{ color:var(--dim) } /* Ring = ein Ziel. Die Form sagt jetzt zusaetzlich, worauf sie beruht. */ body.e-h3 .hRing{ flex:none; position:relative } body.e-h3 .hRing .n{ font-family:var(--mono); font-weight:500 !important } body.e-h3 .hRing.angegeben svg circle + circle{ stroke:var(--dim); opacity:.7 } body.e-h3 .hRing.angegeben .n{ color:var(--dim) } body.e-h3 .hOffen{ border-radius:50%; border:1.5px dashed var(--line2); flex:none; display:flex; align-items:center; justify-content:center; font-family:var(--mono); color:var(--faint) } /* Zielzeile */ body.e-h3 .hZ{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer } body.e-h3 .hZ:last-of-type{ border-bottom:0 } body.e-h3 .hZ .hFig{ width:64px; height:46px; flex:none } body.e-h3 .hZ .t{ flex:1; min-width:0 } body.e-h3 .hZ .t b{ display:block; font-family:var(--sans); font-size:15.5px; font-weight:600; letter-spacing:-.015em } body.e-h3 .hZ .t > span{ display:block; font-family:var(--sans); font-size:11.5px; color:var(--faint); margin-top:4px; letter-spacing:0 } /* §3 verlangt 5–10 % mehr visuelle Energie. Sie kommt hier nicht als Dekoration dazu, sondern an der einen Stelle, an der sie etwas sagt: das Fokusziel ist das Ziel, in das die meiste Trainingszeit fliesst. Ein sehr schwacher Grund und ein Randstrich machen das sichtbar, ohne dass eine zweite Farbe ins Spiel kommt. */ body.e-h3 .hZ.fokus{ position:relative; margin:0 -12px; padding-left:12px; padding-right:12px; border-radius:12px; background:linear-gradient(90deg, rgba(212,250,82,.055), transparent 62%) } body.e-h3 .hZ.fokus::before{ content:''; position:absolute; left:0; top:9px; bottom:9px; width:2px; border-radius:2px; background:var(--sig); opacity:.55 } body.e-h3 .hZ.fokus .t b::after{ content:attr(data-marke); font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--sig); border:1px solid var(--sigdim); background:var(--sigdim); border-radius:4px; padding:2px 4px; margin-left:8px; vertical-align:2px; font-weight:400 } /* Balken = eine Kapazitaet */ body.e-h3 .hBar{ height:4px; background:#171a1f; border-radius:2px; overflow:hidden } body.e-h3 .hBar i{ display:block; height:100%; background:var(--sig); border-radius:2px } body.e-h3 .hBar.vorlaeufig i{ background:#68793f } body.e-h3 .hBar.offen{ background:transparent; border:1px dashed var(--line2); height:6px; border-radius:3px; overflow:visible } body.e-h3 .hBar.offen i{ display:none } /* Belegmarken */ body.e-h3 .hMark{ font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); border:1px solid var(--line2); border-radius:4px; padding:4px 6px; white-space:nowrap } body.e-h3 .hMark.ent{ color:var(--ent); border-color:var(--entdim); background:var(--entdim) } body.e-h3 .hMark.sig{ color:var(--sig); border-color:var(--sigdim); background:var(--sigdim) } body.e-h3 .hMark.offen{ border-style:dashed } /* ── Nebenziel als eigene Karte ──────────────────────────────────────── §10 verlangt sichtbar, eigenständig, GRÖSSER. In H2 war das eine schmale Karte am Seitenende — auf dem Weg zurück zur Textzeile, gegen die sie in Runde 3 eingeführt wurde. H3 gibt ihr eine eigene Anatomie: Wert gross und rechts, Name und Grund links, Balken über die volle Breite, Marken unten. Dieselbe Ordnung wie eine Zielzeile, nur ohne Silhouette — Nebenziele sind Kapazitäten, keine Skills, und dürfen deshalb keine Figur bekommen. Genau das ist ihre Eigenständigkeit. */ body.e-h3 .hNz{ position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:16px 18px; margin-bottom:12px; cursor:pointer; overflow:hidden } body.e-h3 .hNz::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--sig); opacity:.5 } body.e-h3 .hNz.leer::before{ background:var(--line2); opacity:1 } body.e-h3 .hNz .kopf{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px } body.e-h3 .hNz .kopf b{ font-family:var(--sans); font-size:16.5px; font-weight:650; letter-spacing:-.02em; line-height:1.25; display:block } /* Die Zahl bleibt klein, und das ist eine bewusste Rücknahme. Der erste H3-Entwurf hat sie auf 29 px gesetzt — eine Displayzahl. Die Gegenprüfung hat dagegen eine Vorgabe im Datenmodell selbst gefunden: CAPS.skalen_hinweis sagt, die 0–100-Skala sei „eine interne Ordnungsgroesse, KEINE physiologische Messung" und werde „nie als Praezisionswert praesentiert. Angezeigt werden Stufenbaender und Trend, nicht die Zahl." Die Anwendung zeigt die Zahl trotzdem, seit vor Phase 5 — H3 hätte den Widerspruch nur lauter gemacht. Das Gewicht liegt deshalb auf dem BALKEN, der einem Stufenband am nächsten kommt; die Zahl steht daneben als Nebenangabe. Ob die Zahl ganz verschwindet, ist eine Entscheidung des Product Owners und steht im Bericht. */ body.e-h3 .hNz .kopf i{ font-style:normal; font-family:var(--mono); font-size:17px; color:var(--dim); font-variant-numeric:tabular-nums; line-height:1.2; letter-spacing:-.02em; flex:none } body.e-h3 .hNz.leer .kopf i{ color:var(--faint); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding-top:6px } body.e-h3 .hNz .warum{ font-size:12.5px; line-height:1.55; color:var(--dim); margin-top:8px; max-width:34ch } body.e-h3 .hNz .hBar{ margin:16px 0 0; height:6px; border-radius:3px } body.e-h3 .hNz .fuss{ display:flex; align-items:center; gap:7px; margin-top:12px; flex-wrap:wrap } body.e-h3 .hNz.eng{ padding:12px 16px; margin-bottom:8px; border-radius:12px } body.e-h3 .hNz.eng .kopf b{ font-size:14.5px } body.e-h3 .hNz.eng .kopf i{ font-size:15px } body.e-h3 .hNz.eng.leer .kopf i{ font-size:10px; padding-top:4px } body.e-h3 .hNz.eng .hBar{ margin:12px 0 0 } /* Momentum kompakt */ body.e-h3 .hMom{ display:flex; align-items:flex-end; gap:14px; margin:20px 0 0 } body.e-h3 .hMomB{ display:flex; align-items:flex-end; gap:3px; height:22px; flex:none } body.e-h3 .hMomB span{ display:block; width:7px; background:#1c2027; border-radius:2px } body.e-h3 .hMomB span.v{ background:var(--ent); opacity:.55 } body.e-h3 .hMomB span.jetzt{ background:var(--ent); opacity:1 } body.e-h3 .hMomT{ flex:1; min-width:0; font-family:var(--mono); font-size:10px; color:var(--faint); line-height:1.55; letter-spacing:.04em } body.e-h3 .hMomT b{ color:var(--ent); font-weight:500 } /* Einheitszeile */ body.e-h3 .hE{ padding:16px 0; border-bottom:1px solid var(--line); cursor:pointer } body.e-h3 .hE .z1{ display:flex; align-items:center; gap:13px } body.e-h3 .hE .hFig{ width:56px; height:40px; flex:none } body.e-h3 .hE .t{ flex:1; min-width:0 } body.e-h3 .hE .t b{ display:block; font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } body.e-h3 .hE .t > span{ display:block; font-family:var(--sans); font-size:11.5px; color:var(--faint); margin-top:4px; letter-spacing:0 } body.e-h3 .hE .pf{ color:var(--line2); flex:none } body.e-h3 .hKomp{ display:flex; height:4px; border-radius:2px; overflow:hidden; margin:12px 0 0 68px; background:#141821 } body.e-h3 .hHead .hKomp{ margin:16px 0 0 } body.e-h3 .hKomp i{ display:block; height:100% } body.e-h3 .hKern{ display:flex; gap:5px; margin:8px 0 0 68px; flex-wrap:wrap } body.e-h3 .hKern span{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:var(--dim); background:var(--panel); border:1px solid var(--line); border-radius:4px; padding:4px 8px } body.e-h3 .hE.heute{ position:relative; margin:0 -12px; padding-left:12px; padding-right:12px; border-radius:12px; background:linear-gradient(90deg, rgba(212,250,82,.05), transparent 62%) } body.e-h3 .hE.heute::before{ content:''; position:absolute; left:0; top:11px; bottom:11px; width:2px; border-radius:2px; background:var(--sig); opacity:.55 } body.e-h3 .hE.frei{ cursor:default } body.e-h3 .hE.frei .t b{ color:var(--faint); font-weight:400 } body.e-h3 .hE [data-add]{ background:none !important; border:0 !important; padding:4px 0 !important; color:var(--faint); font-family:var(--sans); font-size:12px; letter-spacing:0; text-transform:none; font-weight:500 } /* Einheitenblatt: die zweite Ebene */ body.e-h3 .hBlKopf{ display:flex; align-items:center; gap:12px; margin:0 0 16px } body.e-h3 .hBlKopf .hFig{ width:66px; height:46px; flex:none; color:var(--sig) } body.e-h3 .hBlKopf .t b{ display:block; font-size:18px; font-weight:700; letter-spacing:-.025em } body.e-h3 .hBlKopf .t span{ display:block; font-size:11.5px; color:var(--faint); margin-top:4px } body.e-h3 .hBlock{ border-top:1px solid var(--line); padding:12px 0 4px } body.e-h3 .hBlock .bk{ display:flex; align-items:baseline; justify-content:space-between; gap:10px } body.e-h3 .hBlock .bk b{ font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--sig); font-weight:500 } body.e-h3 .hBlock .bk i{ font-style:normal; font-family:var(--mono); font-size:9.5px; color:var(--faint) } body.e-h3 .hBlock .zw{ font-size:12px; line-height:1.5; color:var(--faint); margin:4px 0 8px } body.e-h3 .hU{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:6px 0 } body.e-h3 .hU .un{ font-size:13.5px; color:var(--txt); line-height:1.4; min-width:0 } body.e-h3 .hU .un em{ display:block; font-style:normal; font-size:11.5px; color:var(--faint); line-height:1.4; margin-top:4px } body.e-h3 .hU .uv{ font-family:var(--mono); font-size:11.5px; color:var(--dim); flex:none; font-variant-numeric:tabular-nums; text-align:right; letter-spacing:.03em } body.e-h3 .hLegende{ border-top:1px solid var(--line); margin:16px 0 0; padding:12px 0 0 } body.e-h3 .hLegende p{ margin:0 0 8px; font-size:11.5px; line-height:1.5; color:var(--faint) } body.e-h3 .hLegende p:last-child{ margin-bottom:0 } body.e-h3 .hLegende b{ color:var(--dim); font-weight:600 } body.e-h3 .hBlattFuss{ display:flex; gap:9px; margin:20px 0 0 } body.e-h3 .hBlattFuss button{ flex:1; border-radius:999px; padding:16px; cursor:pointer; font:650 14px/1 var(--sans); border:0; background:var(--sig); color:#111606 } body.e-h3 .hBlattFuss button.z{ background:transparent; color:var(--dim); border:1px solid var(--line2); font-weight:500 } /* Fortschritt: Zielkarte */ body.e-h3 .hZiel{ border-top:1px solid var(--line); padding:24px 0 6px } body.e-h3 .hZielKopf{ display:flex; align-items:center; gap:14px; margin-bottom:16px; cursor:pointer } body.e-h3 .hZielKopf .hFig{ width:84px; height:58px; flex:none } body.e-h3 .hZielKopf .t{ flex:1; min-width:0 } body.e-h3 .hZielKopf .t b{ display:block; font-size:19px; font-weight:650; letter-spacing:-.025em } body.e-h3 .hZielKopf .t span{ display:block; font-size:11.5px; color:var(--faint); margin-top:4px } body.e-h3 .hZiel .note{ background:transparent; border:0; border-left:2px solid var(--line2); border-radius:0; padding:2px 0 2px 12px; margin:12px 0 0; font-size:13px; line-height:1.62; color:var(--dim) } body.e-h3 .hZiel .note b{ color:var(--txt) } /* Archiv */ body.e-h3 .hZurueck{ display:inline-flex; align-items:center; gap:7px; background:none; border:0; color:var(--dim); font:500 12.5px/1 var(--sans); cursor:pointer; padding:8px 0; margin-top:8px } body.e-h3 .hZurueck::before{ content:''; width:7px; height:7px; border-left:1.6px solid var(--dim); border-bottom:1.6px solid var(--dim); transform:rotate(45deg) } body.e-h3 .hMonNav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:16px 0 0 } body.e-h3 .hMonNav b{ font-size:16px; font-weight:650; letter-spacing:-.02em } body.e-h3 .hMonNav button{ background:var(--panel); border:1px solid var(--line); border-radius:8px; width:40px; height:40px; color:var(--dim); cursor:pointer; font-size:15px; line-height:1 } body.e-h3 .hMonNav button:disabled{ opacity:.3; cursor:default } body.e-h3 .hKal{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:16px 0 0 } body.e-h3 .hKal .wd{ text-align:center; font-family:var(--mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-bottom:4px; background:transparent !important; border:0 !important } body.e-h3 .hKal .tg{ aspect-ratio:1; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:var(--panel); border:1px solid transparent; font-family:var(--mono); font-size:11px; color:var(--faint) } body.e-h3 .hKal .tg.aus{ background:transparent; color:#2c3037 } body.e-h3 .hKal .tg.hat{ background:var(--sigdim); border-color:rgba(212,250,82,.34); color:var(--sig); cursor:pointer } body.e-h3 .hKal .tg.heute{ border-color:var(--line2); color:var(--txt) } body.e-h3 .hKal .tg em{ display:flex; gap:2px; height:4px } body.e-h3 .hKal .tg em i{ display:block; width:4px; height:4px; border-radius:50%; background:var(--sig) } body.e-h3 .hKal .tg em i.eing{ background:var(--ent) } body.e-h3 .hMonSum{ font-family:var(--mono); font-size:10px; letter-spacing:.05em; color:var(--faint); margin:16px 0 0; text-align:center } /* Athlet */ body.e-h3 .hSatz{ font-size:13.5px; line-height:1.66; color:var(--dim); margin:16px 0 0; border-left:2px solid var(--sigdim); padding-left:12px } body.e-h3 .hSatz b{ color:var(--txt); font-weight:600 } /* ── Dein Weg: die Progression als Folge von Haltungen ───────────────── Die Silhouetten stehen hier in ihrer stärksten Verwendung. Auf Heute zeigt eine Figur ein Ziel, hier zeigen fünf einen Weg — dieselbe Bildsprache, eine andere Aussage. Die erreichten Stufen bleiben sichtbar, statt zu verschwinden: was hinter einem liegt, gehört zur Beschreibung dessen, der man ist. */ body.e-h3 .hWeg{ display:flex; align-items:flex-end; gap:6px; margin:4px -2px 0 } body.e-h3 .hWeg .wst{ flex:1; min-width:0; border-radius:12px; padding:8px 2px; border:1px solid transparent } body.e-h3 .hWeg .wst .hFig{ width:100%; height:38px; color:#3a4049 } body.e-h3 .hWeg .wst.hinter .hFig{ color:#5d6a3a } body.e-h3 .hWeg .wst.jetzt{ background:var(--panel); border-color:rgba(212,250,82,.3) } body.e-h3 .hWeg .wst.jetzt .hFig{ height:52px; color:var(--sig) } body.e-h3 .hBremse{ margin:20px 0 0; padding:16px; border-radius:16px; background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--ent) } body.e-h3 .hBremse .hK{ color:var(--ent) } body.e-h3 .hBremse b{ display:block; font-size:15.5px; font-weight:650; letter-spacing:-.015em; margin:8px 0 4px } body.e-h3 .hBremse p{ margin:8px 0 0; font-size:12.5px; line-height:1.6; color:var(--dim) } body.e-h3 .hZaehl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); flex:none } body.e-h3 .hIdent{ display:flex; gap:10px; justify-content:center; margin:24px 0 0 } body.e-h3 .hIdent > div{ flex:1; max-width:106px; text-align:center; cursor:pointer } body.e-h3 .hIdent .hFig{ width:100%; height:54px } body.e-h3 .hIdent .hRing, body.e-h3 .hIdent .hOffen{ margin:8px auto 0 } body.e-h3 .hIdent u{ display:block; text-decoration:none; font-family:var(--sans); font-size:10.5px; line-height:1.35; color:var(--faint); margin-top:8px } body.e-h3 .hFakten{ display:flex; flex-wrap:wrap; gap:7px; margin:20px 0 0 } /* Phase 6, Block 5: „Dein Profil" — je Thema der Angaben eine Zeile. Maße aus der Fähigkeitszeile (.hKap): Name 14/600 links, Wert 12 in --dim rechts, Haarlinie darunter. Dazu ein Chevron, weil die Zeile woanders hinführt. Der Wert bleibt einzeilig und kürzt am Ende — die Zeile ist ein Wegweiser, die Übersicht der Angaben zeigt alles. Höhe 14 + 18 + 14 ≈ 46, also über der Trefferfläche von 44. */ body.e-h3 .hProfilKopf{ margin:-4px 0 4px } body.e-h3 .hProfil{ display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--line); cursor:pointer } body.e-h3 .hProfil b{ font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:-.01em; flex:none } body.e-h3 .hProfil i{ font-style:normal; font-family:var(--sans); font-size:12px; color:var(--dim); flex:1; min-width:0; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } body.e-h3 .hProfil::after{ content:''; flex:none; width:6px; height:6px; margin:0 2px 0 0; border-right:1.5px solid var(--faint); border-top:1.5px solid var(--faint); transform:rotate(45deg) } /* Block 18: der Eingang zur Bibliothek. Sieht aus wie eine Profilzeile und ist KEINE — der erste Bau borgte sich `.hProfil`, und ein Fall, der „je Thema eine Zeile" prüft, wurde darauf rot. Er hatte recht: dieselbe Klasse heisst dieselbe Sache. Eigene Klasse, gleiche Zeichnung, oben eine Linie statt unten, weil darüber kein Abschnittskopf steht. */ body.e-h3 .hBibZ{ display:flex; align-items:center; gap:12px; padding:14px 0; border-top:1px solid var(--line); cursor:pointer } body.e-h3 .hBibZ b{ font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:-.01em; flex:none } body.e-h3 .hBibZ i{ font-style:normal; font-family:var(--sans); font-size:12px; color:var(--dim); flex:1; min-width:0; text-align:right; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } /* Block 19: die Kamera unten auf TRAINING. Eine Karte, kein Reiter und keine Zeile — sie ist ein Werkzeug neben der Woche, nicht Teil von ihr. */ body.e-h3 .hKam{ display:flex; align-items:center; gap:14px; padding:16px 16px; background:var(--panel); border:1px solid var(--line); border-radius:14px; cursor:pointer } body.e-h3 .hKam.aus{ border-style:dashed } body.e-h3 .hKamT{ flex:1; min-width:0 } body.e-h3 .hKamT b{ display:block; font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:-.01em } body.e-h3 .hKamT span{ display:block; font-family:var(--sans); font-size:12px; line-height:1.5; color:var(--dim); margin-top:4px } body.e-h3 .hKamI{ flex:none; width:34px; height:26px; color:var(--sig) } body.e-h3 .hKam.aus .hKamI{ color:var(--faint) } body.e-h3 .hKamI svg{ width:100%; height:100%; display:block } body.e-h3 .hFakten span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; color:var(--dim); background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:8px 12px } body.e-h3 .hFakten span b{ color:var(--txt); font-weight:500 } body.e-h3 .hKap{ padding:12px 0; border-bottom:1px solid var(--line); cursor:pointer } body.e-h3 .hKap .k{ display:flex; justify-content:space-between; align-items:baseline; gap:10px } body.e-h3 .hKap .k b{ font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:-.01em } /* Arbeitsblock E: rechts steht kein Zahlenwert mehr, sondern der Name der Stufe („auf Höhe von Klimmzug"). Deshalb Fließsatz statt Mono-Ziffer — und rechtsbündig umbrechend, weil Übungsnamen lang werden. */ body.e-h3 .hKap .k i{ font-style:normal; font-family:var(--sans); font-size:12px; color:var(--dim); text-align:right; flex:none; max-width:58%; line-height:1.35 } body.e-h3 .hKap.leer .k i{ color:var(--faint); font-family:var(--mono); font-size:11px; letter-spacing:.06em } body.e-h3 .hKap .hBar{ margin:12px 0 0 } body.e-h3 .hKap .m{ font-family:var(--mono); font-size:9.5px; color:var(--faint); margin-top:8px } /* ── Bewegung ────────────────────────────────────────────────────────── §19 lässt Bewegung offen und nennt die Grenze: sie soll unterstützen, nicht beeindrucken. Der Befund aus H2 war, dass starke Einblendeffekte die Wahrnehmung verschlechtern. H3 bewegt deshalb NUR Dinge, die eine Grösse darstellen — Ringe, Balken, Momentum wachsen auf ihren Wert. Nichts blendet ein, nichts verschiebt sich, kein Text bewegt sich. Der Ring bekommt zusätzlich, was ihm in H2 fehlte: einen Anlauf, der zeigt, dass die Zahl aus einer Messung kommt und nicht dasteht. Alles hier hängt an prefers-reduced-motion. Wer das gesetzt hat, sieht denselben Bildschirm sofort im Endzustand — nicht eine langsamere Fassung, sondern gar keine Bewegung. */ @media (prefers-reduced-motion: no-preference) { body.e-h3 .hBar i{ transform-origin:left center; animation:h3wachs .62s cubic-bezier(.22,.9,.24,1) both } body.e-h3 .hMomB span{ transform-origin:bottom center; animation:h3steigt .5s cubic-bezier(.22,.9,.24,1) both } body.e-h3 .hMomB span:nth-child(2){ animation-delay:.05s } body.e-h3 .hMomB span:nth-child(3){ animation-delay:.1s } body.e-h3 .hMomB span:nth-child(4){ animation-delay:.15s } body.e-h3 .hMomB span:nth-child(5){ animation-delay:.2s } body.e-h3 .hMomB span:nth-child(6){ animation-delay:.25s } body.e-h3 .hRing circle + circle{ transition:stroke-dashoffset .72s cubic-bezier(.22,.9,.24,1) } body.e-h3 .hKomp i{ transform-origin:left center; animation:h3wachs .5s cubic-bezier(.22,.9,.24,1) both } /* Das Blatt fährt ein, statt zu erscheinen — es kommt von unten, und genau von dort kommt auch die Geste, die es öffnet. */ body.e-h3 .ov.on .sheet{ animation:h3blatt .26s cubic-bezier(.22,.9,.24,1) both } } @keyframes h3wachs{ from{ transform:scaleX(0) } } @keyframes h3steigt{ from{ transform:scaleY(0) } } @keyframes h3blatt{ from{ transform:translateY(20px) } } body.e-h3 .hErsetzt{ display:none } body.e-h3 #view > .lbl{ font-family:var(--sans); font-size:17px; font-weight:650; letter-spacing:-.02em; text-transform:none; color:var(--txt); margin:32px 0 12px } body.e-h3 .card .lbl{ font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--faint); font-weight:400 }