/* ═══════════════════════════════════════════════════
iOS 26 LIQUID GLASS — FitTrack
═══════════════════════════════════════════════════ */
/* ── DESIGN TOKENS (Radius · Spacing · Motion · Glas) ── */
:root{
--r-sm:12px; --r-md:16px; --r-lg:28px; --r-xl:34px;
--sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
/* Harte Obergrenze für Bottom-Sheets/Modals: nie in Statusbar/Dynamic Island
ragen. dvh = sichtbarer Viewport; safe-area-top = Notch/Island-Zone. */
--sheet-cap:calc(100dvh - env(safe-area-inset-top, 0px) - 12px);
--ease:cubic-bezier(.22,1,.36,1);
--spring:cubic-bezier(.34,1.56,.64,1);
/* Zentrale Glas-Blur-Stufen — appweit konsistent.
sm = kleine Chips/Inputs · md = Karten · lg = Header/Sheets/Floating */
--gl-blur-sm:26px; --gl-blur:44px; --gl-blur-lg:66px;
--gl-sat:180%;
/* ── ZENTRALE NEON-STAFFEL ──────────────────────────────────────────────
Jede leuchtende Anzeige der App benutzt DIESELBEN drei Radien: ein enger
heller Saum, ein mittlerer Hof, ein weiter schwacher Schimmer. Vorher hatte
jedes Widget eigene Werte (6/13, 4, 10/18, 5/13/26 …) — nebeneinander sah
das aus, als leuchteten sie unterschiedlich stark, obwohl sie dasselbe
meinten.
Die Staffel entspricht dem SVG-Filter der Ringe (stdDeviation 1.6/4/9; ein
Gauss-Radius ist etwa das Doppelte der Standardabweichung), damit Ringe und
Balken nebeneinander gleich hell wirken.
--gw-* = Radien, --gwa-* = die zugehoerigen Deckkraften. Die FARBE bleibt
bei jeder Anzeige ihre eigene; vereinheitlicht ist die Geometrie. */
/* --neon = EIN Dimmer fuer jeden Schein der App. 1 = der alte, volle Stand.
Er sitzt hier, weil das Leuchten sonst an zwanzig Stellen einzeln geregelt
werden muesste und die Anzeigen dann wieder unterschiedlich hell wirken.
Gedimmt wird ueber die DECKKRAFT, nicht ueber die Radien: ein enger
gezogener Schein sieht aus wie ein anderer Effekt, ein schwaecherer wie
dasselbe Licht weiter weg. Die Geometrie bleibt also ueberall dieselbe.
Wer es heller will, dreht nur diese eine Zahl hoch. */
--neon:.6;
/* Das Neon-Gruen der Zuwachs-Anzeigen. Als RGB-Tripel, damit derselbe Ton
in rgb() und in rgba(...,var(--gwa-*)) steht — sonst driften Kern und
Schein auseinander. */
--kg-rgb:65,216,105;
--gw-1:4px; --gw-2:10px; --gw-3:20px;
--gwa-1:calc(.95 * var(--neon)); --gwa-2:calc(.7 * var(--neon));
--gwa-3:calc(.42 * var(--neon));
/* ── NEON AUF HELLEM GRUND ───────────────────────────────────────────────
Ein Schein ist Licht, das zum Untergrund DAZUKOMMT. Auf Schwarz ist das
sichtbar, auf einer hellen Flaeche nicht: dort ist schon alles hell, der
Hof kann nur noch trueben. Genau das war in Weiss/Rosa/Blau/Gruen zu
sehen — ein farbiger Schleier um die Anzeige statt Licht, und der Kern
dazu blass, weil dieselbe Farbe, die auf Schwarz strahlt, auf Weiss kaum
noch Kontrast hat.
Auf hellem Grund liest sich dasselbe Signal deshalb anders: der Kern wird
SATTER und dunkler (er traegt den Kontrast), der Hof wird schwaecher und
ebenfalls dunkler (er liest sich dann als farbiger Schatten, nicht als
Dunst), und dazu kommt eine feine Kontaktkante, damit das Element auf der
Flaeche aufliegt statt auszufransen.
Die GEOMETRIE bleibt in allen Themes dieselbe (--gw-*) — nur Helligkeit,
Deckkraft und die Kante sind Theme-Sache. Wer neu leuchtet, nimmt diese
Tokens statt eigener Zahlen. */
--ng-core:58%; /* Kernhelligkeit leuchtender Punkte/Striche */
--ng-1:58%; --ng-2:50%; --ng-3:48%; /* Helligkeit der drei Schein-Ebenen */
--ng-hi:.5; --ng-lo:.45; /* Innenlichter, die aus der Flaeche eine Roehre machen */
/* Die Helligkeiten der Wochenziel-Ringe (_neonRamp baut daraus den Bogen).
Als Zahlen ohne Einheit, weil das JS sie in hsl() einsetzt. Auf Dunkel darf
der Bogen fast ausgluehen, auf Hell muss er dunkler bleiben als die Karte,
auf der er liegt — sonst ist der Ring da, wo er voll ist, unsichtbar. */
--nr-c1:60; --nr-c2:72; /* scharfer Bogen: Anfang → Ende */
--nr-g1:55; --nr-g2:65; /* Hof und Wolke darunter */
--neon-edge:0 0 0 rgba(0,0,0,0); /* Kontaktkante — nur auf hellem Grund noetig */
--sig-ring:0; /* Umriss der Signal-Fuellungen — nur auf hellem Grund */
/* Die MULDEN: leere Zellen, Ringspuren, Tageskapseln — der Grund, auf dem
das Licht sitzt. Sie standen bisher als feste Weisswerte im CSS, weil sie
beim Neon-Umbau fuer den dunklen Grund gebaut wurden. Auf Weiss ist Weiss
auf Weiss nichts: die Skala verschwand und uebrig blieben ein paar
leuchtende Punkte ohne erkennbaren Rahmen — genau der Eindruck, dass die
Anzeige "nicht reinpasst". Hell gedreht wird daraus eine dunkle Mulde. */
--ng-well:rgba(255,255,255,.055); /* leere Zelle / Spur */
--ng-well-bdr:rgba(255,255,255,.045);
--ng-well-on:rgba(255,255,255,.115); /* hervorgehobene Mulde (heutige Kapsel) */
--ng-well-on-bdr:rgba(255,255,255,.16);
--ng-well-off:rgba(255,255,255,.028); /* zurueckgenommene Mulde (kommende Tage) */
--ng-well-off-bdr:rgba(255,255,255,.03);
--ng-outline:rgba(255,255,255,.10); /* blosser Umriss ohne Fuellung */
/* Die vier Stufen der Wochenpunkte. Auf Dunkel reicht wenig Deckkraft, damit
der Punkt noch als Stufe lesbar ist; auf Weiss traegt dieselbe Deckkraft
die weisse Zahl darin nicht mehr. */
--ng-step-1:.42; --ng-step-2:.62; --ng-step-3:.82;
/* Die Abstufung fuer schwaechere Zustaende (etwa die vier Stufen der
Wochenpunkte) laeuft ueber WENIGER LAGEN derselben Staffel, nicht ueber
eigene Werte: Stufe 1 nur der enge Saum, Stufe 4 alle drei. So bleibt die
Geometrie ueberall dieselbe und trotzdem ist die Menge ablesbar. */
}
/* ── THEMES ── */
[data-theme="light"] {
--acc:#007AFF; --acc2:#5AC8FA; --acc-rgb:0,122,255;
--text:#1d1d1f; --text2:rgba(60,60,67,.60);
/* Signalfarben in iOS-Dark-Helligkeit taugen als TEXT auf Weiss nicht: das
"↗ 0 %" der Volumen-Kachel stand bei 1,78:1. Dieselben Farbtoene, nur
dunkler — als Fuellung unter weisser Schrift werden sie dadurch ebenfalls
besser, deshalb ein Wert fuer beide Rollen. Blau macht das mit #00875A
laengst vor, dort war die Zahl als einzige lesbar. */
--green:#0E8C3F; --orange:#B26A00; --red:#D93025;
--soft:rgba(0,122,255,.10);
--bg:#f2f2f6; --card:#ffffff; --seg-on:#ffffff;
/* Wie Dark-Referenz, hell gespiegelt: monochromer Grund + weiches Diagonalband */
/* Vorlage (hell): ein neutraler, leicht kuehler Grund — KEIN Weiss — und
darauf zwei grosse, sehr weich auslaufende Kugeln, eine blaugrau, eine
rose. Sie sind der Grund, warum das Glas ueberhaupt als Glas lesbar ist:
eine Platte vor einer gleichmaessigen Flaeche zeigt nichts, sie braucht
etwas zum Brechen. Deshalb sitzen sie gross und ausserhalb der Mitte. */
--mesh:
radial-gradient(58% 42% at 14% 8%,rgba(126,142,166,.55) 0%,rgba(126,142,166,.18) 45%,transparent 72%),
radial-gradient(52% 40% at 92% 46%,rgba(206,182,182,.52) 0%,rgba(206,182,182,.16) 46%,transparent 72%),
radial-gradient(46% 34% at 26% 96%,rgba(150,160,178,.38) 0%,transparent 66%),
linear-gradient(168deg,#dcdee3 0%,#d2d5db 46%,#c8cbd2 100%);
/* Halbtransparente Glasflächen (echter Blur wirkt) */
/* Vorlage: die Platte ist FAST leer. Was sie sichtbar macht, ist der Rand —
oben und links ein heller Lichtstreif, sonst nichts. Der Schlagschatten
faellt fast weg: eine Glasscheibe liegt AUF dem Bild, sie schwebt nicht
darueber. */
--gl-bg:linear-gradient(158deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.16) 62%,rgba(255,255,255,.22) 100%);
--gl-bg-h:linear-gradient(158deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.24) 100%);
--gl-bg-t:rgba(255,255,255,.18);
--gl-bdr:rgba(255,255,255,.55); --gl-bdr2:rgba(255,255,255,.22);
--gl-shad:0 1px 2px rgba(40,44,56,.05),0 18px 40px rgba(40,44,56,.10);
--gl-shad-lg:0 2px 6px rgba(40,44,56,.06),0 34px 76px rgba(40,44,56,.16);
--gl-hi:inset 0 1px 0 rgba(255,255,255,.85),inset 1px 0 0 rgba(255,255,255,.45),
inset 0 -1px 0 rgba(255,255,255,.12);
--sheen:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.03) 60%,transparent 100%);
--sep:rgba(60,60,67,.10);
--inp-bg:rgba(255,255,255,.30); --inp-focus:rgba(255,255,255,.52);
--g5:rgba(120,120,128,.10); --g6:rgba(255,255,255,.60);
/* Dunkle Fassung des Akzents. Auf hellem Grund traegt WEISS kein Licht mehr —
Wellenkaemme, Aurora-Gegenlicht, Kanten und Beschriftungen auf getoenten
Flaechen holen sich ihren Kontrast hier. Dark braucht sie nicht, dort
bleibt Weiss das Licht. */
--acc-ink:0,52,120;
}
[data-theme="rosa"] {
--acc:#E91E8C; --acc2:#F48FB1; --acc-rgb:233,30,140;
--text:#1d1d1f; --text2:rgba(60,60,67,.60);
--green:#128A48; --orange:#B26A00; --red:#D32F2F;
--soft:rgba(233,30,140,.09);
--bg:#f4e7ef; --card:#ffffff; --seg-on:#ffffff;
--mesh:
radial-gradient(58% 42% at 14% 8%,rgba(150,130,145,.50) 0%,rgba(150,130,145,.16) 45%,transparent 72%),
radial-gradient(52% 40% at 92% 46%,rgba(228,168,203,.58) 0%,rgba(228,168,203,.18) 46%,transparent 72%),
radial-gradient(46% 34% at 26% 96%,rgba(190,150,175,.36) 0%,transparent 66%),
linear-gradient(168deg,#e4dbe0 0%,#dcd0d8 46%,#d3c5ce 100%);
--gl-bg:linear-gradient(158deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.16) 62%,rgba(255,255,255,.22) 100%);
--gl-bg-h:linear-gradient(158deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.24) 100%);
--gl-bg-t:rgba(255,255,255,.18);
--gl-bdr:rgba(255,255,255,.60); --gl-bdr2:rgba(200,30,100,.05);
--gl-shad:0 2px 8px rgba(120,20,70,.06),0 14px 34px rgba(120,20,70,.10);
--gl-shad-lg:0 6px 18px rgba(120,20,70,.10),0 26px 60px rgba(120,20,70,.15);
--gl-hi:inset 0 1px 0 rgba(255,255,255,.85),inset 1px 0 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.12);
--sheen:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.03) 60%,transparent 100%);
--sep:rgba(90,50,70,.10);
--inp-bg:rgba(255,255,255,.30); --inp-focus:rgba(255,255,255,.52);
--g5:rgba(150,110,130,.10); --g6:rgba(255,255,255,.60);
--acc-ink:112,8,64;
}
[data-theme="dark"] {
--acc:#0A84FF; --acc2:#64D2FF; --acc-rgb:10,132,255;
--text:#f5f5f7; --text2:rgba(235,235,245,.62);
--green:#30D158; --orange:#FF9F0A; --red:#FF453A;
--soft:rgba(10,132,255,.18);
--bg:#020203; --card:#17171b; --seg-on:rgba(255,255,255,.22);
/* Tiefes, aber lebendiges Dunkel — große, kühle Lichtinseln geben dem Blur
etwas zum Brechen. So wirkt Glas wie Glas, nicht wie ein schwarzer Kasten. */
/* Hintergrund wie ein dunkles, dynamisches Apple-Wallpaper: tiefe Basis mit
mehreren satten Lichtpools + Streiflicht — DARAN bricht & spiegelt das Glas.
Ohne farbigen, kontrastreichen Grund wirkt near-transparentes Glas grau. */
/* Hintergrund wie das macOS-Batterie-Widget: SCHWARZ, monochrom — nur große,
weiche graue Diagonalformen als Licht. Keine bunten Pools. */
/* Vorlage (dunkel): fast schwarz, und darin ein paar sehr dunkle Koerper,
die man eher ahnt als sieht. Genau daran bricht das Glas — ohne sie ist
eine dunkle Scheibe vor schwarzem Grund unsichtbar. Kein Farbton, nur
Helligkeit: die Vorlage ist monochrom. */
--mesh:
radial-gradient(42% 30% at 82% 12%,rgba(255,255,255,.10) 0%,rgba(255,255,255,.03) 44%,transparent 70%),
radial-gradient(38% 28% at 10% 40%,rgba(255,255,255,.07) 0%,transparent 68%),
radial-gradient(50% 34% at 62% 92%,rgba(255,255,255,.05) 0%,transparent 70%),
linear-gradient(172deg,#0a0b0e 0%,#050609 52%,#000000 100%);
/* Rauchglas wie im Referenz-Widget: Innenfläche fast unsichtbar dunkel,
KEIN weißer Schleier innen — alles Licht sitzt an der KANTE (Rim + Top-Edge). */
--gl-bg:linear-gradient(158deg,rgba(255,255,255,.075) 0%,rgba(255,255,255,.022) 60%,rgba(255,255,255,.045) 100%);
--gl-bg-h:linear-gradient(158deg,rgba(255,255,255,.11) 0%,rgba(255,255,255,.04) 100%);
--gl-bg-t:rgba(255,255,255,.045);
--gl-bdr:rgba(255,255,255,.11); --gl-bdr2:rgba(255,255,255,.05);
--gl-shad:0 10px 30px rgba(0,0,0,.42),0 34px 80px rgba(0,0,0,.60);
--gl-shad-lg:0 16px 44px rgba(0,0,0,.50),0 56px 120px rgba(0,0,0,.68);
/* Rim: oben UND links hell, unten ein Hauch — in der Vorlage sitzt das ganze
Licht auf zwei Kanten, nicht rundherum. */
--gl-hi:inset 0 1px 0 rgba(255,255,255,.34),inset 1px 0 0 rgba(255,255,255,.14),
inset 0 -1px 0 rgba(255,255,255,.05);
--sheen:linear-gradient(180deg,rgba(255,255,255,.045) 0%,transparent 52%);
--gl-blur:50px; --gl-blur-lg:82px; --gl-sat:205%;
--sep:rgba(255,255,255,.08);
--inp-bg:rgba(255,255,255,.06); --inp-focus:rgba(255,255,255,.12);
--g5:rgba(255,255,255,.07); --g6:rgba(255,255,255,.05);
}
[data-theme="blau"] {
--acc:#0055CC; --acc2:#4D9FFF; --acc-rgb:0,85,204;
--text:#12203a; --text2:rgba(30,45,75,.60);
--green:#00875A; --orange:#E68900; --red:#D93025;
--soft:rgba(0,85,204,.09);
--bg:#e4eef8; --card:#ffffff; --seg-on:#ffffff;
--mesh:
radial-gradient(58% 42% at 14% 8%,rgba(110,140,180,.55) 0%,rgba(110,140,180,.18) 45%,transparent 72%),
radial-gradient(52% 40% at 92% 46%,rgba(180,205,240,.55) 0%,rgba(180,205,240,.17) 46%,transparent 72%),
radial-gradient(46% 34% at 26% 96%,rgba(130,160,200,.38) 0%,transparent 66%),
linear-gradient(168deg,#d7dde6 0%,#ced5e0 46%,#c4ccd8 100%);
--gl-bg:linear-gradient(158deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.16) 62%,rgba(255,255,255,.22) 100%);
--gl-bg-h:linear-gradient(158deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.24) 100%);
--gl-bg-t:rgba(255,255,255,.18);
--gl-bdr:rgba(255,255,255,.62); --gl-bdr2:rgba(0,60,180,.05);
--gl-shad:0 2px 8px rgba(0,40,120,.06),0 14px 34px rgba(0,40,120,.10);
--gl-shad-lg:0 6px 18px rgba(0,40,120,.10),0 26px 60px rgba(0,40,120,.15);
--gl-hi:inset 0 1px 0 rgba(255,255,255,.85),inset 1px 0 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.12);
--sheen:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.03) 60%,transparent 100%);
--sep:rgba(30,60,110,.10);
--inp-bg:rgba(255,255,255,.30); --inp-focus:rgba(255,255,255,.52);
--g5:rgba(100,130,170,.10); --g6:rgba(255,255,255,.60);
--acc-ink:0,36,98;
}
[data-theme="grün"] {
--acc:#28A745; --acc2:#48D368; --acc-rgb:40,167,69;
--text:#14241a; --text2:rgba(35,60,45,.62);
--green:#1DB954; --orange:#E68900; --red:#D93025;
--soft:rgba(40,167,69,.09);
--bg:#e6f4ea; --card:#ffffff; --seg-on:#ffffff;
--mesh:
radial-gradient(58% 42% at 14% 8%,rgba(120,150,132,.52) 0%,rgba(120,150,132,.17) 45%,transparent 72%),
radial-gradient(52% 40% at 92% 46%,rgba(178,220,192,.55) 0%,rgba(178,220,192,.17) 46%,transparent 72%),
radial-gradient(46% 34% at 26% 96%,rgba(140,175,152,.36) 0%,transparent 66%),
linear-gradient(168deg,#d9e0da 0%,#cfd8d1 46%,#c5cfc8 100%);
--gl-bg:linear-gradient(158deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.16) 62%,rgba(255,255,255,.22) 100%);
--gl-bg-h:linear-gradient(158deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.24) 100%);
--gl-bg-t:rgba(255,255,255,.18);
--gl-bdr:rgba(255,255,255,.62); --gl-bdr2:rgba(40,120,60,.05);
--gl-shad:0 2px 8px rgba(0,80,30,.06),0 14px 34px rgba(0,80,30,.10);
--gl-shad-lg:0 6px 18px rgba(0,80,30,.10),0 26px 60px rgba(0,80,30,.15);
--gl-hi:inset 0 1px 0 rgba(255,255,255,.85),inset 1px 0 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(255,255,255,.12);
--sheen:linear-gradient(180deg,rgba(255,255,255,.20) 0%,rgba(255,255,255,.03) 60%,transparent 100%);
--sep:rgba(45,90,60,.10);
--inp-bg:rgba(255,255,255,.30); --inp-focus:rgba(255,255,255,.52);
--g5:rgba(100,150,115,.10); --g6:rgba(255,255,255,.60);
--acc-ink:10,74,32;
}
/* ── NEON IN DEN HELLEN THEMES ──
Ein Block fuer alle vier hellen Themes, nicht vier einzelne: das Leuchten
soll ueberall gleich stark sein, sonst wirkt der Themewechsel wie ein
Wechsel der Anzeige. Die Farbe bleibt die des Themes (--acc bzw. der Wert),
angepasst ist nur, wie Licht auf hellem Grund funktioniert (siehe :root).
Dark bleibt unveraendert — dort stimmt der Stand bereits. */
[data-theme="light"],[data-theme="rosa"],[data-theme="blau"],[data-theme="grün"]{
/* Halber Dimmer: auf Weiss wird aus demselben Hof sonst ein Schleier. */
--neon:.26;
/* Kerne satt statt hell — auf Weiss traegt die SAETTIGUNG den Kontrast,
nicht die Helligkeit. */
--ng-core:48%;
/* Die drei Schein-Ebenen MUESSEN dunkler sein als die Fuellung, um die sie
liegen. Bis 02.08.2026 standen sie auf 52/45/42 — heller als die geklemmte
Fuellung. Ein Schein, der heller ist als sein Kern, ist auf hellem Grund
kein Licht mehr, sondern ein farbiger Nebel: genau der gruene Schleier, der
in rosa um die vollen Zeilen der Volumen-Verteilung stand. Dunkler als der
Kern liest sich dieselbe Staffel als farbiger Kontaktschatten — das ist die
helle Entsprechung zum Leuchten, nicht seine Kopie. */
--ng-1:34%; --ng-2:30%; --ng-3:27%;
/* Die Geometrie (--gw-*) bleibt appweit dieselbe, die Verteilung der
Deckkraft auf die drei Lagen nicht: auf Dunkel traegt die WEITE Lage das
Leuchten, auf Hell macht genau sie den Fleck. Eine volle Reihe gruener
Striche legte dadurch eine 20-px-Wolke ueber die weisse Karte — jeder
einzelne Schein blass, uebereinander ein Schleier. Auf Hell liegt das
Gewicht deshalb auf der ENGEN Lage (Kontaktschatten direkt am Strich), die
weite bleibt fast nur noch als Andeutung stehen. */
--gwa-1:calc(1 * var(--neon));
--gwa-2:calc(.48 * var(--neon));
--gwa-3:calc(.16 * var(--neon));
/* Deckkraft der haarfeinen Kante um jede Signal-Fuellung (Erholungs-Akkus,
Volumen-Verteilung, Leistungsleiste). Sie traegt den Kontrast, den eine
helle Fuellung auf weissem Grund nicht selbst haben kann — vor allem bei
Gelb. Auf Dunkel steht sie auf 0. Leser: _segBarsHTML()/_segBarsVertHTML(). */
--sig-ring:.5;
/* Weniger Weiss im Innenlicht, mehr Tiefe unten: sonst verschwindet der
Strich in der weissen Karte, auf der er liegt. */
--ng-hi:.18; --ng-lo:.55;
/* Gruen dunkler und satter: das helle Neon-Gruen ist auf einer weissen
Karte kaum noch vom Untergrund zu trennen. */
--kg-rgb:34,178,77;
/* DER HELLIGKEITSDECKEL. Jede Farbe, die als Leuchtfarbe gebaut wurde, kommt
aus dem Dark Mode und liegt dort bei L≈50-60 — auf Schwarz ist das Licht,
auf Weiss ist es fast der Untergrund. Wer eine solche Farbe auf hellem
Grund als KERN oder als TEXT einsetzt, klemmt sie hier.
Der Token stand bis 02.08.2026 auf 52 und wurde von NIEMANDEM gelesen — er
war als Werkzeug gedacht und nie angeschlossen. Das war die gemeinsame
Ursache dafuer, dass Erholungs-Striche (1,03:1), Split-Namen (1,46:1) und
Prozentzahlen (1,25:1) in hell praktisch unsichtbar waren. Leser sind
jetzt _nrLmax() -> _segFarbe()/_splitInk()/recoveryInk() in app-plans.js.
30 statt 52, weil erst dort alle fuenf Signalfarben ueber 3:1 kommen —
Gelb (h≈50) ist der Fall, der den Wert bestimmt. */
--neon-lmax:30;
/* Die Kante ersetzt, was auf Dunkel der Schein leistet: sie trennt das
Element vom Grund. Neutral getoent, nicht schwarz — ein harter Schatten
stuende gegen das Glas. */
--neon-edge:0 1px 2px rgba(28,28,38,.16);
/* Mulden gedreht: dunkel statt hell, sonst liegt Weiss auf Weiss. Nur die
heutige Kapsel bleibt heller als ihre Umgebung — sie soll herausstehen,
und auf hellem Grund heisst "herausstehen" heller, nicht dunkler. Ihr
Saum nimmt die Akzentfarbe auf, damit die Spalte den Tag markiert, ohne
mit dem leuchtenden Punkt darin zu konkurrieren. */
--ng-well:rgba(30,30,42,.085);
--ng-well-bdr:rgba(30,30,42,.11);
/* Die heutige Kapsel war HELLER gedacht als ihre Umgebung — auf einer weissen
Karte heisst das aber Weiss auf Weiss (gemessen 1,05:1, sichtbar blieb nur
der 1-px-Saum). Sie bekommt deshalb einen Akzenthauch statt mehr Weiss:
"herausstehen" laeuft hier ueber Farbe, nicht ueber Helligkeit. */
--ng-well-on:rgba(var(--acc-rgb),.10);
--ng-well-on-bdr:rgba(var(--acc-rgb),.45);
--ng-well-off:rgba(30,30,42,.025);
--ng-well-off-bdr:rgba(30,30,42,.045);
--ng-outline:rgba(30,30,42,.16);
--ng-step-1:.62; --ng-step-2:.78; --ng-step-3:.9;
/* Ringe: der volle Bogen lag bei L≈46-56 und damit auf derselben Helligkeit
wie die Karte darunter (gemessen 1,13:1) — er war nur noch am Farbton zu
erkennen, nicht mehr als Licht. Dunkler heisst hier lesbarer. */
--nr-c1:34; --nr-c2:42;
--nr-g1:36; --nr-g2:44;
}
/* ── FLAECHEN, DIE AUF WEISS KEINE KONTUR HABEN ──────────────────────────
Kein Neon, aber derselbe Denkfehler: --gl-bdr und --gl-bg-t sind in den
hellen Themes WEISS (rgba(255,255,255,.55) bzw. .18). Auf einer dunklen
Flaeche ist das ein Lichtsaum, auf einer weissen Karte ist es nichts —
gemessen 1,02:1 fuer den Rand der Filter-Chips, 1,04:1 fuer das Suchfeld.
Beide Tokens global zu drehen verbietet sich (--gl-bdr hat 145 Verwender,
--inp-bg 41), deshalb hier gezielt die drei Flaechen, bei denen es auffiel.
Die Kante ist getoent statt schwarz, damit sie zum Glas passt. */
[data-theme="light"] .icat,[data-theme="rosa"] .icat,
[data-theme="blau"] .icat,[data-theme="grün"] .icat{
background:rgba(255,255,255,.72);border-color:rgba(30,30,42,.14)}
[data-theme="light"] .ex-search,[data-theme="rosa"] .ex-search,
[data-theme="blau"] .ex-search,[data-theme="grün"] .ex-search{
background:rgba(255,255,255,.66);border-color:rgba(30,30,42,.12)}
/* "+ Split" / "+ Uebung": das Akzent-Plaettchen machte den Grund auf Weiss
DUNKLER statt heller — der Effekt kippt, und die Schrift darauf stand bei
2,28:1. Weisse Basis, Akzent nur noch als Innenkante, Text im geklemmten
Akzent. */
[data-theme="light"] .ex-sec-add,[data-theme="rosa"] .ex-sec-add,
[data-theme="blau"] .ex-sec-add,[data-theme="grün"] .ex-sec-add{
background:rgba(255,255,255,.72);
box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.22),var(--neon-edge);
color:rgb(var(--acc-ink))}
/* Der Streak-Hof war auf Weiss gemessen DUNKLER als die Karte, auf der er
liegt — also kein Schein, sondern ein brauner Schmutzrand, und die beiden
weiten drop-shadows verwaschen zusaetzlich die Flammenkontur. Enger und
schwaecher: auf hellem Grund macht ein Hof die Form kaputt, nicht sichtbar. */
[data-theme="light"] .strk-flame::before,[data-theme="rosa"] .strk-flame::before,
[data-theme="blau"] .strk-flame::before,[data-theme="grün"] .strk-flame::before{
inset:-4%;
background:radial-gradient(circle at 50% 58%,
rgba(255,150,50,.30) 0%, rgba(255,90,31,.12) 46%, rgba(255,90,31,0) 74%)}
[data-theme="light"] .strk-flame .fl,[data-theme="rosa"] .strk-flame .fl,
[data-theme="blau"] .strk-flame .fl,[data-theme="grün"] .strk-flame .fl{
filter:drop-shadow(0 0 4px rgba(255,150,50,calc(.9 * var(--neon))))
drop-shadow(0 0 9px rgba(255,90,31,calc(.5 * var(--neon))))}
/* Premium-Chip: goldenes Symbol auf blassgoldenem Feld ist auf Weiss dieselbe
Farbfamilie ohne Eigenkontrast — die Hantel war nicht mehr zu erkennen.
Feld satter, Rand deutlicher; der Puls kann auf Weiss ohnehin nichts
ausrichten und bleibt deshalb still stehen. */
[data-theme="light"] .prem-tag,[data-theme="rosa"] .prem-tag,
[data-theme="blau"] .prem-tag,[data-theme="grün"] .prem-tag{
background:radial-gradient(circle at 35% 30%,rgba(217,165,52,.34),rgba(217,165,52,.24) 70%,rgba(217,165,52,.14));
border-color:rgba(168,118,10,.75);
box-shadow:0 0 0 1px rgba(0,0,0,.05),0 2px 6px rgba(138,106,0,.28);
animation:none}
[data-theme="light"] .prem-tag svg,[data-theme="rosa"] .prem-tag svg,
[data-theme="blau"] .prem-tag svg,[data-theme="grün"] .prem-tag svg{filter:none}
/* ── GLASS EFFECT OFF ──
Hintergrund bleibt das ruhige Theme-Gradient (#bg nutzt --mesh).
Nur Flächen werden deckend und Blur wird abgeschaltet. */
[data-glass="off"]{
--gl-bg:#ffffff;--gl-bg-h:#ffffff;--gl-bg-t:rgba(255,255,255,.85);
--gl-bdr:rgba(0,0,0,.06);--gl-bdr2:rgba(0,0,0,.04);
--gl-shad:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05);
--gl-shad-lg:0 2px 8px rgba(0,0,0,.06),0 16px 40px rgba(0,0,0,.10);
--gl-hi:inset 0 0 0 0 transparent;
--sheen:transparent;--sep:rgba(60,60,67,.10);
--inp-bg:rgba(120,120,128,.08);--inp-focus:rgba(120,120,128,.13);--g5:rgba(120,120,128,.10);
}
[data-glass="off"][data-theme="dark"]{
--gl-bg:#17171b;--gl-bg-h:#1e1e23;--gl-bg-t:rgba(23,23,27,.85);
--gl-bdr:rgba(255,255,255,.07);--gl-bdr2:rgba(255,255,255,.045);
--gl-shad:0 1px 2px rgba(0,0,0,.40),0 10px 28px rgba(0,0,0,.35);
--gl-shad-lg:0 3px 10px rgba(0,0,0,.45),0 22px 52px rgba(0,0,0,.50);
--gl-hi:inset 0 1px 0 rgba(255,255,255,.07);
--sep:rgba(255,255,255,.08);--inp-bg:rgba(118,118,128,.22);--inp-focus:rgba(118,118,128,.32);--g5:rgba(118,118,128,.18);
}
[data-glass="off"] .card,[data-glass="off"] .ex-card,[data-glass="off"] .companion-card,
[data-glass="off"] .sheet,[data-glass="off"] .hdr,[data-glass="off"] .tabbar,
[data-glass="off"] .f-in,[data-glass="off"] .set-in,[data-glass="off"] .btn-gray,
[data-glass="off"] .wk-prev-day,[data-glass="off"] .day-pill,[data-glass="off"] .fmode-wrap,
[data-glass="off"] .wheel-col,[data-glass="off"] .plan-type-seg{
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
[data-glass="off"] .card::after,[data-glass="off"] .ex-card::after,
[data-glass="off"] .companion-card::after,[data-glass="off"] .sheet::after,
[data-glass="off"] .tabbar::after,[data-glass="off"] .hdr::after{display:none}
[data-glass="off"] *{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
/* Ausnahme: Der Hintergrund des KI-Menüs bleibt IMMER unscharf. Die Menü-Pillen
sind bewusst solide (WebKit-Compositing-Bug, s. #ai-radial) und stehen sonst
direkt auf dem Seiteninhalt — ohne Blur ist das Menü kaum lesbar. Höhere
Spezifität (ID) als der *-Reset darüber, deshalb gewinnt es trotz !important. */
[data-glass="off"] #ai-radial-backdrop{
backdrop-filter:blur(14px) saturate(1.15)!important;
-webkit-backdrop-filter:blur(14px) saturate(1.15)!important;
}
/* ── Boot-Splash (s. Kopf-Skript): deckt den ersten Aufbau ab ──
Schwarz + zentrierte WEISSE Hantel, 92x92 = pixelgleich mit dem nativen
LaunchScreen (Splash.imageset, contentMode=center). Weil Größe, Farbe und
Position identisch sind, ist der Übergang nativ → WebView unsichtbar: es
bleibt EIN Logo stehen, statt dass ein großes in ein kleines springt.
Deshalb hier auch KEINE Pulse-Animation mehr — der native Screen davor ist
statisch, jede Bewegung im selben Moment liest sich als Doppelbild.
z-index über allem, inkl. Rotate-Lock (99999). */
#boot-splash{
position:fixed;inset:0;z-index:100000;background:#000;
display:flex;align-items:center;justify-content:center;
opacity:1;transition:opacity .26s ease;
}
#boot-splash.gone{opacity:0;pointer-events:none}
/* ── Querformat-Sperre: Hinweis nur auf Smartphones im Landscape ── */
#rotate-lock{
display:none;position:fixed;inset:0;z-index:99999;
background:var(--bg,#0c0c12);color:var(--text,#fff);
flex-direction:column;align-items:center;justify-content:center;
gap:14px;text-align:center;padding:32px;
}
#rotate-lock .rl-txt{font-size:17px;font-weight:700;max-width:280px;line-height:1.4}
@media (orientation:landscape) and (max-height:500px){
#rotate-lock{display:flex}
}
/* ── Split-Erstellen: Erklärung + Vorlagen ── */
.cs-intro{
background:rgba(var(--acc-rgb),.08);
border:1px solid rgba(var(--acc-rgb),.18);
border-radius:14px;padding:12px 14px;margin-bottom:14px;
font-size:13px;line-height:1.5;color:var(--text2);
}
.cs-intro-t{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.cs-presets{display:flex;flex-wrap:wrap;gap:8px}
.cs-preset-btn{
flex:1;min-width:130px;padding:11px 12px;border-radius:12px;
border:1px solid var(--gl-bdr);background:var(--inp-bg);
color:var(--text);font-family:inherit;font-size:13px;font-weight:600;
cursor:pointer;transition:transform .15s,background .2s;
}
.cs-preset-btn:active{transform:scale(.96);background:rgba(var(--acc-rgb),.12)}
/* ── Wdh-Bereich anpassen (im Training) ── */
.ex-goal-tap{cursor:pointer;white-space:nowrap}
.ex-goal-tap:active{opacity:.6}
.rr-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0}
.rr-lbl{font-size:14px;color:var(--text);font-weight:600}
.rr-stepper{display:flex;align-items:center;gap:14px}
.rr-btn{
width:38px;height:38px;border-radius:50%;border:1px solid var(--gl-bdr);
background:var(--inp-bg);color:var(--text);font-size:22px;line-height:1;
font-family:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;
transition:transform .12s,background .2s;
}
.rr-btn:active{transform:scale(.9);background:rgba(var(--acc-rgb),.15)}
.rr-val{min-width:34px;text-align:center;font-size:18px;font-weight:700;color:var(--text)}
/* ── PLATE CALCULATOR (im Gewichts-Wheel) ── */
/* Feste Höhe: das Bottom-Sheet ist unten verankert und würde sonst beim
Wechsel der Scheibenanzahl in der Höhe springen → Rad flackert. Fixe Höhe +
interner Scroll hält Sheet & Rad ruhig, egal wie viele Scheiben angezeigt werden. */
#plate-calc{margin:4px 20px 14px;padding:11px 13px;border-radius:16px;
background:var(--gl-bg-t);border:1px solid var(--gl-bdr);
height:112px;display:flex;flex-direction:column;overflow:hidden}
.pc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;flex-shrink:0}
.pc-title{font-size:12px;font-weight:700;color:var(--text2);letter-spacing:.3px}
.pc-bar-seg{display:flex;gap:4px}
.pc-bar-seg button{border:1px solid var(--gl-bdr);background:var(--inp-bg);color:var(--text2);
font-family:inherit;font-size:11px;font-weight:700;padding:4px 9px;border-radius:9px;cursor:pointer;
transition:background .15s,color .15s}
.pc-bar-seg button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.pc-plates{display:flex;flex-wrap:wrap;gap:6px;align-items:flex-start;align-content:flex-start;
flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pc-plates::-webkit-scrollbar{display:none}
.pc-plate{display:inline-flex;align-items:center;justify-content:center;
padding:6px 10px;border-radius:10px;font-size:13px;font-weight:800;color:#fff;
background:var(--acc);
box-shadow:0 1px 4px rgba(var(--acc-rgb),.22)}
.pc-plate.sm{opacity:.85;font-size:12px;padding:5px 8px}
.pc-msg{font-size:12.5px;color:var(--text2)}
.pc-rest{font-size:11px;color:var(--text2);width:100%;margin-top:2px}
.pc-cfg-btn{border:1px solid var(--gl-bdr);background:var(--inp-bg);color:var(--text2);
font-size:13px;line-height:1;padding:5px 7px;border-radius:9px;cursor:pointer;flex-shrink:0}
.plate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.plate-chip{border:1px solid var(--gl-bdr);background:var(--inp-bg);color:var(--text2);
font-family:inherit;font-size:13px;font-weight:700;padding:11px 4px;border-radius:12px;cursor:pointer;
transition:background .15s,color .15s,border-color .15s,opacity .15s;opacity:.5}
.plate-chip.on{background:var(--acc);border-color:transparent;
color:#fff;opacity:1;box-shadow:0 1px 4px rgba(var(--acc-rgb),.22)}
/* Übungs-Bild: Picker im Formular + Thumbnail in der Liste */
.ex-img-pick{display:flex;align-items:center;gap:12px}
.ex-img-thumb{width:64px;height:64px;border-radius:14px;flex-shrink:0;cursor:pointer;
background-size:cover;background-position:center;background-color:var(--inp-bg);
border:1px solid var(--gl-bdr);display:flex;align-items:center;justify-content:center;
color:var(--text2);font-size:26px;font-weight:300}
.ex-row-img{width:38px;height:38px;border-radius:9px;flex-shrink:0;margin-right:4px;
background-size:cover;background-position:center;background-color:var(--inp-bg)}
/* ── SUPERSET ── */
.ex-card.ss-linked{border-color:rgba(var(--acc-rgb),.45);
box-shadow:0 0 0 1px rgba(var(--acc-rgb),.25),var(--gl-shad)}
.ss-badge{display:inline-flex;align-items:center;gap:3px;
font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;
color:var(--acc);background:rgba(var(--acc-rgb),.13);
border:1px solid rgba(var(--acc-rgb),.25);
padding:2px 7px;border-radius:8px;flex-shrink:0}
.ex-card.ss-linked + .ex-card.ss-linked{margin-top:-6px}
.ss-connector{display:flex;justify-content:center;margin:-4px 0}
.ss-connector span{width:2.5px;height:14px;border-radius:2px;
background:linear-gradient(180deg,rgba(var(--acc-rgb),.55),rgba(var(--acc-rgb),.25))}
/* ── RESET ── */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overscroll-behavior:none}
/* Disable text selection & bounce in native app */
*{-webkit-touch-callout:none}
body *:not(input):not(textarea):not([contenteditable]){-webkit-user-select:none;user-select:none}
/* Gradient NUR in #bg (position:fixed) – html/body nur Farb-Fallback für Overscroll */
html{background-color:#f2f2f6;scrollbar-width:none;-ms-overflow-style:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{display:none;width:0;height:0}
html[data-theme="rosa"]{background-color:#f4e7ef}
html[data-theme="dark"]{background-color:#050508}
html[data-theme="blau"]{background-color:#e4eef8}
html[data-theme="grün"]{background-color:#e6f4ea}
body{
font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Helvetica Neue',sans-serif;
color:var(--text);
max-width:430px;margin:0 auto;min-height:100%;
position:relative;
-webkit-font-smoothing:antialiased;
background:transparent;
scrollbar-width:none;-ms-overflow-style:none;
}
/* Fixed gradient background */
#bg{
position:fixed;inset:0;z-index:-1;
background:var(--mesh);
transition:background .4s cubic-bezier(.4,0,.2,1);
}
/* Feines Korn — gibt der Fläche eine metallische Mikro-Textur, an der das Glas
bricht (wie die gewellte Oberfläche im Referenz-Widget). Sehr dezent. */
#bg::before{
content:'';position:absolute;inset:0;pointer-events:none;
background-image:url("data:image/svg+xml;utf8,");
opacity:.022;mix-blend-mode:overlay;
}
[data-theme="dark"] #bg::before{opacity:.05;mix-blend-mode:soft-light}
/* ── iOS PWA SAFE AREAS ── */
:root{
--sat: env(safe-area-inset-top, 0px);
--sab: env(safe-area-inset-bottom, 0px);
}
/* ── PAGES ── */
.pg{display:none;padding-bottom:calc(114px + var(--sab));min-height:100vh}
.pg.on{display:block}
/* ── GLASS HEADER ── */
.hdr{
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat));
padding:calc(var(--sat) + 16px) 20px 18px;
/* Header scrollt normal mit dem Inhalt weg (nicht mehr sticky), liegt also nie
über den anderen Elementen. Kein Mask-Fade mehr — sauberer Abschluss. */
position:relative;z-index:1;
transition:background .4s;
overflow:hidden;
}
.hdr::after{
content:'';position:absolute;top:0;left:0;right:0;height:45%;
background:var(--sheen);pointer-events:none;
}
.hdr-row{display:flex;justify-content:space-between;align-items:flex-end;position:relative;z-index:1}
.hdr h1{font-size:34px;font-weight:700;letter-spacing:-.02em}
.hdr .sub{font-size:14px;color:var(--text2);margin-top:3px;letter-spacing:-.01em}
.hdr-plus{
background:var(--acc);border:none;border-radius:50%;
width:36px;height:36px;display:flex;align-items:center;justify-content:center;
cursor:pointer;color:#fff;font-size:20px;flex-shrink:0;
box-shadow:0 1px 3px rgba(var(--acc-rgb),.25),0 4px 12px rgba(var(--acc-rgb),.25);
transition:transform .15s,opacity .12s;
position:relative;
padding:0;line-height:1;
-webkit-appearance:none;appearance:none;
}
.hdr-plus::after{
content:'';position:absolute;inset:0;border-radius:50%;
background:linear-gradient(160deg,rgba(255,255,255,.35) 0%,transparent 60%);
pointer-events:none;
}
.hdr-plus:active{transform:scale(.90);opacity:.80}
.hdr-plus svg{color:#fff}
/* ── HEADER ICON BUTTON (glass, secondary) ── */
.hdr-icon-btn{
background:var(--gl-bg-t);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border:1px solid var(--gl-bdr);border-radius:50%;
width:38px;height:38px;display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--text);flex-shrink:0;padding:0;
box-shadow:var(--gl-shad);
transition:transform .15s,opacity .12s;
-webkit-appearance:none;appearance:none;
}
.hdr-icon-btn:active{transform:scale(.90);opacity:.8}
.hdr-icon-btn svg{width:20px;height:20px}
/* ── ERFOLGE PAGE ── */
.erf-hero{
position:relative;text-align:center;
background:linear-gradient(150deg,rgba(var(--acc-rgb),.12),rgba(var(--acc-rgb),.04));
border:1px solid rgba(var(--acc-rgb),.15);border-radius:24px;
padding:24px 18px;overflow:hidden;box-shadow:var(--gl-shad)}
.erf-hero::after{content:'';position:absolute;top:0;left:0;right:0;height:60%;
background:var(--sheen);pointer-events:none;border-radius:24px 24px 0 0}
.erf-hero-ic{font-size:30px;line-height:1}
.erf-hero-val{font-size:40px;font-weight:800;letter-spacing:-1px;margin-top:6px;position:relative;z-index:1}
.erf-hero-lab{font-size:13px;color:var(--text2);margin-top:2px;position:relative;z-index:1}
.erf-stat-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.erf-tile{text-align:center;background:var(--gl-bg-t);
backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
border:1px solid var(--gl-bdr);border-radius:16px;padding:14px 8px;box-shadow:var(--gl-shad)}
.erf-tile-val{font-size:20px;font-weight:700}
.erf-tile-lab{font-size:11px;color:var(--text2);margin-top:2px}
.erf-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.erf-badge{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;
background:var(--gl-bg-t);border:1px solid var(--gl-bdr);border-radius:18px;
padding:14px 8px 12px;text-align:center;box-shadow:var(--gl-shad);
transition:transform .15s}
.erf-badge:active{transform:scale(.95)}
.erf-badge.locked{opacity:.45;filter:grayscale(.8)}
.erf-badge-ic{line-height:1;
width:52px;height:52px;display:flex;align-items:center;justify-content:center;border-radius:50%;
background:rgba(var(--acc-rgb),.14);border:1px solid rgba(var(--acc-rgb),.28)}
.erf-badge.locked .erf-badge-ic{background:var(--gl-bg-t);border-color:var(--gl-bdr)}
.erf-badge-key{font-size:17px;font-weight:800;letter-spacing:-.5px;color:var(--acc)}
.erf-badge.locked .erf-badge-key{color:var(--text2)}
.erf-time-line{text-align:center;font-size:13px;color:var(--text2);margin-top:-2px}
.erf-time-line b{color:var(--text);font-size:15px;font-weight:700}
.erf-period-seg{display:flex;gap:4px;background:var(--gl-bg-t);border:1px solid var(--gl-bdr);
border-radius:14px;padding:4px}
.erf-period-seg button{flex:1;border:none;background:transparent;color:var(--text2);
font-family:inherit;font-size:13px;font-weight:700;padding:8px 4px;border-radius:10px;cursor:pointer;
transition:background .18s,color .18s}
.erf-period-seg button.on{background:var(--acc);color:#fff;box-shadow:0 2px 8px rgba(var(--acc-rgb),.3)}
/* ── TAB-WECHSEL: INHALTE GESTAFFELT EINBLENDEN ── */
@keyframes pg-content-in{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
/* Kurz & knapp: 300 ms Einblenden, Staffelung max. 120 ms. Vorher lief die
Kette bis ~0,9 s — das liest das Auge als „App hängt", nicht als Politur. */
.pg.on .pad>*,
.pg.on #heute-grid>*{animation:pg-content-in .30s cubic-bezier(.22,1,.36,1) both}
.pg.on .pad>*:nth-child(1),.pg.on #heute-grid>*:nth-child(1){animation-delay:0s}
.pg.on .pad>*:nth-child(2),.pg.on #heute-grid>*:nth-child(2){animation-delay:.03s}
.pg.on .pad>*:nth-child(3),.pg.on #heute-grid>*:nth-child(3){animation-delay:.06s}
.pg.on .pad>*:nth-child(4),.pg.on #heute-grid>*:nth-child(4){animation-delay:.09s}
.pg.on .pad>*:nth-child(5),.pg.on #heute-grid>*:nth-child(5){animation-delay:.11s}
.pg.on .pad>*:nth-child(6),.pg.on #heute-grid>*:nth-child(6){animation-delay:.13s}
.pg.on .pad>*:nth-child(n+7),.pg.on #heute-grid>*:nth-child(n+7){animation-delay:.15s}
@media (prefers-reduced-motion: reduce){
.pg.on .pad>*,.pg.on #heute-grid>*{animation:none}
}
/* ── MEILENSTEIN-BELOHNUNG (Toast, ohne Emoji) ── */
.mr-toast{position:fixed;left:50%;top:calc(var(--sat,0px) + 18px);transform:translate(-50%,-22px);
z-index:2000;opacity:0;pointer-events:none;
transition:opacity .38s cubic-bezier(.22,1,.36,1),transform .38s cubic-bezier(.22,1,.36,1)}
.mr-toast.show{opacity:1;transform:translate(-50%,0)}
.mr-card{display:flex;align-items:center;gap:13px;
background:var(--gl-bg-h);backdrop-filter:blur(60px) saturate(220%);-webkit-backdrop-filter:blur(60px) saturate(220%);
border:1px solid rgba(var(--acc-rgb),.30);border-radius:20px;padding:12px 18px 12px 12px;
box-shadow:var(--gl-shad-lg),0 0 0 4px rgba(var(--acc-rgb),.07);
max-width:min(86vw,360px)}
.mr-ring{width:48px;height:48px;flex-shrink:0;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:rgba(var(--acc-rgb),.16);border:1.5px solid var(--acc);
box-shadow:0 0 16px rgba(var(--acc-rgb),calc(.5 * var(--neon)));animation:mr-pop .5s cubic-bezier(.34,1.56,.64,1) both}
.mr-ring span{font-size:17px;font-weight:800;letter-spacing:-.5px;color:var(--acc)}
@keyframes mr-pop{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.mr-lbl{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--acc)}
.mr-name{font-size:16px;font-weight:800;letter-spacing:-.3px;color:var(--text);margin-top:1px}
.erf-badge-name{font-size:11px;font-weight:700;line-height:1.25}
.erf-badge-sub{font-size:9.5px;color:var(--text2);line-height:1.2}
.erf-badge-check{position:absolute;top:7px;right:7px;width:16px;height:16px;border-radius:50%;
background:var(--acc);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center}
.erf-kraft-row{padding:12px 16px;position:relative;z-index:1;border-top:1px solid var(--gl-bdr);cursor:pointer;transition:background .15s}
.erf-kraft-row:first-child{border-top:none}
.erf-kraft-row:active{background:var(--gl-bg-t)}
.erf-kraft-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:7px;gap:8px}
.erf-kraft-name{font-size:14px;font-weight:700;display:flex;align-items:center;gap:4px}
.erf-chev{color:var(--text2);font-size:15px;font-weight:600;line-height:1}
/* ── KRAFTSTEIGERUNG PRO MUSKEL: NEON-BALKEN ───────────────────────────
Gleiche Lichtstaffel wie ueberall in der App (--gw-* Radien, --gwa-*
Deckkraften, zentral gedimmt ueber --neon) statt eigener Zahlen — sonst
leuchtet diese Anzeige anders hell als Ringe, Splits und Wochen-Rail.
Der Balken ist eine Mulde (--ng-well), in der zwei Leuchtroehren liegen:
Akzentfarbe = Ausgangskraft, Gruen = Zuwachs.
KEIN overflow:hidden mehr: das hat den Schein exakt an der Balkenkante
abgeschnitten, und ein Neon ohne Hof ist nur ein farbiger Strich. Die
Rundung machen deshalb die Segmente selbst — das linke rund links, das
rechte rund rechts, und ohne Zuwachs (.solo) ist das eine Segment ganz
rund. */
.erf-kraft-delta{font-size:13px;font-weight:700;color:#41d869;flex-shrink:0;
text-shadow:0 0 var(--gw-2) rgba(var(--kg-rgb),calc(.8 * var(--neon)))}
.erf-kraft-delta.flat{color:var(--text2);text-shadow:none}
.erf-kraft-bar{height:10px;border-radius:999px;display:flex;overflow:visible;
background:var(--ng-well);box-shadow:inset 0 0 0 1px var(--ng-well-bdr)}
.erf-kraft-base,.erf-kraft-gain{height:100%;position:relative;
transition:width .55s cubic-bezier(.22,1,.36,1)}
/* Das Innenlicht ist dasselbe wie beim Level-Balken (.lvl-fill): ein WEICHER
Schimmer ueber die obere Kante. Vorher standen hier zwei harte 1-px-Linien
(hell oben, dunkel unten) — auf 10 px Hoehe ist das keine Roehre mehr,
sondern eine weisse Oberkante, und die Anzeige leuchtete dadurch sichtbar
greller als Level, Wochen-Rail und Sparkline. Kein anderer Balken der App
setzt die Gegenlinie unten; deshalb faellt sie hier weg. */
.erf-kraft-base{border-radius:999px 0 0 999px;
background:linear-gradient(90deg,rgba(var(--acc-rgb),.62),var(--acc));
box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--acc-rgb),var(--gwa-2)),
0 0 var(--gw-3) rgba(var(--acc-rgb),var(--gwa-3)),
var(--neon-edge),
inset 0 1px 3px rgba(255,255,255,var(--ng-hi))}
/* Ohne Zuwachs bleibt ein 0 px breites Segment stehen — dessen Schein wuerde als
gruener Fleck am Balkenende haengen, obwohl es nichts zu zeigen gibt. */
.erf-kraft-bar.solo .erf-kraft-base{border-radius:999px}
.erf-kraft-bar.solo .erf-kraft-gain{display:none}
/* Der Zuwachs liegt ueber der Ausgangskraft: sein Hof soll den Uebergang
ueberstrahlen, nicht andersherum — er ist die Aussage der Zeile. */
.erf-kraft-gain{border-radius:0 999px 999px 0;z-index:1;
background:linear-gradient(90deg,rgb(var(--kg-rgb)),#7dffb4);
box-shadow:0 0 var(--gw-1) rgba(var(--kg-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--kg-rgb),var(--gwa-2)),
0 0 var(--gw-3) rgba(var(--kg-rgb),var(--gwa-3)),
var(--neon-edge),
inset 0 1px 3px rgba(255,255,255,var(--ng-hi))}
.erf-kraft-sub{font-size:11px;color:var(--text2);margin-top:7px}
.erf-kraft-sub b{color:var(--text)}
.erf-kraft-sub .up{color:#41d869;font-weight:700;
text-shadow:0 0 var(--gw-2) rgba(var(--kg-rgb),calc(.7 * var(--neon)))}
.erf-legend{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:0 2px 10px;font-size:11px;color:var(--text2)}
.erf-legend-item{display:flex;align-items:center;gap:6px}
.erf-legend-sw{width:14px;height:8px;border-radius:999px;flex-shrink:0}
.erf-legend-sw.base{background:var(--acc);
box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--acc-rgb),var(--gwa-2)),
var(--neon-edge)}
.erf-legend-sw.gain{background:rgb(var(--kg-rgb));
box-shadow:0 0 var(--gw-1) rgba(var(--kg-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--kg-rgb),var(--gwa-2)),
var(--neon-edge)}
/* ── KRAFT-DETAIL (Sheet) ── */
.kd-formula{font-size:12px;color:var(--text2);line-height:1.55;
background:var(--gl-bg-t);border:1px solid var(--gl-bdr);border-radius:14px;padding:11px 13px;margin-bottom:16px}
.kd-formula b{color:var(--text)}
.kd-ex{padding:14px 0;border-top:1px solid var(--gl-bdr)}
.kd-ex:first-child{border-top:none}
.kd-ex-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:8px}
.kd-ex-name{font-size:15px;font-weight:700}
/* Dieselbe Zuwachs-Farbe und derselbe Schein wie in der Liste (.erf-kraft-delta).
Vorher stand hier ein dritter Gruenton (#34c759) ganz ohne Licht — beim Tippen
auf eine Zeile wechselte damit die Anzeige die Sprache. */
.kd-ex-delta{font-size:13px;font-weight:700;color:#41d869;flex-shrink:0;
text-shadow:0 0 var(--gw-2) rgba(var(--kg-rgb),calc(.8 * var(--neon)))}
.kd-ex-delta.flat{color:var(--text2);text-shadow:none}
.kd-step{display:flex;align-items:center;gap:9px;font-size:13px;padding:3px 0}
.kd-step-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.kd-step-dot.start{background:rgba(var(--acc-rgb),.65)}
.kd-step-dot.best{background:rgb(var(--kg-rgb));
box-shadow:0 0 var(--gw-1) rgba(var(--kg-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--kg-rgb),var(--gwa-2)),
var(--neon-edge)}
.kd-step-lbl{color:var(--text2);width:58px;flex-shrink:0}
.kd-step-val{color:var(--text)}
.kd-step-val b{color:var(--acc);font-weight:700}
.kd-step-date{color:var(--text2);margin-left:auto;font-size:11px;flex-shrink:0;padding-left:8px}
/* Die Balken im Detail-Sheet sind dieselbe Anzeige wie die Zeile, auf die man
getippt hat — nur pro Uebung statt pro Muskelgruppe. Sie tragen deshalb
dieselbe Mulde und dieselbe Lichtstaffel wie .erf-kraft-bar. Vorher waren es
flache Farbstreifen mit overflow:hidden: der Schein war nicht schwach, es gab
ihn gar nicht, und ein overflow:hidden haette ihn ohnehin an der Balkenkante
abgeschnitten. Die Rundung machen darum wieder die Segmente selbst. */
.kd-bar{height:8px;border-radius:999px;display:flex;overflow:visible;margin-top:10px;
background:var(--ng-well);box-shadow:inset 0 0 0 1px var(--ng-well-bdr)}
.kd-bar .b,.kd-bar .g{height:100%;position:relative}
.kd-bar .b{border-radius:999px 0 0 999px;
background:linear-gradient(90deg,rgba(var(--acc-rgb),.62),var(--acc));
box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--acc-rgb),var(--gwa-2)),
0 0 var(--gw-3) rgba(var(--acc-rgb),var(--gwa-3)),
var(--neon-edge),
inset 0 1px 3px rgba(255,255,255,var(--ng-hi))}
.kd-bar.solo .b{border-radius:999px}
.kd-bar .g{border-radius:0 999px 999px 0;z-index:1;
background:linear-gradient(90deg,rgb(var(--kg-rgb)),#7dffb4);
box-shadow:0 0 var(--gw-1) rgba(var(--kg-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--kg-rgb),var(--gwa-2)),
0 0 var(--gw-3) rgba(var(--kg-rgb),var(--gwa-3)),
var(--neon-edge),
inset 0 1px 3px rgba(255,255,255,var(--ng-hi))}
/* ── PLAN / WOCHENPLAN ── */
.plan-day{
display:flex;align-items:center;gap:12px;padding:14px 16px;
border-bottom:1px solid var(--gl-bdr);cursor:pointer;
transition:background .15s;
}
.plan-day:last-child{border-bottom:none}
.plan-day:active{background:rgba(var(--acc-rgb),.08)}
.plan-day.today{background:rgba(var(--acc-rgb),.06)}
.plan-day-name{
font-weight:700;font-size:15px;width:46px;flex-shrink:0;color:var(--text);
letter-spacing:.2px;
}
.plan-day.today .plan-day-name{color:var(--acc)}
.plan-day-body{flex:1;min-width:0}
.plan-day-title{font-size:15px;color:var(--text);font-weight:600;margin-bottom:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-day-title.empty{color:var(--text2);font-weight:400}
.plan-day-sub{font-size:12px;color:var(--text2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-day-chev{color:var(--text2);font-size:22px;flex-shrink:0}
.plan-badge{
display:inline-flex;align-items:center;gap:4px;
padding:3px 9px;border-radius:10px;font-size:11px;font-weight:700;
background:rgba(var(--acc-rgb),.14);color:var(--acc);
margin-right:6px;
}
.day-pill-row{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 4px}
.day-pill{
flex:1;min-width:42px;padding:9px 6px;border-radius:12px;
background:var(--gl-bg);border:1px solid var(--gl-bdr);
font-family:inherit;font-size:12px;font-weight:700;
color:var(--text2);cursor:pointer;text-align:center;
transition:background .15s,color .15s,border-color .15s;
}
.day-pill.on{
background:var(--acc);color:#fff;border-color:var(--acc);
box-shadow:0 2px 8px rgba(var(--acc-rgb),.35);
}
.plan-type-seg{
display:flex;gap:6px;background:var(--gl-bg);border:1px solid var(--gl-bdr);
border-radius:14px;padding:4px;margin-bottom:14px;
}
.plan-type-seg button{
flex:1;padding:9px 4px;border:none;background:transparent;
font-family:inherit;font-size:13px;font-weight:600;color:var(--text2);
border-radius:10px;cursor:pointer;transition:background .15s,color .15s;
}
.plan-type-seg button.on{background:var(--acc);color:#fff}
.plan-ex-pick{
display:flex;flex-direction:column;gap:6px;max-height:34vh;overflow-y:auto;
padding:4px 2px;
}
.plan-ex-item{
display:flex;align-items:center;gap:10px;padding:10px 12px;
background:var(--gl-bg);border:1px solid var(--gl-bdr);
border-radius:12px;cursor:pointer;
}
.plan-ex-item.on{background:rgba(var(--acc-rgb),.12);border-color:var(--acc)}
.plan-ex-item .pe-emo{font-size:18px}
.plan-ex-item .pe-name{flex:1;font-size:14px;font-weight:600;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan-ex-item .pe-chk{
width:22px;height:22px;border-radius:50%;border:2px solid var(--gl-bdr);
display:flex;align-items:center;justify-content:center;
color:transparent;font-weight:800;font-size:13px;flex-shrink:0;
}
.plan-ex-item.on .pe-chk{background:var(--acc);border-color:var(--acc);color:#fff}
.wk-preview{
display:flex;gap:6px;overflow-x:auto;padding:10px 20px 4px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.wk-preview::-webkit-scrollbar{display:none}
.wk-prev-day{
flex:0 0 auto;min-width:64px;padding:9px 10px;border-radius:14px;
background:var(--gl-bg);border:1px solid var(--gl-bdr);
text-align:center;cursor:pointer;
transition:transform .12s,background .15s;
}
.wk-prev-day:active{transform:scale(.96)}
.wk-prev-day.today{border-color:var(--acc);box-shadow:0 0 0 1px rgba(var(--acc-rgb),.4)}
.wk-prev-day.has{background:rgba(var(--acc-rgb),.10)}
.wk-prev-d{font-size:10px;font-weight:700;color:var(--text2);letter-spacing:.4px}
.wk-prev-day.today .wk-prev-d{color:var(--acc)}
.wk-prev-l{font-size:11px;color:var(--text);font-weight:600;margin-top:3px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.wk-prev-l.empty{color:var(--text2);font-weight:400;opacity:.55}
/* ── ÜBUNGEN-TAB REDESIGN: Wochen-Rail · Split-Karten · kompakte DB ── */
.wk-rail{
display:flex;gap:7px;overflow-x:auto;padding:12px 20px 6px;
scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.wk-rail::-webkit-scrollbar{display:none}
.wk-cell{
position:relative;flex:0 0 auto;min-width:64px;padding:9px 8px 10px;border-radius:15px;
background:var(--gl-bg);border:1px solid var(--gl-bdr);
text-align:center;cursor:pointer;overflow:hidden;
transition:transform .12s,background .15s,border-color .15s;
}
.wk-cell:active{transform:scale(.95)}
.wk-cell.today{box-shadow:0 0 0 1.5px rgba(var(--acc-rgb),.55)}
.wk-cell-d{font-size:10px;font-weight:800;color:var(--text2);letter-spacing:.5px}
.wk-cell.today .wk-cell-d{color:var(--acc)}
.wk-cell-dot{width:7px;height:7px;border-radius:50%;margin:6px auto 4px;background:var(--sep)}
.wk-cell.assigned .wk-cell-dot{width:0;height:0;margin:0}
.wk-cell-l{font-size:11px;font-weight:700;line-height:1.15;margin-top:5px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:76px;color:var(--text)}
.wk-cell-l.empty{color:var(--text2);font-weight:500;opacity:.5}
.wk-cell-emoji{font-size:17px;line-height:1;margin-top:3px}
.wk-cell.dnd-over{border-color:var(--acc)!important;background:rgba(var(--acc-rgb),.16)!important;transform:scale(1.04)}
.ex-sec-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px 2px}
.ex-sec-title{font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--text)}
.ex-sec-actions{display:flex;align-items:center;gap:7px}
.ex-sec-tpl{
border:none;background:var(--g5);color:var(--text2);
font-size:13px;font-weight:700;padding:7px 13px;border-radius:11px;cursor:pointer;
transition:transform .1s,background .15s,color .15s;
}
.ex-sec-tpl:active{transform:scale(.94);color:var(--acc);background:rgba(var(--acc-rgb),.12)}
.ex-sec-add{
border:none;background:rgba(var(--acc-rgb),.12);color:var(--acc);
font-size:13px;font-weight:700;padding:7px 13px;border-radius:11px;cursor:pointer;
transition:transform .1s,background .15s;
}
.ex-sec-add:active{transform:scale(.94);background:rgba(var(--acc-rgb),.2)}
.split-card{
position:relative;display:flex;align-items:center;gap:11px;
padding:12px 12px 12px 15px;margin-bottom:9px;border-radius:17px;
background:var(--gl-bg);border:1px solid var(--gl-bdr);overflow:hidden;
transition:transform .12s;
}
.split-card:active{transform:scale(.99)}
.split-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--sc,var(--acc))}
.split-grab{color:var(--text2);font-size:17px;cursor:grab;touch-action:none;
-webkit-user-select:none;user-select:none;padding:2px 1px;opacity:.6;flex-shrink:0}
.split-grab:active{cursor:grabbing;opacity:1}
.split-emoji{width:42px;height:42px;border-radius:13px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:21px}
.split-main{flex:1;min-width:0}
.split-name{font-size:16px;font-weight:700;color:var(--text);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.split-meta{font-size:12px;color:var(--text2);margin-top:3px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.split-days{display:inline-flex;gap:3px}
.split-day-pill{font-size:9px;font-weight:800;letter-spacing:.3px;
padding:2px 5px;border-radius:6px;line-height:1;text-transform:uppercase}
.split-edit{border:none;background:transparent;color:var(--text2);font-size:16px;
padding:8px;cursor:pointer;flex-shrink:0}
.split-edit:active{opacity:.5}
.split-play{border:none;color:#fff;width:38px;height:38px;border-radius:12px;flex-shrink:0;
font-size:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;
transition:transform .1s}
.split-play:active{transform:scale(.9)}
.split-empty{padding:26px 20px;text-align:center;border-radius:17px;
background:var(--gl-bg);border:1px dashed var(--gl-bdr)}
.split-empty h3{font-size:16px;font-weight:700;color:var(--text);margin:0 0 5px}
.split-empty p{font-size:13px;color:var(--text2);line-height:1.5;margin:0}
.ex-db{margin:18px 20px 0;border-radius:17px;background:var(--gl-bg);border:1px solid var(--gl-bdr);overflow:hidden}
.ex-db-head{width:100%;border:none;background:transparent;display:flex;align-items:center;
justify-content:space-between;padding:14px 16px;cursor:pointer;text-align:left}
.ex-db-title{font-size:15px;font-weight:700;color:var(--text)}
.ex-db-count{color:var(--text2);font-weight:600;font-size:13px;margin-left:2px}
.ex-db-chev{color:var(--text2);font-size:20px;transition:transform .2s;transform:rotate(90deg)}
.ex-db.open .ex-db-chev{transform:rotate(-90deg)}
.ex-db-body{border-top:1px solid var(--sep)}
.ex-db .ex-search-wrap{margin-top:2px}
/* Farb- & Tage-Wahl im Split-Editor */
.sp-color-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:4px}
.sp-day-row{display:flex;gap:5px;margin-top:4px}
.sp-day{flex:1;text-align:center;padding:9px 0;border-radius:11px;border:1px solid var(--gl-bdr);
background:var(--gl-bg);font-size:12px;font-weight:800;color:var(--text2);cursor:pointer;transition:transform .1s}
.sp-day:active{transform:scale(.9)}
.sp-day.on{background:var(--acc);border-color:var(--acc);color:#fff}
.split-mono{width:42px;height:42px;border-radius:13px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff}
.da-opt{display:flex;align-items:center;gap:12px;padding:13px 14px;margin-bottom:8px;
border-radius:14px;background:var(--gl-bg);border:1px solid var(--gl-bdr);cursor:pointer;transition:transform .1s}
.da-opt:active{transform:scale(.98)}
.da-opt.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.07)}
.da-dot{width:14px;height:14px;border-radius:50%;flex-shrink:0}
.da-body{flex:1;min-width:0}
.da-name{font-size:15px;font-weight:700;color:var(--text)}
.da-sub{font-size:12px;color:var(--text2);margin-top:1px}
.da-chk{font-size:17px;font-weight:800;color:var(--acc);flex-shrink:0;width:20px;text-align:center}
.sp-color{width:30px;height:30px;border-radius:50%;cursor:pointer;position:relative;
border:2px solid transparent;transition:transform .1s}
.sp-color:active{transform:scale(.9)}
.sp-color.on{border-color:var(--text)}
.sp-color.on::after{content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;font-weight:800}
/* Freie Farbwahl: Regenbogen-Swatch öffnet den Picker */
.sp-color.sp-custom{background:conic-gradient(#FF375F,#FF9F0A,#FFD60A,#30D158,#64D2FF,#5E5CE6,#BF5AF2,#FF375F);
display:flex;align-items:center;justify-content:center}
.sp-color.sp-custom::before{content:'';width:11px;height:11px;border-radius:50%;background:var(--card,#fff);
box-shadow:0 0 0 1px rgba(0,0,0,.12) inset}
.sp-color.sp-custom.on::after{content:'';display:none}
.sp-color.sp-custom{overflow:hidden;display:inline-flex}
.sp-color.sp-custom input[type=color]{position:absolute;top:-7px;left:-7px;width:44px;height:44px;
opacity:0;border:0;padding:0;margin:0;cursor:pointer}
/* Das 1px-Randlicht darf NICHT auf dem scrollenden Sheet liegen: es ist so hoch
wie der sichtbare Bereich, wandert beim Scrollen aber mit dem Inhalt nach oben
und zieht seine Unterkante quer durch das Formular — die "zufaellige Linie",
die Beta-Tester gemeldet haben. Das Sheet hat ohnehin einen echten Rahmen. */
.sheet::before{display:none!important}
/* ── FOKUS-MODUS IM TRAINING ──
Einrasten: proximity, nie mandatory — hohe Karten (4+ Saetze) bleiben frei
durchscrollbar, Notizfeld und Finish-Button unten bleiben normal erreichbar.
Snap-Areas gibt es nur an .ex-card; Step 1 (Uebungswahl) hat keine → kein Effekt. */
/* Das Training scrollt FREI — kein Einrasten, kein seitenweises Blaettern.
Der Versuch, daraus einen Pager zu machen (touch-action:none plus ein
Wisch-Schrittwerk in JS), nahm dem Blatt das native Scrollen und damit jede
Robustheit: eine einzige Luecke in der Gestenkette legte die ganze Ansicht
lahm. Zurueck auf das, was die Engine von sich aus gut kann.
--wk-snap-pad bleibt: die Zahl beschreibt, wie viel der klebende Kopf
(#wk-sticky) verdeckt, und danach richten sich weiterhin die Fokus-Schicht
und das Einblenden der Coach-Vorschlagskarte. */
#ov-wk .sheet{scroll-padding-top:var(--wk-snap-pad,72px)}
/* Dimmen nur, wenn die Fokus-Schicht aktiv ist (>= 2 Karten).
WICHTIG — warum das Dimmen am INHALT haengt und nicht an der Karte:
.ex-card traegt backdrop-filter. Aendert sich die Deckkraft (oder die Groesse)
der Karte selbst, muss WebKit den Weichzeichner des Untergrundes fuer jeden
Frame der Blende neu rechnen, und zwar fuer JEDE Karte, die gerade wechselt.
Genau das machte den Fokuswechsel zaeh und das Geraet warm. Faden nur Kopf
und Koerper, bleibt die Kartenebene unveraendert und der Blur zwischen-
gespeichert. Aus demselben Grund gibt es keine Skalierung mehr: sie zwang die
Ebene bei jedem Wechsel zur Neurasterung. */
#log-cards .ex-card>.ex-head,#log-cards .ex-card>.ex-body{
transition:opacity .22s cubic-bezier(.33,1,.68,1)}
#log-cards.focus-on .ex-card.dimmed>.ex-head,
#log-cards.focus-on .ex-card.dimmed>.ex-body{opacity:.42}
/* ── Die eingerastete Karte ──
Sie traegt einen Akzentrahmen und steht 2 px hoeher. Das Anheben laeuft ueber
transform und nicht ueber margin: nur so bleibt es eine Bewegung im
Compositor statt eines Umbruchs der ganzen Liste.
Das :not() ist kein Schmuck: diese Regel traegt eine ID und wuerde sonst die
Kurven des Wischens (.is-swiping, .swipe-removing) ueberstimmen — die Karte
liefe beim Loeschen nicht mehr sauber hinaus. Wer die Karte gerade in der
Hand hat, faehrt sie allein.
Der Schatten wird NICHT mehr mitanimiert. Ein 30-px-Schlagschatten ueber
die ganze Kartenbreite ist ein Vollrepaint je Bild — und das lief bei jedem
Einrasten 220 ms lang, auf der ein- wie der ausrastenden Karte. Bewegt wird
nur noch, was der Compositor allein kann: transform und Rahmenfarbe.
Auch KEIN dauerhaftes will-change: es haelt fuer jede Karte eine eigene
Ebene im Speicher, obwohl sich meist keine bewegt. */
#log-cards.focus-on .ex-card:not(.is-swiping):not(.swipe-removing){
transition:transform .22s cubic-bezier(.33,1,.68,1),border-color .22s ease}
#log-cards.focus-on .ex-card.locked:not(.is-swiping):not(.swipe-removing){
border-color:rgba(var(--acc-rgb),.52);
transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){
#log-cards .ex-card>.ex-head,#log-cards .ex-card>.ex-body{transition:none}
}
/* ── TABBAR — iOS 26 LIQUID GLASS ── */
.tabbar{
position:fixed;bottom:calc(6px + var(--sab));
/* Gestaucht: rechts bleibt Platz für die angedockte KI-Bubble (#ai-bubble),
sonst volle Breite ausnutzen */
left:14px;right:90px;transform:none;
width:auto;max-width:none;
background:rgba(255,255,255,0.55);
backdrop-filter:blur(40px) saturate(180%);
-webkit-backdrop-filter:blur(40px) saturate(180%);
border:1px solid rgba(255,255,255,0.55);
border-radius:999px;
box-shadow:0 8px 32px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05),
inset 0 1px 0 rgba(255,255,255,.70);
display:flex;align-items:center;z-index:1000;padding:11px;
transition:background .4s;
overflow:hidden;
}
[data-glass="off"] .tabbar{
background:rgba(245,245,247,.92);
backdrop-filter:none;-webkit-backdrop-filter:none;
box-shadow:0 2px 24px rgba(0,0,0,.10),var(--gl-hi);
}
[data-theme="dark"] .tabbar{
background:rgba(94,94,104,.44);
border-color:rgba(255,255,255,.12);
box-shadow:0 8px 32px rgba(0,0,0,.40),0 2px 8px rgba(0,0,0,.25),
inset 0 1px 0 rgba(255,255,255,.12);
}
.tabbar::after{
content:'';position:absolute;top:0;left:0;right:0;height:44%;
background:linear-gradient(180deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 100%);
pointer-events:none;border-radius:999px 999px 0 0;
}
[data-theme="dark"] .tabbar::after{
background:linear-gradient(180deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 100%);
}
[data-glass="off"] .tabbar::after{display:none}
/* iOS 26: Glaslinsen-Randlicht – Lichtkanal oben + subtiler Reflex unten */
.tabbar::before{
content:'';position:absolute;inset:0;border-radius:999px;padding:1px;
background:linear-gradient(160deg,
rgba(255,255,255,.70) 0%,rgba(255,255,255,.18) 30%,
transparent 55%,rgba(255,255,255,.22) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
pointer-events:none;z-index:2;
}
[data-theme="dark"] .tabbar::before{
background:linear-gradient(160deg,
rgba(255,255,255,.18) 0%,rgba(255,255,255,.05) 30%,
transparent 55%,rgba(255,255,255,.06) 100%);
}
[data-glass="off"] .tabbar::before{display:none}
.tab{
flex:1;display:flex;flex-direction:column;align-items:center;
padding:8px 4px 9px;gap:2px;cursor:pointer;border:none;
background:none;color:var(--text2);
transition:color .22s,opacity .22s;
font-family:inherit;border-radius:22px;
position:relative;z-index:1;
opacity:0.55;
}
/* Monochrome Leiste: der aktive Tab traegt KEINE Akzentfarbe mehr, sondern
volle Deckkraft in der Textfarbe. Die Mulde darunter sagt, wo man steht;
Farbe UND Fuellung UND Deckkraft sagten dreimal dasselbe. */
.tab.on{
color:var(--text);
opacity:1;
}
/* Ruhige Leiste: kein Icon-Pop beim Tab-Wechsel. Nur kurzes Eindruecken
waehrend der Beruehrung, ohne Overshoot-Kurve — die federte beim Loslassen
nach und las sich als Wackeln. */
.tab svg{width:22px;height:22px;will-change:transform;transition:transform .16s ease}
.tab span{font-size:10px;font-weight:600;letter-spacing:.1px}
.tab:active svg{transform:scale(.9)}
/* Die Coach-Karte im Raster: sie fuellt ihre Zelle. Der Aussenabstand der
freistehenden Karte (margin-bottom) faellt weg — im Raster sorgt die Luecke
des Rasters fuer den Abstand, sonst stuende sie schief zwischen den anderen. */
.hw-content>#coach-today-card{height:100%;min-height:0}
#coach-today-card>.aic{margin:0;height:100%;display:flex;flex-direction:column}
#coach-today-card>.aic>.aic-in{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
/* Klein: nur Ring und Name. Der Ring rueckt in die Mitte, der Kopf wird schmal. */
.aic-sm .aic-in{padding:9px 10px 10px}
.aic-sm .aic-main{margin-top:6px;justify-content:center}
.aic-sm .aic-left{flex:1;align-items:center}
.aic-sm .aic-lbl{font-size:10px;letter-spacing:.6px}
/* Mittel: Ring plus Schlagzeile, kein Coach-Satz. */
.aic-md .aic-in{padding:10px 11px 11px}
/* Netzdiagramm der Erfolge: quadratische Flaeche, damit das Netz rund bleibt —
ein gestrecktes Netz liest sich als Verzerrung der Werte. */
.erf-radar-card{padding:12px 10px 6px}
.erf-radar-wrap{position:relative;height:min(78vw,330px)}
/* Beruehrungen gehen durch: die Flaeche nimmt keine Eingabe entgegen. */
#erf-radar{pointer-events:none}
.erf-radar-legend{display:flex;align-items:center;gap:14px;padding:2px 6px 6px;
font-size:11px;font-weight:700;color:var(--text2)}
.erf-radar-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.erf-radar-legend i.jetzt{background:var(--acc)}
.erf-radar-legend i.start{background:#41d869}
.erf-radar-legend .hint{margin-left:auto;font-weight:600;opacity:.75}
/* Kennzahl ueber der Volumenkurve: die Zahl traegt, der Pfeil ordnet ein. */
.stats-vol-kopf{display:flex;align-items:baseline;gap:6px;margin:-2px 0 2px;min-height:22px}
.stats-vol-kopf b{font-size:19px;font-weight:900;letter-spacing:-.5px;color:var(--text);
font-variant-numeric:tabular-nums}
.stats-vol-kopf i{font-style:normal;font-size:11px;font-weight:800;letter-spacing:-.1px}
.stats-vol-kopf i.up{color:var(--green)}
.stats-vol-kopf i.dn{color:var(--text2)}
/* ── GLASS CARD ── */
.card{
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
border-radius:var(--r-lg);
border:1px solid var(--gl-bdr);
box-shadow:var(--gl-shad),var(--gl-hi);
overflow:hidden;
transition:background .4s;
position:relative;
}
.card::after{
content:'';position:absolute;top:0;left:0;right:0;height:68px;
background:var(--sheen);pointer-events:none;border-radius:22px 22px 0 0;
}
/* ── LIQUID-GLASS RANDLICHT (visionOS / macOS-Tahoe) ──
Geschliffene Glaskante: heller Lichtstreif oben-links, der zur Mitte
ausläuft und unten dezent wiederkommt. Ersetzt den sichtbaren Rahmen —
die Karte wirkt wie eine Scheibe mit gebrochener Lichtkante, nicht wie Box. */
.card::before,.hw-card::before,.hw-quick::before,.ex-card::before,
.companion-card::before,.sheet::before,.btn-gray::before{
content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;
background:linear-gradient(150deg,
rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 24%,
transparent 50%,rgba(255,255,255,.06) 76%,rgba(255,255,255,.20) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
pointer-events:none;z-index:3;
}
[data-theme="dark"] .card::before,[data-theme="dark"] .hw-card::before,
[data-theme="dark"] .hw-quick::before,[data-theme="dark"] .ex-card::before,
[data-theme="dark"] .companion-card::before,[data-theme="dark"] .sheet::before,
[data-theme="dark"] .btn-gray::before{
background:linear-gradient(150deg,
rgba(255,255,255,.60) 0%,rgba(255,255,255,.14) 22%,
transparent 48%,rgba(255,255,255,.05) 74%,rgba(255,255,255,.16) 100%);
}
[data-glass="off"] .card::before,[data-glass="off"] .hw-card::before,
[data-glass="off"] .hw-quick::before,[data-glass="off"] .ex-card::before,
[data-glass="off"] .companion-card::before,[data-glass="off"] .sheet::before,
[data-glass="off"] .btn-gray::before{display:none}
/* ── SECTION TITLE ── */
.s-title{
font-size:13px;font-weight:600;color:var(--text2);
text-transform:uppercase;letter-spacing:.06em;
margin-bottom:10px;padding-left:2px;
}
/* ── ROWS ── */
.row{
display:flex;align-items:center;
padding:14px 16px;gap:13px;
border-bottom:1px solid var(--sep);
transition:background .12s;
position:relative;z-index:1;
}
.row:last-child{border-bottom:none}
.row.tap{cursor:pointer}
.row.tap:active{background:rgba(120,120,128,.08)}
.ico{
width:46px;height:46px;border-radius:var(--r-md);font-size:26px;
display:flex;align-items:center;justify-content:center;flex-shrink:0;
background:var(--g5);
border:1px solid var(--gl-bdr2);
box-shadow:none;
}
.row-body{flex:1;min-width:0}
.row-title{font-size:16px;font-weight:600}
.row-sub{font-size:13px;color:var(--text2);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{color:var(--text2);font-size:18px;opacity:.5}
/* ── BUTTONS ── */
.btn{
border:none;border-radius:16px;padding:16px;
font-size:17px;font-weight:700;
width:100%;cursor:pointer;font-family:inherit;
transition:transform .13s,opacity .15s;display:block;
position:relative;overflow:hidden;
}
.btn::after{
content:'';position:absolute;top:0;left:0;right:0;height:50%;
background:transparent;
pointer-events:none;
}
.btn:active{transform:scale(.97);opacity:.84}
.btn-acc{
background:
linear-gradient(180deg,rgba(255,255,255,.26),rgba(255,255,255,0) 46%),
linear-gradient(160deg,rgba(var(--acc-rgb),1) 0%,rgba(var(--acc-rgb),.84) 100%);
color:#fff;
box-shadow:0 1px 2px rgba(var(--acc-rgb),.30),0 8px 22px rgba(var(--acc-rgb),.34),
inset 0 1px 0 rgba(255,255,255,.38),inset 0 -6px 14px rgba(0,0,0,.10);
}
.btn-gray{
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
border:1px solid var(--gl-bdr);
color:var(--text);
box-shadow:var(--gl-shad),var(--gl-hi);
}
.btn-danger{
background:rgba(255,59,48,.11);
border:1px solid rgba(255,59,48,.22);
color:var(--red);
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
}
.btn-sm{padding:10px 16px;font-size:14px;border-radius:13px}
/* ── OVERLAY / BOTTOM SHEET ── */
.ov{
position:fixed;inset:0;
background:rgba(0,0,0,.5);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
z-index:900;display:none;align-items:flex-end;
}
[data-theme="dark"] .ov{ background:rgba(0,0,0,.5); }
.ov.on{display:flex}
/* Offenes Sheet = modal: Tabbar (z 1000) und KI-Bubble (z 1060) liegen über dem
Scrim (z 900) und blieben klickbar → Taps am unteren Rand wechselten im
Hintergrund den Tab / öffneten das KI-Menü. Klasse setzt _aibSyncVisibility()
(openOv/closeOv) — :has() griff in der WKWebView nicht zuverlässig.
Ausnahme ov-wk (aktives Training): Tab-Wechsel ist da gewollt. */
body.sheet-modal .tabbar,
body.sheet-modal #ai-bubble{pointer-events:none}
.sheet{
/* Deckende Basis UNTER dem Glas-Verlauf. --gl-bg-h ist im Dark Mode nur
5–10 % deckend; greift backdrop-filter in der WKWebView nicht, schien
der Bildschirm dahinter durch — fremde Chips und Rahmenkanten mitten
im Sheet ("random line running down the middle"). */
background-color:var(--card);
/* KEIN Verlauf: WebKit rendert linear-gradient auf hohen, scrollenden
Containern kachelweise — an der Kachelgrenze blieb eine sichtbare Kante
quer durch den Inhalt stehen (Harveys "random line"). */
background-image:none;
/* KEIN backdrop-filter: Der Hintergrund ist deckend, es gaebe nichts zu
blurren — WebKit zog aber auf dem hohen, scrollenden Sheet eine sichtbare
Kachelgrenze quer durch den Inhalt (Harveys "random line running down the
middle"). Ohne den Filter verschwindet die Kante, der Glas-Look kommt
weiterhin aus dem Verlauf darueber. */
border-radius:var(--r-xl) var(--r-xl) 0 0;
border:1px solid var(--gl-bdr);
border-bottom:none;
width:100%;max-height:92vh;max-height:min(92vh,var(--sheet-cap));
overflow-y:auto;overflow-x:hidden;
padding-bottom:calc(100px + var(--sab)); /* Platz für die schwebende Leiste */
animation:up .28s cubic-bezier(.32,1,.32,1);
box-shadow:0 -8px 48px rgba(0,0,0,.18),var(--gl-hi);
transition:background .4s;
position:relative;
}
.sheet::after{
content:'';position:absolute;top:0;left:0;right:0;height:110px;
background:var(--sheen);pointer-events:none;border-radius:var(--r-xl) var(--r-xl) 0 0;
}
@keyframes up{from{transform:translateY(100%)}}
/* Dark Mode: große Overlay-Flächen (Bottom-Sheets, Trainingskalender) als
DUNKLES Milchglas — dunkler Tint statt weißem Schleier + kräftiger Blur.
Glaseffekt bleibt erhalten, Inhalt dahinter nur noch gedämpft sichtbar,
dadurch alles gut lesbar. */
[data-theme="dark"] .sheet,
[data-theme="dark"] .cal-card,
[data-theme="dark"] .mus-card,
/* Die klebende Fussleiste der Coach-Einrichtung liegt UEBER dem Inhalt und muss
denselben Grund tragen wie das Sheet selbst — mit dem hellen --gl-bg-h aus der
Grundregel schien im Dunkelmodus der Text darunter durch. */
[data-theme="dark"] #cst-nav,
[data-theme="dark"] .vol-card{
/* Wirklich schwarz — blendet mit dem schwarzen Hintergrund, hebt sich nicht
als helle Fläche ab. Feiner Rand (--gl-bdr) grenzt das Sheet ab, Text bleibt
voll lesbar. Kaum Sättigung → kein blauer/farbiger Schimmer. */
background:linear-gradient(180deg,rgba(9,9,12,.93) 0%,rgba(4,4,7,.96) 100%);
backdrop-filter:blur(30px) saturate(108%);
-webkit-backdrop-filter:blur(30px) saturate(108%);
}
.sh-handle{
/* breites, unsichtbares Touch-Ziel */
width:100%;height:28px;flex-shrink:0; /* in Flex-Column-Cards nicht schrumpfen */
display:flex;align-items:center;justify-content:center;
margin:0;padding:0;
position:relative;z-index:1;
cursor:grab;
touch-action:none; /* Browser soll hier kein Scroll starten */
-webkit-tap-highlight-color:transparent;
}
.sh-handle::after{
/* sichtbarer Strich */
content:'';
width:40px;height:5px;
background:var(--sep);
border-radius:2.5px;
pointer-events:none;
}
.sh-handle:active{cursor:grabbing}
.sh-head{
display:flex;justify-content:space-between;align-items:center;
padding:6px 20px 16px;position:relative;z-index:1;
}
.sh-head h2{font-size:20px;font-weight:700}
.x-btn{
background:var(--g5);border:none;border-radius:50%;
width:30px;height:30px;display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--text2);font-size:13px;font-weight:600;
transition:opacity .15s;
}
.x-btn:active{opacity:.6}
/* Text-Variante des runden Header-Buttons: border-radius:50% ergibt bei
width:auto eine Ellipse — hier stattdessen die App-typische Pillen-Kachel. */
.x-btn-txt{
width:auto;height:30px;padding:0 12px;
border-radius:11px;font-size:13px;font-weight:700;
}
/* ── FORM ── */
.f-label{
font-size:12px;font-weight:700;color:var(--text2);
text-transform:uppercase;letter-spacing:.5px;
display:block;margin-bottom:7px;
}
.f-in{
background:var(--inp-bg);
border:1px solid var(--gl-bdr);
border-radius:var(--r-md);padding:14px 16px;
font-size:17px;font-family:inherit;width:100%;
outline:none;color:var(--text);
transition:background .2s,border-color .2s,box-shadow .2s;
}
.f-in:focus{
background:var(--inp-focus);
border-color:var(--acc);
box-shadow:0 0 0 3px rgba(var(--acc-rgb),.15);
}
.f-in::placeholder{color:var(--text2)}
.f-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.f-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.f-row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.scheme-seg{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.scheme-desc{font-size:11px;color:var(--text2);margin-top:7px;line-height:1.35}
.f-field{margin-bottom:16px}
/* ── EMOJI GRID ── */
.emo-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:0 20px 12px}
.emo-btn{
width:100%;aspect-ratio:1;border-radius:14px;
border:1.5px solid transparent;
background:var(--g5);
font-size:22px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:transform .15s,background-color .15s,background .15s,color .15s,border-color .15s,box-shadow .15s,opacity .15s;
}
.emo-btn.on{
border-color:var(--acc);
background:var(--soft);
box-shadow:0 0 0 2px rgba(var(--acc-rgb),.22);
}
/* ── ICON-PICKER KATEGORIEN ── */
.icon-cat-scroll{
display:flex;gap:8px;overflow-x:auto;
padding:0 20px 14px;
scrollbar-width:none;-ms-overflow-style:none;
}
.icon-cat-scroll::-webkit-scrollbar{display:none}
.icat{
flex-shrink:0;
background:var(--gl-bg-t);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid var(--gl-bdr);
border-radius:20px;padding:6px 14px;
font-size:13px;font-weight:600;color:var(--text2);
cursor:pointer;white-space:nowrap;font-family:inherit;
transition:transform .18s,background-color .18s,background .18s,color .18s,border-color .18s,box-shadow .18s,opacity .18s;
}
.icat.on{
background:var(--acc);color:#fff;
border-color:var(--acc);
box-shadow:0 2px 8px rgba(var(--acc-rgb),.32);
}
.icat-drag{cursor:grab;touch-action:pan-x;-webkit-user-select:none;user-select:none}
.icat-drag:active{cursor:grabbing}
/* ── FILTER-MODUS SWITCHER (iOS Segmented Control) ── */
.fmode-wrap{
display:flex;
background:var(--g5);
border-radius:14px;
padding:3px;
margin:14px 20px 6px;
gap:2px;
position:relative;
}
.fmode-btn{
flex:1;
background:transparent;
border:none;
padding:8px 6px;
font-size:12px;font-weight:600;
color:var(--text2);
border-radius:11px;
cursor:pointer;
font-family:inherit;
letter-spacing:.1px;
transition:color .18s, background .22s, box-shadow .22s, transform .15s;
-webkit-tap-highlight-color:transparent;
}
.fmode-btn:active{transform:scale(.96)}
.fmode-btn.on{
background:var(--seg-on);
color:var(--text);
box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.03);
}
/* ── Gleitende Pille (nur .fmode-slide, gesetzt am Statistik-Umschalter) ──
Die Pille ist ein eigenes Element hinter den Beschriftungen statt der
Hintergrund des aktiven Knopfes: nur so kann sie von einem Feld zum
anderen wandern — ein Hintergrund kann nicht von einem Element zum
naechsten animieren, er kann nur ein- und ausblenden.
Masse kommen aus dem JS (_fmodeSyncThumb), weil die Felder je nach
Beschriftung unterschiedlich breit sind. left:0 ist die Innenkante des
Rahmens — dieselbe Bezugskante wie offsetLeft, darum passt translateX
ohne Korrektur um das Polster. */
.fmode-wrap.fmode-slide .fmode-btn{position:relative;z-index:1}
.fmode-wrap.fmode-slide .fmode-btn.on{background:transparent;box-shadow:none}
.fmode-thumb{
position:absolute;top:3px;bottom:3px;left:0;width:0;
border-radius:11px;background:var(--seg-on);
box-shadow:0 1px 3px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.03);
transform:translateX(0);pointer-events:none;
/* Die Kurve der iOS-Segmente: schnell los, weich ankommen. */
transition:transform .34s cubic-bezier(.32,.72,0,1),width .34s cubic-bezier(.32,.72,0,1);
}
/* Erster Sitz nach dem Aufbau: hinsetzen, nicht von links hereinfahren. */
.fmode-thumb.fmode-nofx{transition:none}
@media (prefers-reduced-motion:reduce){.fmode-thumb{transition:none}}
.fmode-btn.fmode-add{flex:0 0 auto;padding:8px 10px;color:var(--acc);font-size:16px;font-weight:700;line-height:1}
.fmode-edit{margin-left:6px;opacity:.55;font-size:11px;font-weight:600;cursor:pointer;display:inline-block;padding:0 2px}
.fmode-edit:hover{opacity:1;color:var(--acc)}
.is-disabled{opacity:.5;pointer-events:none}
.icon-full-grid{
display:grid;grid-template-columns:repeat(7,1fr);
gap:6px;padding:0 20px 24px;
overflow-y:auto;
}
.icon-full-grid .emo-btn{font-size:26px}
/* ── BEGLEITER-PICKER ── */
.companion-grid{
display:grid;grid-template-columns:1fr 1fr;
gap:12px;padding:4px 20px 24px;
}
.companion-card{
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
border:1.5px solid var(--gl-bdr);
border-radius:22px;padding:18px 12px 14px;
text-align:center;cursor:pointer;
position:relative;overflow:hidden;
transition:transform .2s,background-color .2s,background .2s,color .2s,border-color .2s,box-shadow .2s,opacity .2s;
box-shadow:var(--gl-shad),var(--gl-hi);
}
.companion-card::after{
content:'';position:absolute;top:0;left:0;right:0;height:68px;
background:var(--sheen);pointer-events:none;border-radius:22px 22px 0 0;
}
.companion-card.on{
border-color:var(--acc);
background:var(--soft);
box-shadow:0 0 0 2.5px rgba(var(--acc-rgb),.25),var(--gl-shad);
}
.companion-card.locked{opacity:.52;cursor:default}
.companion-card:active:not(.locked){transform:scale(.96);opacity:.85}
.cc-ico{font-size:44px;margin-bottom:8px;display:block;line-height:1}
.cc-name{font-size:15px;font-weight:700;position:relative;z-index:1}
.cc-sub{font-size:12px;color:var(--text2);margin-top:3px;position:relative;z-index:1}
.cc-chk{
position:absolute;top:10px;right:10px;
background:var(--acc);color:#fff;
width:22px;height:22px;border-radius:50%;
font-size:12px;font-weight:700;
display:flex;align-items:center;justify-content:center;
z-index:2;box-shadow:0 2px 6px rgba(var(--acc-rgb),.4);
}
.cc-lock{
position:absolute;top:10px;right:10px;
font-size:15px;opacity:.55;z-index:2;
}
/* ── TOGGLE SWITCH ── */
.tgl-wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.tgl{position:relative;width:50px;height:28px;flex-shrink:0;}
.tgl input{opacity:0;width:0;height:0;position:absolute}
.tgl-track{
position:absolute;inset:0;border-radius:14px;
background:var(--sep);transition:background .22s;cursor:pointer;
}
.tgl input:checked + .tgl-track{background:var(--acc)}
.tgl-track::after{
content:'';position:absolute;
top:3px;left:3px;width:22px;height:22px;
border-radius:50%;background:#fff;
box-shadow:0 1px 4px rgba(0,0,0,.25);
transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.tgl input:checked + .tgl-track::after{transform:translateX(22px)}
/* ── WORKOUT LOG CARDS ── */
.ex-card{
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
border:1px solid var(--gl-bdr);
border-radius:22px;overflow:hidden;
margin-bottom:12px;
box-shadow:var(--gl-shad),var(--gl-hi);
transition:background .4s;
position:relative;
}
.ex-card::after{
content:'';position:absolute;top:0;left:0;right:0;height:68px;
background:var(--sheen);pointer-events:none;border-radius:22px 22px 0 0;
}
.ex-head{
display:flex;justify-content:space-between;align-items:center;
padding:14px 16px;border-bottom:1px solid var(--sep);
position:relative;z-index:1;gap:8px;
}
.ex-title{font-size:17px;font-weight:700;flex:1;min-width:0}
.wk-drag-handle{
display:inline-flex;align-items:center;justify-content:center;
width:24px;height:28px;color:var(--text2);font-size:18px;
cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
-webkit-tap-highlight-color:transparent;letter-spacing:-3px;
opacity:.55;flex-shrink:0;
}
.wk-drag-handle:active{opacity:1;cursor:grabbing}
.ex-card.dnd-wk-over{
box-shadow:0 0 0 2px var(--acc),0 8px 24px rgba(var(--acc-rgb),.18);
transform:scale(1.01);
}
.ex-body{padding:10px 16px 16px;position:relative;z-index:1}
.set-hdr{display:grid;grid-template-columns:28px 1fr 1fr 30px 26px;gap:8px;padding:2px 0 8px}
.set-hdr span{font-size:11px;font-weight:700;color:var(--text2);text-transform:uppercase;text-align:center;letter-spacing:.4px}
.set-row{display:grid;grid-template-columns:28px 1fr 1fr 30px 26px;gap:8px;align-items:center;padding:4px 0;transition:opacity .2s}
.set-n{font-size:14px;font-weight:600;color:var(--text2);text-align:center;transition:opacity .2s}
.set-pr-star{font-size:13px;line-height:1;display:inline-block;animation:prStarPop .5s ease}
@keyframes prStarPop{0%{transform:scale(0) rotate(-30deg)}60%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1) rotate(0)}}
.set-row.done .set-n,.set-row.done .set-in{opacity:.38}
/* ══ BEWEGUNGEN IM SATZ-LOG ══════════════════════════════════════════════
Vier Rueckmeldungen, jede an genau der Stelle, an der die Handlung
passiert ist. Alle laufen ueber transform, opacity und box-shadow — nichts
davon bricht die Seite neu um, das Blatt scrollt waehrenddessen ruhig
weiter. Alle vier haengen an einer Notiz aus dem JS (_wkNeueZeile, _wkTick,
_wkWert), nicht an einem Dauerzustand: das Satz-Log wird als Zeichenkette
neu gebaut, jede Zeile ist danach ein frisches Element — eine Animation an
.done liefe sonst bei jedem Neuzeichnen auf allen erledigten Zeilen
gleichzeitig los, also als Flackern statt als Bestaetigung. */
/* 1 · Die neu dazugekommene Zeile faehrt auf ("+ Satz", Top-Satz des
Coaches). Der kurze Akzentschimmer sagt: DAS ist die neue Zeile. */
@keyframes setRowIn{
from{opacity:0;transform:translateY(-8px);max-height:0}
40%{opacity:1}
to{opacity:1;transform:none;max-height:120px}
}
/* position:relative ist Pflicht und kein Schmuck: ohne sie bezoege sich das
::after auf .ex-card (die naechste positionierte Vorfahrin) und der
Schimmer legte sich ueber die GANZE Karte statt ueber eine Zeile. */
.set-row-neu{position:relative;animation:setRowIn .34s cubic-bezier(.22,.9,.3,1)}
.set-row-neu::after{
content:'';position:absolute;inset:0;border-radius:12px;pointer-events:none;
background:rgba(var(--acc-rgb),.16);
animation:setRowGlow .9s ease-out forwards;
}
@keyframes setRowGlow{from{opacity:1}to{opacity:0}}
/* 2 · Die geloeschte Zeile faehrt hinaus, BEVOR gerechnet wird. Vorher
verschwand sie schlagartig und alles darunter sprang hoch. */
.set-row-weg{
overflow:hidden;pointer-events:none;
animation:setRowOut .24s cubic-bezier(.4,0,1,1) forwards;
}
@keyframes setRowOut{
from{opacity:1;transform:none;max-height:120px}
to{opacity:0;transform:translateX(-16%);max-height:0;padding-top:0;padding-bottom:0}
}
/* 3 · Der Haken ploppt auf, wenn ein Satz erledigt ist — nur der eben
gesetzte, nie alle auf einmal. */
@keyframes chkPop{0%{transform:scale(.55)}55%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes chkTick{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
.set-chk.just-done{animation:chkPop .34s cubic-bezier(.34,1.56,.64,1)}
.set-chk.just-done svg{animation:chkTick .3s ease-out}
/* 4 · Das Feld, in dem der Wert des Rades gelandet ist, blinkt einmal auf.
Ohne das ist bei vier gleich aussehenden Zeilen nicht zu sehen, WO die
neue Zahl gelandet ist. */
@keyframes valSet{
from{box-shadow:0 0 0 2px rgba(var(--acc-rgb),.60)}
to{box-shadow:0 0 0 2px rgba(var(--acc-rgb),0)}
}
.set-in-btn.just-set{animation:valSet .6s ease-out}
/* 5 · "+ Satz" gibt beim Druecken nach — bisher der einzige Knopf in der
Karte ganz ohne Reaktion. */
.add-set-btn{transition:transform .14s ease,opacity .14s ease}
.add-set-btn:active{transform:scale(.96);opacity:.6}
@media (prefers-reduced-motion:reduce){
.set-row-neu,.set-row-neu::after,.set-row-weg,
.set-chk.just-done,.set-chk.just-done svg,.set-in-btn.just-set{animation:none}
.add-set-btn{transition:none}
}
.set-chk{
width:26px;height:26px;border-radius:50%;border:2px solid var(--text2);
background:none;display:flex;align-items:center;justify-content:center;
cursor:pointer;flex-shrink:0;padding:0;
transition:background .18s,border-color .18s,transform .12s;
}
.set-chk:active{transform:scale(.86)}
.set-chk svg{width:12px;height:10px;opacity:0;transition:opacity .15s;stroke:#fff;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.set-chk.done{background:var(--green);border-color:var(--green)}
.set-chk.done svg{opacity:1}
.set-in{
background:var(--inp-bg);
border:1px solid var(--gl-bdr);
border-radius:12px;padding:10px 4px;
font-size:16px;font-family:inherit;text-align:center;
outline:none;color:var(--text);width:100%;
transition:background .15s,border-color .15s,box-shadow .15s;
}
.set-in:focus{
background:var(--inp-focus);
border-color:var(--acc);
box-shadow:0 0 0 2px rgba(var(--acc-rgb),.16);
}
/* Vorgeschlagener (nicht eingetragener) Wert: bewusst blass + gestrichelt,
damit klar ist, dass es nur ein Vorschlag ist – nicht selbst eingetragen. */
.set-in.is-sug{
color:var(--text2);
font-weight:400;
opacity:.45;
background:transparent;
border-style:dashed;
border-color:var(--gl-bdr);
}
.set-in-btn{
cursor:pointer;-webkit-tap-highlight-color:transparent;
font-weight:600;line-height:1.1;min-height:42px;
display:flex;align-items:center;justify-content:center;
}
.set-in-btn:active{transform:scale(.97)}
.set-in-ph{color:var(--text2);opacity:.5;font-weight:400}
.ex-title-tap{cursor:pointer;-webkit-tap-highlight-color:transparent}
.ex-title-tap:active{opacity:.6}
.ex-info-btn{
width:22px;height:22px;border-radius:50%;
background:rgba(var(--acc-rgb),.14);
border:1px solid rgba(var(--acc-rgb),.3);
color:var(--acc);font-size:13px;font-weight:700;font-family:inherit;
cursor:pointer;display:flex;align-items:center;justify-content:center;
flex-shrink:0;padding:0;-webkit-tap-highlight-color:transparent;
}
.ex-info-btn:active{transform:scale(.92)}
.ex-swap-btn{
width:26px;height:26px;border-radius:50%;
background:rgba(var(--acc-rgb),.14);
border:1px solid rgba(var(--acc-rgb),.3);
color:var(--acc);font-size:14px;font-family:inherit;
cursor:pointer;display:flex;align-items:center;justify-content:center;
flex-shrink:0;padding:0;-webkit-tap-highlight-color:transparent;line-height:1;
}
.ex-swap-btn:active{transform:scale(.92) rotate(-30deg)}
.ex-chart-btn{
width:26px;height:26px;border-radius:50%;
background:rgba(var(--acc-rgb),.14);
border:1px solid rgba(var(--acc-rgb),.3);
color:var(--acc);
cursor:pointer;display:flex;align-items:center;justify-content:center;
flex-shrink:0;padding:0;-webkit-tap-highlight-color:transparent;line-height:1;
}
.ex-chart-btn svg{width:15px;height:15px;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;fill:none}
.ex-chart-btn:active{transform:scale(.92)}
/* ── Wheel-Picker (Apple-Style) ── */
.wheel-wrap{
display:flex;justify-content:center;gap:14px;padding:8px 20px 16px;
position:relative;
}
.wheel-col{
position:relative;flex:1;max-width:160px;height:220px;
background:var(--inp-bg);
border:1px solid var(--gl-bdr);border-radius:18px;overflow:hidden;
}
.wheel-col::before,.wheel-col::after{
content:'';position:absolute;left:0;right:0;height:88px;pointer-events:none;z-index:2;
}
.wheel-col::before{top:0;background:linear-gradient(to bottom, var(--bg) 0%, transparent 100%);opacity:.85}
.wheel-col::after{bottom:0;background:linear-gradient(to top, var(--bg) 0%, transparent 100%);opacity:.85}
.wheel-center{
position:absolute;left:8px;right:8px;top:50%;transform:translateY(-50%);
height:44px;border-top:1px solid rgba(var(--acc-rgb),.4);
border-bottom:1px solid rgba(var(--acc-rgb),.4);
pointer-events:none;z-index:1;
background:rgba(var(--acc-rgb),.06);border-radius:8px;
}
.wheel-list{
position:relative;z-index:3;
height:100%;overflow-y:auto;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
scroll-behavior:auto;
}
.wheel-list::-webkit-scrollbar{display:none}
.wheel-item{
height:44px;display:flex;align-items:center;justify-content:center;
font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;
color:var(--text2);transition:color .15s,font-size .15s;
}
.wheel-item.center{color:var(--acc);font-size:26px;font-weight:700}
.wheel-label{
font-size:12px;font-weight:600;color:var(--text2);
text-align:center;margin-top:6px;letter-spacing:.4px;text-transform:uppercase;
}
/* ── Wheel: Direkt-Eingabe (zusätzlich zum Rad) ── */
.wheel-typein-row{
display:flex;align-items:center;justify-content:center;gap:8px;
margin:14px 20px 0;padding:8px 12px;border-radius:12px;
background:var(--g5);
}
.wheel-typein-row .wheel-typein-lbl{font-size:13px;font-weight:600;color:var(--text2);white-space:nowrap}
.wheel-typein-inp{
width:96px;text-align:center;border:none;background:var(--card);
border-radius:9px;padding:8px 6px;font-family:inherit;font-size:18px;
font-weight:700;color:var(--text);font-variant-numeric:tabular-nums;
outline:1.5px solid transparent;transition:outline-color .15s;
}
.wheel-typein-inp:focus{outline-color:var(--acc)}
.wheel-typein-unit{font-size:14px;font-weight:600;color:var(--text2);min-width:26px}
/* ── Workout-Presets (Trainingspläne) ── */
.wk-preset-head{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.wk-preset-new{
border:none;background:rgba(var(--acc-rgb),.12);color:var(--acc);
border-radius:10px;padding:6px 12px;font-family:inherit;font-size:13px;
font-weight:700;cursor:pointer;transition:transform .12s,background .15s;
}
.wk-preset-new:active{transform:scale(.95);background:rgba(var(--acc-rgb),.2)}
.wk-preset-grid{display:flex;flex-direction:column;gap:8px}
.wk-preset-card{
display:flex;align-items:center;gap:12px;padding:13px 14px;
background:var(--card);border:1.5px solid var(--gl-bdr);border-radius:14px;
cursor:pointer;transition:border-color .15s,background .15s,transform .12s;
}
.wk-preset-card:active{transform:scale(.985)}
.wk-preset-card.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.08)}
.wk-preset-card .wkp-body{flex:1;min-width:0}
.wk-preset-card .wkp-name{font-size:16px;font-weight:700;color:var(--text)}
.wk-preset-card .wkp-sub{font-size:12px;color:var(--text2);margin-top:2px}
.wk-preset-card .wkp-edit{
background:var(--g5);border:none;border-radius:9px;width:32px;height:32px;
font-size:14px;color:var(--text2);cursor:pointer;flex-shrink:0;
}
.wk-preset-card .wkp-edit:active{opacity:.6}
.wk-preset-card .wkp-chk{
width:24px;height:24px;border-radius:50%;border:2px solid var(--gl-bdr);
display:flex;align-items:center;justify-content:center;color:#fff;
font-size:13px;flex-shrink:0;transition:background .15s,border-color .15s;
}
.wk-preset-card.on .wkp-chk{background:var(--acc);border-color:var(--acc)}
.wk-preset-empty{
padding:16px;text-align:center;color:var(--text2);font-size:13px;
background:var(--g5);border-radius:14px;line-height:1.45;
}
.preset-ex-row{display:flex;align-items:center;gap:10px;padding:11px 10px;cursor:pointer;border-radius:12px;flex:1;min-width:0}
.preset-ex-row:active{background:var(--g5)}
#preset-ex-list .ex-swipe-wrap{border-radius:12px;margin-bottom:2px}
.preset-ex-row .pex-body{flex:1;min-width:0}
.preset-ex-row .pex-name{font-size:15px;font-weight:600;color:var(--text)}
.preset-ex-row .pex-sub{font-size:12px;color:var(--text2);margin-top:1px}
.preset-ex-row .pex-chk{
width:24px;height:24px;border-radius:7px;border:2px solid var(--gl-bdr);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:13px;
flex-shrink:0;transition:background .15s,border-color .15s;
}
.preset-ex-row.on .pex-chk{background:var(--acc);border-color:var(--acc)}
.unit-toggle{display:inline-flex;background:var(--g5);border-radius:10px;padding:2px;gap:1px}
.unit-toggle button{
border:none;background:transparent;border-radius:8px;padding:6px 12px;
font-size:13px;font-weight:600;font-family:inherit;color:var(--text2);
cursor:pointer;transition:background .15s,color .15s;
}
.unit-toggle button.on{background:var(--acc);color:#fff}
.set-del{background:none;border:none;color:var(--red);cursor:pointer;font-size:22px;display:flex;align-items:center;justify-content:center;width:28px}
.add-set-btn{margin-top:10px;background:none;border:none;color:var(--acc);font-size:15px;cursor:pointer;font-family:inherit;font-weight:600;padding:4px 0}
.set-timer-btn{
display:flex;align-items:center;justify-content:center;gap:5px;
background:var(--inp-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border:1px solid var(--gl-bdr);border-radius:12px;padding:9px 4px;
font-size:14px;font-weight:700;font-variant-numeric:tabular-nums;
color:var(--text);cursor:pointer;width:100%;font-family:inherit;
transition:background .15s,border-color .15s,color .15s;
}
.set-timer-btn.running{background:rgba(var(--acc-rgb),.12);border-color:var(--acc);color:var(--acc)}
.set-timer-btn.done-t{background:rgba(52,199,89,.12);border-color:var(--green);color:var(--green)}
.ex-type-seg{
display:flex;background:var(--g5);border-radius:9px;padding:2px;gap:1px;
}
.ex-type-seg button{
flex:1;border:none;border-radius:7px;padding:3px 8px;font-size:11px;font-weight:600;
font-family:inherit;cursor:pointer;background:transparent;color:var(--text2);
transition:background .15s,color .15s;
}
.ex-type-seg button.on{background:var(--seg-on);color:var(--text);box-shadow:0 1px 3px rgba(0,0,0,.08)}
/* ── TRAININGS-LEISTE ──────────────────────────────────────────────
EINE klebende Zeile fuer Zeit und Pause, feste Hoehe in BEIDEN
Zustaenden. Aendert der Klebe-Stapel seine Hoehe, muss WebKit die
Rastpunkte des ganzen Blattes neu rechnen — genau das passierte frueher
bei jedem Pausenstart.
KEIN backdrop-filter: Glas auf klebenden Elementen hat in der WKWebView
schon zweimal Kanten quer durch den Inhalt gezogen. */
#wk-bar{
background:var(--card);border:1px solid var(--gl-bdr);border-radius:14px;
margin:0 0 8px;overflow:hidden;
}
.wkb-row{display:flex;align-items:center;justify-content:space-between;gap:10px;height:42px;padding:0 12px}
.wkb-time{display:flex;align-items:center;gap:6px;color:var(--green);flex-shrink:0}
.wkb-time svg{width:15px;height:15px}
.wkb-time b{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.wkb-right{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text2);min-width:0}
#wk-rest{display:flex;align-items:center;gap:7px;color:var(--acc)}
#wk-rest b{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;min-width:44px;text-align:center}
.wkb-rest-lbl{font-size:12px;font-weight:700}
.wkb-adj,.wkb-skip{
font-size:12px;font-weight:700;color:var(--acc);
background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.28);
border-radius:14px;padding:3px 8px;cursor:pointer;
}
.wkb-adj:active,.wkb-skip:active{background:rgba(var(--acc-rgb),.26)}
/* 2px-Faden statt Pulsieren: zeigt den Ablauf, ohne zu blinken. */
.wkb-prog{height:2px;background:transparent}
.wkb-prog i{display:block;height:100%;background:var(--acc);transition:width .25s linear}
/* ── AKTIVES WORKOUT: Feldfarbe je Theme (Karten tragen die volle --card) ── */
:root {--wk-inp-bg:rgba(120,120,128,.09)}
[data-theme="rosa"] {--wk-inp-bg:rgba(150,110,130,.09)}
[data-theme="dark"] {--wk-inp-bg:rgba(255,255,255,.06)}
[data-theme="blau"] {--wk-inp-bg:rgba(100,130,170,.09)}
[data-theme="grün"] {--wk-inp-bg:rgba(100,150,115,.10)}
/* KEIN backdrop-filter auf den Uebungskarten. Der Grund ist derselbe wie beim
Blatt selbst: .sheet hat einen DECKENDEN Hintergrund, hier wird also eine
einfarbige Flaeche weichgezeichnet — optisch fast nichts, aber --gl-blur
liegt bei 44-52 px, und WebKit rechnet diesen Radius fuer JEDE Karte in
JEDEM Bild neu. Genau das machte das Scrollen im Training ruckelig und das
Geraet heiss. Dieselbe Optik entsteht aus zwei deckenden Lagen. */
#wk-step2 .ex-card{
/* Die echte Kartenfarbe, deckend und ohne Aufheller. Die frueher hier
liegende weisse Lage war fuer den backdrop-filter gedacht:
sie sollte den weichgezeichneten Untergrund milchig machen. Ohne Filter
hellt sie die Karte nur auf — im dunklen Theme wurde aus #17171b ein
Grau, in den Premium-Themes (52 % Weiss) sogar ein deutliches. Getrennt
vom Blatt wird die Karte durch Rahmen und Schatten, nicht durch Helligkeit. */
background:var(--card);
backdrop-filter:none;-webkit-backdrop-filter:none;
}
html:not([data-glass="off"]) #wk-step2 .set-in{background:var(--wk-inp-bg)}
/* ── SUGGESTIONS ── */
.sug{
border-radius:18px;padding:15px 16px;margin-bottom:10px;
display:flex;gap:12px;align-items:flex-start;
backdrop-filter:blur(24px) saturate(160%);
-webkit-backdrop-filter:blur(24px) saturate(160%);
border:1px solid;
box-shadow:var(--gl-shad);
position:relative;overflow:hidden;
}
.sug::after{content:none;}
[data-theme="dark"] .sug::after{content:none;}
.sug.up{background:rgba(52,199,89,.14);border-color:rgba(52,199,89,.30)}
.sug.hold{background:rgba(255,149,0,.12);border-color:rgba(255,149,0,.26)}
.sug.wait{background:rgba(0,122,255,.10);border-color:rgba(0,122,255,.20)}
[data-theme="dark"] .sug.wait{background:rgba(10,132,255,.14);border-color:rgba(10,132,255,.24)}
.sug-ic{font-size:22px;flex-shrink:0;margin-top:1px;position:relative;z-index:1}
.sug-title{font-size:15px;font-weight:700;position:relative;z-index:1}
.sug-sub{font-size:13px;color:var(--text2);margin-top:3px;line-height:1.4;position:relative;z-index:1}
#sug-list{
max-height:260px;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
border-radius:20px;
}
/* ── TRACKER CIRCLES ── */
.tracker-row{display:flex;flex-direction:row;align-items:flex-start;gap:12px;flex-wrap:wrap;padding:4px 0}
.tracker-circle-wrap{display:flex;flex-direction:column;align-items:center;gap:5px}
.tracker-ring-btn{background:none;border:none;padding:0;cursor:pointer;display:block;-webkit-tap-highlight-color:transparent;transition:transform .13s;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;}
.tracker-ring-btn:active{transform:scale(.90)}
.tracker-ring-svg{display:block;overflow:visible}
.tracker-ring-bg{fill:none;stroke:var(--ng-well-bdr);stroke-width:4.5;stroke-linecap:round}
/* NEON IN DREI EBENEN. Die wichtigste Regel dabei: die Lichtebenen sind NICHT
breiter als der Bogen. Ein breiterer Zwilling schiebt seine eigene Kante
neben die Linie — das Ergebnis ist ein dicker Ring mit Rand, kein Leuchten.
Breite macht hier ausschliesslich die Unschaerfe.
1. .tracker-ring-glow = die weite Wolke: gleiche Breite, stark verwischt.
Sie faerbt die Flaeche innen wie aussen — in der Vorlage endet das
Licht nicht an der Linie.
2. .tracker-ring-halo = das enge Glimmen unmittelbar an der Linie.
3. .tracker-ring-progress = der scharfe, duenne Kern. Er ist das hellste
im Bild; die Farbe kommt aus dem Licht drumherum.
Alle drei tragen denselben dashoffset, sonst laufen sie auseinander. Keine
Animation: die Vorlage steht still, und ein Wert, der pulsiert, sieht aus,
als aendere er sich dauernd. */
/* Zur Blur-Weite: die Unschaerfe verteilt die Farbe einer nur 5 Einheiten
breiten Linie. Bei blur(9) bleibt an keiner Stelle genug Deckkraft uebrig —
das Licht wird flaechig und blass statt hell. 5–6 Einheiten sind das Maximum,
bei dem die Linie noch als Quelle leuchtet.
Die WEITE des Scheins kommt deshalb nicht aus dem Blur, sondern aus einem
Stapel drop-shadows auf derselben Ebene: drei Schatten ohne Versatz, mit
wachsendem Radius und fallender Deckkraft, ergeben den Abfall, den ein
einzelner Blur nicht hinbekommt. --gc traegt die Leuchtfarbe (aus
renderTrackers bzw. _neonRamp); ohne sie faellt der Schein auf die
Akzentfarbe zurueck. */
/* HIER STEHT ABSICHTLICH KEIN filter — der Schein kommt aus einem SVG-Filter
im Markup (filter="url(#…-f)", siehe renderTrackers).
Der Grund: ein CSS-filter auf einem SVG-KIND laeuft ueber den SVG-Filterpfad,
und dessen Region ist per Vorgabe nur zehn Prozent groesser als das Objekt.
Alles darueber hinaus wird abgeschnitten — ein drop-shadow mit 14 px Radius
auf einem 52 px grossen Ring ist damit weg, und genau deshalb war vorher kein
Leuchten zu sehen, obwohl der Filter gesetzt war. Im SVG-Filter laesst sich
die Region selbst festlegen. Ein CSS-filter hier wuerde das Attribut aus dem
Markup ueberschreiben und den Fehler zurueckholen.
Der Bogen ist schmaler als der sichtbare Kern (4 statt 5): so verschwindet
die scharfe Linie dieser Ebene unter ihm, und nach aussen tritt nur Licht. */
/* Der Schein der Ringe kommt aus einem SVG-Filter, erreicht die --gwa-Staffel
also nicht. Damit der zentrale Dimmer (--neon) trotzdem greift, sitzt er hier
als Deckkraft der beiden Lichtebenen. Der scharfe Kern bleibt voll: er ist
der Wert, nicht das Licht. */
.tracker-ring-glow{
fill:none;stroke-width:4;stroke-linecap:round;
transform:rotate(-90deg);transform-origin:50% 50%;
opacity:var(--neon);
transition:stroke-dashoffset .55s cubic-bezier(0.34,1.56,0.64,1);
}
.tracker-ring-halo{
fill:none;stroke-width:5;stroke-linecap:round;
transform:rotate(-90deg);transform-origin:50% 50%;
filter:blur(2px);opacity:calc(.55 + .45 * var(--neon));
transition:stroke-dashoffset .55s cubic-bezier(0.34,1.56,0.64,1);
}
/* Der Ring leuchtet UND atmet. Der Schein liegt als drop-shadow auf dem Bogen
selbst — bei vier Ringen sind das vier Filterebenen, das traegt die Seite.
Auf die Hintergrundspur kommt keiner: sie soll die Skala zeigen, nicht
mitleuchten.
Das Atmen laeuft ueber den Filter, nicht ueber transform: der Bogen soll
sich nicht bewegen (er zeigt einen Wert), nur sein Schein soll staerker und
schwaecher werden. Die drei Ringe atmen versetzt (--rd je Ring), sonst
pulsiert die ganze Reihe im Gleichschritt und wirkt wie ein Blinken. */
/* Eigene Farbe je Ring: item.hue steuert die beiden Stopps des Verlaufs
(siehe renderTrackers). Gespeichert wird der Ton IM Tracker-Objekt, nicht
als neues Feld in S: trackerItems ist in den Firestore-Rules bereits
erlaubt, ein zusaetzliches Feld dort haette den kompletten Push blockiert. */
/* Der scharfe Bogen. Farbe kommt aus dem Verlauf (stroke=url(#…) im Markup),
nicht aus dem CSS — deshalb steht hier kein stroke. */
.tracker-ring-progress{fill:none;stroke-width:5;stroke-linecap:round;transition:stroke-dashoffset .55s cubic-bezier(0.34,1.56,0.64,1);transform:rotate(-90deg);transform-origin:50% 50%;
}
/* Die Hintergrundspur dunkler, damit der leuchtende Bogen sich abhebt. Bei
heller Spur verschwimmt der Schein mit ihr und der Ring wirkt matt. */
/* Die Spur bleibt fast unsichtbar: in der Vorlage gibt es sie gar nicht, dort
steht der Bogen frei auf der dunklen Flaeche. Ganz weg kann sie hier nicht —
ohne sie fehlt bei niedrigem Stand die Skala —, aber alles ueber diesem Wert
legt sich als graue Linie neben den Schein und macht ihn matt. */
.tracker-ring-bg{stroke:var(--ng-well-bdr);stroke-width:4.5}
/* KEIN stroke bei .done: das Gruen steckt schon in den beiden Stopps des
Verlaufs (siehe renderTrackers). Eine einfarbige Ueberschreibung hier haette
den Verlauf beim erreichten Ziel wieder plattgemacht — genau bei dem Ring,
der am besten aussehen soll. */
@keyframes tracker-tap{0%{transform:scale(1) rotate(-90deg)}40%{transform:scale(.86) rotate(-90deg)}70%{transform:scale(1.07) rotate(-90deg)}100%{transform:scale(1) rotate(-90deg)}}
/* Der Zupfer laeuft auf allen drei Ebenen — zuckt nur der Kern, loest sich das
Licht beim Antippen kurz von ihm ab. */
.tracker-ring-progress.tapped,.tracker-ring-halo.tapped,.tracker-ring-glow.tapped{
animation:tracker-tap .35s cubic-bezier(0.34,1.56,0.64,1)}
.tracker-ring-count{font-size:15px;font-weight:700;fill:var(--text);text-anchor:middle;dominant-baseline:middle;font-family:inherit}
.tracker-ring-goal{font-size:9px;font-weight:500;fill:var(--text2);text-anchor:middle;dominant-baseline:middle;font-family:inherit}
.tracker-circle-label{font-size:11px;font-weight:600;color:var(--text2);text-align:center;max-width:64px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tracker-add-btn{
width:64px;height:64px;border-radius:50%;
background:var(--g5);border:1.5px dashed var(--sep);
color:var(--text2);font-size:28px;font-weight:300;cursor:pointer;
display:flex;align-items:center;justify-content:center;
transition:transform .13s,background .15s;font-family:inherit;line-height:1;
align-self:flex-start;
}
.tracker-add-btn:active{transform:scale(.90)}
.tracker-goal-btn{width:48px;height:48px;border-radius:50%;background:var(--g5);border:1.5px solid var(--sep);color:var(--text);font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .12s,border-color .12s,-webkit-tap-highlight-color 0s;-webkit-tap-highlight-color:transparent;}
.tracker-goal-btn:active,.tracker-goal-btn.selected{background:var(--acc);color:#fff;border-color:var(--acc)}
/* ── TRACKER BOTTOM SHEET ── */
#tracker-sheet{position:fixed;inset:0;z-index:3000;pointer-events:none}
#tracker-sheet.open{pointer-events:all}
.tracker-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,0);transition:background .28s}
#tracker-sheet.open .tracker-sheet-backdrop{background:rgba(0,0,0,.38)}
/* ── TRACKER CONTEXT POPOVER ── */
.tracker-popover-backdrop{position:fixed;inset:0;z-index:3998}
.tracker-popover{
position:fixed;z-index:3999;
background:var(--gl-bg-h);
backdrop-filter:blur(48px) saturate(200%);
-webkit-backdrop-filter:blur(48px) saturate(200%);
border:1px solid var(--gl-bdr);
border-radius:13px;
box-shadow:var(--gl-shad-lg);
min-width:190px;overflow:hidden;
opacity:0;transform:scale(.85);
transition:opacity .16s,transform .16s cubic-bezier(.34,1.56,.64,1);
pointer-events:none;
}
.tracker-popover.show{opacity:1;transform:scale(1);pointer-events:all}
/* Farbreihe im Tracker-Menue. Die Punkte leuchten selbst — man soll sehen,
wie der Ring danach aussieht, nicht nur welche Farbe gemeint ist. */
.tracker-popover-hue{
display:flex;align-items:center;gap:8px;flex-wrap:wrap;
padding:11px 14px;border-top:1px solid var(--sep);
}
/* Eine Beschriftung ueber der Punktreihe. Ohne sie standen dort acht bunte
Kreise ohne Erklaerung — man musste raten, dass sie den Ring einfaerben. */
.tracker-popover-hue > i{
flex:0 0 100%;font-style:normal;font-size:11px;font-weight:700;
color:var(--text2);letter-spacing:.3px;margin-bottom:1px;
}
.trh-dot{
width:22px;height:22px;border-radius:50%;flex-shrink:0;
border:2px solid transparent;padding:0;cursor:pointer;
background:hsl(var(--h,210),100%,var(--ng-core));
box-shadow:0 0 var(--gw-1) hsla(var(--h,210),100%,var(--ng-1),var(--gwa-1)),
0 0 var(--gw-2) hsla(var(--h,210),100%,var(--ng-2),var(--gwa-2)),
0 0 var(--gw-3) hsla(var(--h,210),100%,var(--ng-3),var(--gwa-3)),
var(--neon-edge);
transition:transform .14s ease,border-color .14s ease;
}
.trh-dot.trh-std{
background:linear-gradient(135deg,var(--acc),var(--acc2,var(--acc)));
box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--acc-rgb),var(--gwa-2)),
0 0 var(--gw-3) rgba(var(--acc-rgb),var(--gwa-3));
}
.trh-dot.on{border-color:#fff;transform:scale(1.14)}
.trh-dot:active{transform:scale(.9)}
.tracker-popover-item{
display:block;width:100%;padding:13px 16px;
border:none;border-bottom:1px solid var(--sep);
background:none;text-align:left;font-size:15px;
color:var(--text);cursor:pointer;font-family:inherit;
}
.tracker-popover-item:last-child{border-bottom:none}
.tracker-popover-item:active{background:var(--g5)}
.tracker-popover-item.danger{color:var(--red)}
.tracker-sheet-content{
position:absolute;bottom:0;left:0;right:0;
background:var(--gl-bg-h);
backdrop-filter:blur(64px) saturate(220%);
-webkit-backdrop-filter:blur(64px) saturate(220%);
border-top:1px solid var(--gl-bdr);border-radius:24px 24px 0 0;
padding:20px 20px calc(20px + var(--sab));
transform:translateY(100%);transition:transform .28s cubic-bezier(.4,0,.2,1);
box-shadow:0 -8px 40px rgba(0,0,0,.14);
}
#tracker-sheet.open .tracker-sheet-content{transform:translateY(0)}
.tracker-sheet-title{font-size:17px;font-weight:700;text-align:center;margin-bottom:16px;color:var(--text)}
.tracker-menu-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.tracker-menu-item{
padding:14px 16px;border-radius:14px;
background:var(--gl-bg);border:1px solid var(--gl-bdr);
font-family:inherit;font-size:16px;font-weight:600;color:var(--text);
cursor:pointer;text-align:left;transition:background .12s;
}
.tracker-menu-item:active{background:rgba(var(--acc-rgb),.10)}
.tracker-menu-custom{color:var(--acc);border-color:rgba(var(--acc-rgb),.25);background:rgba(var(--acc-rgb),.06)}
.tracker-custom-input{
width:100%;padding:14px 16px;border-radius:14px;
background:var(--inp-bg);border:1px solid var(--gl-bdr);
font-family:inherit;font-size:16px;color:var(--text);
outline:none;transition:background .15s,border-color .15s;
}
.tracker-custom-input:focus{background:var(--inp-focus);border-color:var(--acc)}
.tracker-menu-cancel{
width:100%;padding:14px;border-radius:14px;
background:var(--g5);border:none;font-family:inherit;
font-size:16px;font-weight:600;color:var(--text2);cursor:pointer;
transition:opacity .12s;
}
.tracker-menu-cancel:active{opacity:.7}
/* ── SESSION HISTORY ── */
.history-collapsed-row{
display:flex;align-items:center;padding:14px 16px;gap:13px;
cursor:pointer;position:relative;z-index:1;transition:background .12s;
}
.history-collapsed-row:active{background:rgba(120,120,128,.08)}
.history-more-rows{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(.4,0,.2,1)}
.history-more-rows.open{max-height:600px;overflow-y:auto}
.history-expand-chev{
color:var(--text2);font-size:22px;opacity:.5;flex-shrink:0;
transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.history-expand-chev.open{transform:rotate(90deg)}
.history-session-row{
display:flex;align-items:center;padding:12px 16px;gap:13px;
border-top:1px solid var(--sep);position:relative;z-index:1;
}
.hist-sess-head{display:flex;align-items:center;padding:12px 16px;gap:13px;cursor:pointer;transition:background .12s;position:relative;z-index:1}
.hist-sess-head:active{background:rgba(120,120,128,.08)}
.hist-ex-list{overflow:hidden;max-height:0;transition:max-height .35s cubic-bezier(.4,0,.2,1)}
.hist-ex-list.open{max-height:800px}
.hist-ex-row{display:flex;align-items:center;justify-content:space-between;padding:7px 16px;font-size:13px;border-top:1px solid var(--sep)}
.hist-ex-name{flex:1;min-width:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.hist-ex-mg{font-size:10px;color:var(--text2);background:var(--g5);border-radius:8px;padding:2px 7px;font-weight:500;white-space:nowrap}
.hist-ex-sets{color:var(--text2);font-size:12px;flex-shrink:0}
.hist-more-toggle{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;cursor:pointer;border-top:1px solid var(--sep);font-size:13px;color:var(--acc);font-weight:500;position:relative;z-index:1}
.hist-more-toggle:active{background:rgba(120,120,128,.08)}
.muscle-req-hint{font-size:11px;color:var(--red);padding:4px 20px 8px;display:none}
.muscle-req-hint.show{display:block}
.mg-split-picker{padding:0 0 8px}
.mg-split-section{padding:4px 20px 8px}
.mg-split-section-title{font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.mg-split-chips{display:flex;flex-wrap:wrap;gap:6px}
/* ── BADGE ── */
.badge{border-radius:20px;padding:4px 11px;font-size:12px;font-weight:700;white-space:nowrap}
.b-acc{background:var(--acc);color:#fff;box-shadow:0 1px 4px rgba(var(--acc-rgb),.22)}
.b-green{background:var(--green);color:#fff;box-shadow:0 1px 4px rgba(52,199,89,.22)}
.b-orange{background:var(--orange);color:#fff;box-shadow:0 1px 4px rgba(255,149,0,.22)}
/* ── CHART BOX ── */
.chart-box{
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
border:1px solid var(--gl-bdr);
border-radius:20px;padding:16px;
box-shadow:var(--gl-shad),var(--gl-hi);
position:relative;overflow:hidden;
}
.chart-box::after{
content:'';position:absolute;top:0;left:0;right:0;height:40%;
background:var(--sheen);pointer-events:none;border-radius:20px 20px 0 0;
}
/* ── PROGRESS BAR ── */
.pbar{background:var(--g5);border-radius:4px;height:6px;overflow:hidden;margin-top:6px}
.pbar-fill{height:100%;border-radius:4px;background:var(--acc);transition:width .6s var(--spring)}
/* ── THEME ROWS ── */
.theme-row{
display:flex;align-items:center;padding:14px 16px;gap:12px;
border-bottom:1px solid var(--sep);cursor:pointer;
transition:background .12s;position:relative;z-index:1;
}
.theme-row:active{background:rgba(120,120,128,.07)}
.theme-row:last-child{border-bottom:none}
.theme-dot{width:28px;height:28px;border-radius:50%;flex-shrink:0;box-shadow:0 1px 4px rgba(0,0,0,.10)}
.theme-name{flex:1;font-size:16px;font-weight:600}
.theme-chk{color:var(--acc);font-size:18px;font-weight:700}
/* ── EMPTY STATE ── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px;text-align:center}
.empty-i{font-size:60px;margin-bottom:16px}
.empty h3{font-size:20px;font-weight:700;margin-bottom:8px}
.empty p{font-size:15px;color:var(--text2);line-height:1.5}
/* ── WORKOUT CHECKBOX ── */
.wk-chk{
width:26px;height:26px;border-radius:50%;
border:2px solid var(--sep);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;transition:transform .18s,background-color .18s,background .18s,color .18s,border-color .18s,box-shadow .18s,opacity .18s;
}
.wk-chk.on{background:var(--acc);border-color:var(--acc);color:#fff;font-size:13px;font-weight:700;box-shadow:0 2px 10px rgba(var(--acc-rgb),.38)}
/* ── UTILS ── */
.gap{height:14px}
.pad{padding:20px 20px 22px}
.px{padding:0 20px}
/* ── TAB INDICATOR — APPLE-STYLE SELECTED PILL (flach & clean) ── */
#tab-indicator{
position:absolute;
top:6px;left:6px;
height:calc(100% - 12px);
width:80px; /* updated by JS */
background:rgba(255,255,255,0.66);
backdrop-filter:blur(8px) saturate(140%);
-webkit-backdrop-filter:blur(8px) saturate(140%);
border-radius:999px;
border:1px solid rgba(255,255,255,0.55);
box-shadow:0 1px 3px rgba(0,0,0,.08),
0 4px 12px rgba(0,0,0,.06);
transition:transform .40s cubic-bezier(.32,.72,0,1),
width .40s cubic-bezier(.32,.72,0,1);
pointer-events:none;
z-index:1;
will-change:transform,width;
}
/* Identisch neutrales Pill auf allen hellen Themes – nur Icon+Text tragen Akzent */
[data-theme="rosa"] #tab-indicator,
[data-theme="blau"] #tab-indicator,
[data-theme="grün"] #tab-indicator,
[data-theme="light"] #tab-indicator{
background:rgba(255,255,255,0.66);
border:1px solid rgba(255,255,255,0.55);
box-shadow:0 1px 3px rgba(0,0,0,.08),0 4px 12px rgba(0,0,0,.06);
}
/* Dark-Mode: sauberes, leicht erhelltes Pill – kein matschiger Ton */
[data-theme="dark"] #tab-indicator{
background:rgba(255,255,255,0.18);
border:1px solid rgba(255,255,255,0.14);
box-shadow:0 1px 3px rgba(0,0,0,.30),0 4px 12px rgba(0,0,0,.22);
}
/* Glass-off: deckende Pills */
[data-glass="off"] #tab-indicator{
background:rgba(255,255,255,1);
backdrop-filter:none;-webkit-backdrop-filter:none;
border:1px solid rgba(0,0,0,.04);
box-shadow:0 1px 4px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.06);
}
[data-glass="off"][data-theme="rosa"] #tab-indicator{background:rgba(255,255,255,1)}
[data-glass="off"][data-theme="blau"] #tab-indicator{background:rgba(255,255,255,1)}
[data-glass="off"][data-theme="grün"] #tab-indicator{background:rgba(255,255,255,1)}
[data-glass="off"][data-theme="dark"] #tab-indicator{
background:rgba(72,72,82,0.98);
border:1px solid rgba(255,255,255,.10);
box-shadow:0 1px 4px rgba(0,0,0,.35);
}
/* ── TAB-LEISTE: IMMER Apple-Glas (Campus-Look), unabhängig vom Glas-Schalter ──
Nur die schwebende Bottom-Leiste; der Rest der App folgt weiter data-glass. */
html[data-glass] .tabbar{
background:linear-gradient(150deg,rgba(255,255,255,.60) 0%,rgba(255,255,255,.34) 42%,rgba(255,255,255,.46) 100%)!important;
-webkit-backdrop-filter:blur(52px) saturate(195%)!important;
backdrop-filter:blur(52px) saturate(195%)!important;
border:1px solid rgba(255,255,255,0.48)!important;
box-shadow:0 16px 46px rgba(0,0,0,.16),0 5px 14px rgba(0,0,0,.08),
inset 0 1px 0 rgba(255,255,255,.90),inset 0 -8px 16px rgba(0,0,0,.03)!important;
}
html[data-glass][data-theme="dark"] .tabbar{
/* Apple-Dark-Glas: neutraler dunkler Tint (kein weißer Milchschleier),
kräftiger Blur, dezente Sättigung, hauchdünne Lichtkante oben. */
background:linear-gradient(180deg,rgba(46,48,56,.36) 0%,rgba(22,23,28,.5) 100%)!important;
-webkit-backdrop-filter:blur(50px) saturate(150%)!important;
backdrop-filter:blur(50px) saturate(150%)!important;
border-color:rgba(255,255,255,.09)!important;
box-shadow:0 20px 54px rgba(0,0,0,.62),0 6px 16px rgba(0,0,0,.36),
inset 0 1px 0 rgba(255,255,255,.14)!important;
}
html[data-glass] .tabbar::after{display:block!important}
html[data-glass] .tabbar::before{display:block!important}
/* ── Auswahl-Pille: EINGELASSEN, nicht erhaben ───────────────────────────
Vorher lag ein heller, leuchtender Pill AUF dem Glas — zwei Materialien
uebereinander, und der aktive Tab wirkte wie ein zweiter Knopf. Jetzt ist es
eine Vertiefung IM Glas: getoentes Schwarz, feine Lichtkante oben aussen,
Schatten nach innen. Genau eine Regel fuer alle Themes — getoentes Schwarz
liest sich auf hellem wie auf dunklem Glas als dieselbe Mulde, waehrend eine
helle Fuellung auf hellem Glas verschwindet.
Der Akzent-Schimmer faellt weg: die Leiste ist monochrom, Farbe traegt in der
App die Aktion, nicht die Navigation. */
#tab-indicator{
background:rgba(0,0,0,.22)!important;
-webkit-backdrop-filter:none!important;
backdrop-filter:none!important;
border:1px solid rgba(255,255,255,.07)!important;
box-shadow:inset 0 1px 3px rgba(0,0,0,.30),inset 0 -1px 0 rgba(255,255,255,.05),
0 1px 0 rgba(255,255,255,.06)!important;
}
[data-theme="dark"] #tab-indicator{
background:rgba(0,0,0,.34)!important;
border:1px solid rgba(255,255,255,.06)!important;
box-shadow:inset 0 1px 4px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.04),
0 1px 0 rgba(255,255,255,.05)!important;
}
/* ── Scrollbalken global ausblenden (iOS-Look, kein Balken rechts) ── */
*{scrollbar-width:none;-ms-overflow-style:none}
*::-webkit-scrollbar{width:0;height:0;display:none}
/* ── PAGE TRANSITION (liquid glass bloom) ── */
@keyframes pg-in{
from{opacity:0;transform:translateY(8px) scale(.985)}
to {opacity:1;transform:translateY(0) scale(1)}
}
.pg.on{animation:pg-in .26s cubic-bezier(.32,1,.32,1) both;will-change:transform,opacity}
/* ── DACHSHUND ── */
#dackel-lane{
display:none; /* Begleiter-Feature deaktiviert — nie sichtbar (verhindert kurzes Aufblitzen beim Laden) */
position:fixed;
bottom:calc(68px + var(--sab)); /* Füße auf der Leiste, auch mit iOS Safe Area */
left:50%;
transform:translateX(-50%);
width:calc(100% - 52px);
max-width:378px;
height:44px;
pointer-events:none;
z-index:1002;
overflow:visible;
}
#dackel{
position:absolute;
bottom:0;left:6px;
width:65px;
animation:dackel-walk 11s linear infinite;
}
#dackel-inner{
animation:dackel-dir 11s linear infinite;
display:inline-block;
}
#dackel-body{
animation:dackel-bob 0.36s ease-in-out infinite;
display:inline-block;
}
#dackel-svg{
filter:drop-shadow(0 3px 5px rgba(0,0,0,.28));
display:block;
}
/* Horizontal walk: 0→right→0 */
@keyframes dackel-walk{
0% {left:6px}
47% {left:calc(100% - 71px)}
53% {left:calc(100% - 71px)}
100% {left:6px}
}
/* Instant flip when turning around */
@keyframes dackel-dir{
0%,46.99% {transform:scaleX(1)}
47%,100% {transform:scaleX(-1)}
}
/* Cute body bob (like walking gait) */
@keyframes dackel-bob{
0%,100%{transform:translateY(0)}
50% {transform:translateY(-2.5px)}
}
/* Leg swing animations (diagonal pairs) */
@keyframes dackel-step-a{
0%,100%{transform:rotate(-16deg)}
50% {transform:rotate(16deg)}
}
@keyframes dackel-step-b{
0%,100%{transform:rotate(16deg)}
50% {transform:rotate(-16deg)}
}
/* Tail wag */
@keyframes dackel-wag{
0%,100%{transform:rotate(0deg)}
50% {transform:rotate(-22deg)}
}
/* Leg pivot from top (hip) */
.dackel-la,.dackel-lb,.dackel-lc,.dackel-ld{
transform-box:fill-box;
transform-origin:50% 0%;
}
.dackel-la,.dackel-lc{animation:dackel-step-a .33s ease-in-out infinite}
.dackel-lb,.dackel-ld{animation:dackel-step-b .33s ease-in-out infinite}
/* Tail pivot from base */
.dackel-tail{
transform-box:fill-box;
transform-origin:50% 100%;
animation:dackel-wag .68s ease-in-out infinite;
}
/* ── WELCOME / ONBOARDING ── */
.welcome-hero{
display:flex;flex-direction:column;align-items:center;
padding:4px 20px 18px;text-align:center;
}
.welcome-emoji{
font-size:68px;line-height:1;
filter:drop-shadow(0 6px 18px rgba(var(--acc-rgb),.32));
margin-bottom:10px;
animation:welcome-pop .6s cubic-bezier(.34,1.56,.64,1);
}
.welcome-title{
font-size:28px;font-weight:700;letter-spacing:-.5px;
margin-bottom:6px;color:var(--text);
}
.welcome-sub{
font-size:15px;color:var(--text2);line-height:1.45;
max-width:300px;
}
@keyframes welcome-pop{
0%{transform:scale(.4) rotate(-12deg);opacity:0}
60%{transform:scale(1.1) rotate(6deg);opacity:1}
100%{transform:scale(1) rotate(0);opacity:1}
}
.welcome-list .row{align-items:flex-start;padding-top:14px;padding-bottom:14px}
.welcome-list .row-sub{white-space:normal;line-height:1.4;margin-top:3px}
/* ── TUTORIAL ── */
.tut-sheet{padding-top:8px}
.tut-topbar{
display:flex;align-items:center;justify-content:space-between;
padding:4px 20px 10px;min-height:32px;
}
.tut-step-label{
font-size:13px;font-weight:600;color:var(--text2);
letter-spacing:.2px;
}
.tut-skip{
background:transparent;border:none;
color:var(--text2);font-size:14px;font-weight:600;font-family:inherit;
cursor:pointer;padding:6px 4px;
}
.tut-skip:active{opacity:.55}
.tut-dots{
display:flex;justify-content:center;gap:7px;
padding:2px 20px 14px;
}
.tut-dot{
width:7px;height:7px;border-radius:50%;
background:var(--gl-bdr2);
transition:background .25s,width .25s,transform .25s;
}
.tut-dot.on{
background:var(--acc);
width:22px;border-radius:4px;
}
.tut-slide{
padding:0 0 14px;
animation:tut-in .32s cubic-bezier(.34,1.2,.64,1) both;
}
.tut-slide.back{animation:tut-in-back .32s cubic-bezier(.34,1.2,.64,1) both}
@keyframes tut-in{
from{opacity:0;transform:translateX(28px)}
to {opacity:1;transform:translateX(0)}
}
@keyframes tut-in-back{
from{opacity:0;transform:translateX(-28px)}
to {opacity:1;transform:translateX(0)}
}
.tut-hero{
display:flex;flex-direction:column;align-items:center;
padding:6px 20px 16px;text-align:center;
}
.tut-emoji{
font-size:62px;line-height:1;
filter:drop-shadow(0 6px 20px rgba(var(--acc-rgb),.34));
margin-bottom:10px;
animation:welcome-pop .55s cubic-bezier(.34,1.56,.64,1);
}
.tut-title{
font-size:25px;font-weight:700;letter-spacing:-.4px;
margin-bottom:6px;color:var(--text);
}
.tut-sub{
font-size:14px;color:var(--text2);line-height:1.45;
max-width:300px;
}
.tut-feats{
margin:0 20px;
display:flex;flex-direction:column;gap:10px;
}
.tut-feat{
display:flex;align-items:flex-start;gap:13px;
padding:13px 14px;border-radius:16px;
background:var(--gl-bg);
border:1px solid var(--gl-bdr);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
}
.tut-feat-ico{
width:38px;height:38px;border-radius:11px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:20px;
background:rgba(var(--acc-rgb),.10);
border:1px solid rgba(var(--acc-rgb),.20);
}
.tut-feat-body{flex:1;min-width:0}
.tut-feat-title{
font-size:15px;font-weight:600;color:var(--text);
margin-bottom:2px;line-height:1.3;
}
.tut-feat-sub{
font-size:13px;color:var(--text2);
line-height:1.4;
}
.tut-nav{
display:flex;gap:10px;padding:18px 20px 8px;
}
.tut-nav .btn{flex:1;width:auto;min-height:50px;padding:14px;font-size:16px}
.tut-nav .btn-gray{flex:0 1 auto;min-width:108px}
/* ── STREAK BADGE (Header oben rechts) ── */
.streak-badge{
display:inline-flex;align-items:center;gap:4px;
height:28px;box-sizing:border-box;padding:0 10px 0 7px;border-radius:999px;
background:linear-gradient(135deg,rgba(255,149,0,.18),rgba(255,59,48,.12));
border:1px solid rgba(255,149,0,.32);
box-shadow:0 2px 10px rgba(255,149,0,.18);
font-size:13px;font-weight:700;color:var(--text);
line-height:1;cursor:default;
font-variant-numeric:tabular-nums;
}
.streak-badge .streak-fire{
font-size:15px;line-height:1;display:inline-flex;align-items:center;
}
.streak-badge.cold{
background:linear-gradient(135deg,rgba(120,140,170,.10),rgba(120,140,170,.05));
border-color:rgba(120,140,170,.22);
box-shadow:none;color:var(--text2);
}
.streak-badge.cold .streak-fire{
filter:grayscale(.7) opacity(.65);
animation:none;
}
@keyframes streak-pulse{
0%,100%{transform:scale(1)}
50%{transform:scale(1.10) rotate(-3deg)}
}
/* ── STREAK DETAIL OVERLAY ── */
.ov.ov-streak-detail{align-items:flex-end;justify-content:center;background:rgba(0,0,0,.50);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:1003}
.streak-detail-card{background:var(--gl-bg-h);backdrop-filter:blur(60px) saturate(200%);-webkit-backdrop-filter:blur(60px) saturate(200%);border:1px solid var(--gl-bdr);border-radius:28px 28px 0 0;width:100%;max-width:430px;padding-bottom:calc(32px + var(--sab));animation:up .28s cubic-bezier(.32,1,.32,1)}
.strd-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px 14px;border-bottom:1px solid var(--sep)}
.strd-hero{display:flex;flex-direction:column;align-items:center;padding:22px 20px 16px;gap:4px}
.strd-fire{font-size:52px;display:flex;justify-content:center}
.strd-weeks{font-size:48px;font-weight:800;line-height:1;background:linear-gradient(135deg,#ff9500,#ff3b30);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.strd-label{font-size:14px;color:var(--text2);font-weight:500}
.strd-hist-wrap{padding:14px 20px 6px}
.strd-hist-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);margin-bottom:10px}
.strd-hist-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:5px}
.strd-hist-dot{aspect-ratio:1;border-radius:6px;background:var(--g5)}
.strd-hist-dot.done{background:#34c759}
.strd-hist-dot.current{outline:2px solid var(--acc);outline-offset:2px}
.strd-rows{display:flex;flex-direction:column;gap:0;padding:4px 20px 0}
.strd-row{display:flex;align-items:center;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--sep);font-size:15px}
.strd-row:last-child{border-bottom:none}
.strd-row-label{color:var(--text2)}
.strd-row-val{font-weight:600}
.strd-msg{text-align:center;padding:10px 20px 4px;font-size:14px;color:var(--text2);line-height:1.5}
.hdr-greet-row{
display:flex;align-items:center;justify-content:space-between;gap:12px;
position:relative;z-index:1;
}
/* Profilbild oben links (ersetzt die Begrüßung); margin-right:auto hält die
Badges rechts als Gruppe zusammen (kein flex:1-Element mehr in der Reihe) */
.hdr-ava{
width:52px;height:52px;border-radius:50%;flex-shrink:0;
padding:0;overflow:hidden;position:relative;cursor:pointer;
display:flex;align-items:center;justify-content:center;
background:var(--gl-bg-t);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border:1px solid var(--gl-bdr);
/* KEIN --gl-shad hier: der weiche schwarze Wurf zeichnet auf dem dunklen
Wallpaper einen sichtbaren Fleck mit „Strich"-Kante unter dem Bild */
transition:transform .15s,opacity .12s;
-webkit-appearance:none;appearance:none;
}
.hdr-ava:active{transform:scale(.92);opacity:.85}
.hdr-ava img{width:100%;height:100%;object-fit:cover;display:block}
.hdr-ava::after{
content:'';position:absolute;inset:0;border-radius:50%;
background:linear-gradient(160deg,rgba(255,255,255,.20) 0%,transparent 55%);
pointer-events:none;
}
.hdr-ava-ini{
width:100%;height:100%;display:flex;align-items:center;justify-content:center;
border-radius:50%;font-size:19px;font-weight:700;letter-spacing:.02em;color:var(--acc);
background:linear-gradient(150deg,rgba(var(--acc-rgb),.20),rgba(var(--acc-rgb),.06));
}
.hdr-ava svg{width:25px;height:25px;color:var(--text2)}
.hdr-spacer{flex:1;min-width:0}
/* ── SHAKE ANIMATION ── */
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.shake{animation:shake .35s ease}
/* ── HEUTE – Widget-Grid (scrollt wie alle anderen Seiten) ── */
.heute-pad{gap:18px!important;padding-top:6px!important}
/* Tracker: max 4 sichtbar, kein Umbruch */
/* KEIN overflow:hidden. Hier stand es, damit bei vielen Trackern nichts aus
der Kachel laeuft — sichtbar mehr als vier gibt es aber ohnehin nicht
(MAX_TRACKER), und der Zuschnitt kappte den Schein der Ringe genau an der
Kante. Das war der Grund, warum vom Neon nichts zu sehen war: der Ring hat
im 64er-SVG nur drei Pixel Rand, der Schein braucht zwanzig. */
.tracker-row{
overflow:visible!important;
flex-wrap:nowrap!important;
padding:2px 0 6px;
}
.heute-train-btn{width:100%}
/* ── HEUTE WIDGET-RASTER: 2-Spalten-Grid mit dichter Packung ──
Quadrat (sm) = 1 Spalte × 2 Einheiten · Rechteck (md) = 1 Spalte × 1 Einheit
· Groß (lg) = 2 Spalten × N Einheiten. So passen z. B. 2 Rechtecke neben ein Quadrat,
und es entstehen keine Lücken (grid-auto-flow: dense). */
#heute-grid{
display:grid;
grid-template-columns:1fr 1fr;
grid-auto-rows:minmax(var(--hw-unit,78px),auto);
grid-auto-flow:row dense;
gap:14px;
}
.hw{position:relative;min-width:0;display:flex;flex-direction:column}
.hw-sm{grid-column:span 1;grid-row:span 2}
.hw-md{grid-column:span 1;grid-row:span 1}
.hw-lg{grid-column:span 2;grid-row:span 2} /* row-span ggf. inline (lgRows) überschrieben */
.hw-content{min-width:0;flex:1;display:flex;flex-direction:column;min-height:0}
.hw-content>.btn{margin:0}
/* Karte füllt immer ihre Rasterzelle → Form ergibt sich allein aus dem Grid */
.hw-content>.hw-card,
.hw-content>.hw-quick,
.hw-content>.card,
.hw-content>.tracker-row,
.hw-content>.btn{height:100%;min-height:0}
.hw-card,.hw-quick{display:flex;flex-direction:column;overflow:hidden}
/* Eine Kachel, deren Inhalt leer bleibt (Coach ohne Abo, Startkarte nach dem
ersten Training), darf keine Rasterzelle besetzen — sonst klafft oben auf der
Startseite ein Loch, das aussieht wie ein Ladefehler. Im Bearbeiten-Modus
bleibt sie sichtbar, sonst kann man sie weder greifen noch entfernen. */
.hw.hw-leer{display:none}
.heute-pad.editing .hw.hw-leer{display:flex;opacity:.4}
.heute-pad.editing .hw.hw-leer .hw-content::after{
content:'leer';display:flex;align-items:center;justify-content:center;
flex:1;font-size:12px;font-weight:700;color:var(--text2);
border:1.5px dashed var(--sep);border-radius:18px}
/* sm/md: Inhalt zentriert */
.hw-sm .hw-card,.hw-md .hw-card{align-items:center;justify-content:center;text-align:center}
.hw-md .hw-card{padding:10px 14px}
.hw-sm .tracker-row,.hw-md .tracker-row{display:block;height:100%;overflow:visible;padding:0}
.hw-sm .tracker-row>.hw-card,.hw-md .tracker-row>.hw-card{height:100%}
/* Emoji-freie Stat-Kacheln (Zahl + Label) */
.hw-stat{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px;height:100%;width:100%}
.hw-stat .hw-big{line-height:1.05}
.hw-sm .hw-stat .hw-big{font-size:27px}
.hw-md .hw-stat .hw-big{font-size:22px}
.hw-md .hw-stat{gap:0}
.hist-sm,.hist-md{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:1px;cursor:pointer;width:100%;height:100%}
/* Mini-Wochenpunkte für „Diese Woche" (quadratisch) */
.wk-mini-row{display:flex;gap:3px;margin:6px 0 2px;justify-content:center}
.wk-mini-dot{width:8px;height:8px;border-radius:50%;background:var(--g5)}
.wk-mini-dot.l1{background:rgba(var(--acc-rgb),.4)}
.wk-mini-dot.l2{background:rgba(var(--acc-rgb),.6)}
.wk-mini-dot.l3{background:rgba(var(--acc-rgb),.8)}
.wk-mini-dot.l4{background:var(--acc)}
.wk-mini-dot.today{outline:1.5px solid var(--acc);outline-offset:1px}
.wk-mini-dot.future{opacity:.35}
/* Gewicht-Widget im Raster: Karte füllt Zelle, kein aspect-ratio-Konflikt */
.hw-content>#weight-card{display:flex;flex-direction:column}
.hw #weight-card .weight-card-inner{flex:1;min-height:0;justify-content:center}
.hw-sm #weight-card .weight-card-sm,
.hw-md #weight-card .weight-card-md{aspect-ratio:auto!important}
.hw-md #weight-card .weight-mini-wrap{display:none}
/* Heatmap-Karte bleibt eine Spalten-Reihe (überschreibt .hw-card column) */
.hw-content>.hw-hm-wrap{flex-direction:row}
.hist-md .badge{margin-top:3px}
.hw-title{font-size:12px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text2);margin-bottom:8px;padding-left:2px;flex:0 0 auto}
.hw-card{
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
border:1px solid var(--gl-bdr);border-radius:22px;padding:17px;
box-shadow:var(--gl-shad),var(--gl-hi);
position:relative;overflow:hidden;
}
.hw-card::after{content:'';position:absolute;top:0;left:0;right:0;height:40%;background:var(--sheen);pointer-events:none;border-radius:22px 22px 0 0}
.hw-big{font-size:26px;font-weight:800;line-height:1.1}
.hw-sub{font-size:12px;color:var(--text2);margin-top:3px}
/* Balkenreihe des Verlaufs (siehe _sparkline). */
.hw-spark{
display:flex;align-items:flex-end;gap:2px;width:100%;height:32px;
}
.hw-spark > i{
flex:1 1 0;min-width:0;border-radius:2px 2px 1px 1px;
background:rgba(var(--acc-rgb),.42);
box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-3));
}
/* Der letzte Wert ist der aktuelle — er leuchtet, die aelteren treten
zurueck. Ohne das liest sich die Reihe als gleichwertige Menge, dabei ist
der letzte Balken der, um den es geht. */
.hw-spark > i.is-now{
background:var(--acc);
box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--acc-rgb),var(--gwa-2)),
0 0 var(--gw-3) rgba(var(--acc-rgb),var(--gwa-3)),
var(--neon-edge);
}
.hw-spark-alt{display:block;width:100%;height:34px;margin-top:10px;overflow:visible}
.hw-empty-mini{font-size:13px;color:var(--text2);text-align:center;padding:6px 0}
/* Quick-Action Kachel */
.hw-quick{
width:100%;border:none;font-family:inherit;cursor:pointer;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
min-height:102px;text-align:center;position:relative;overflow:hidden;
background:var(--gl-bg);backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
border:1px solid var(--gl-bdr);border-radius:22px;
box-shadow:var(--gl-shad),var(--gl-hi);
}
.hw-quick .hw-quick-ico{font-size:28px;line-height:1}
.hw-quick .hw-quick-lbl{font-size:13px;font-weight:700;color:var(--text)}
.hw-quick:active{transform:scale(.97);opacity:.85}
/* Erholungs-Widget */
.hw-rec-list{display:flex;flex-direction:column;gap:9px}
/* Verkleinert (sm): quadratische Erholungs-Batterie */
.hw-rec-batt{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hw-rec-batt .rec-batt-v{height:64px}
.hw-rec-batt .rec-batt-v-pct{font-size:19px}
/* „Diese Woche"-Widget (7-Tage-Trainingsübersicht) */
.hw-week{cursor:pointer}
.hw-week .week-circles-row{display:flex;justify-content:space-between;gap:4px;margin-bottom:10px}
.hw-week-foot{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--text2)}
.hw-week-foot b{color:var(--text);font-weight:700}
.hw-rec-row{display:flex;align-items:center;gap:8px;cursor:pointer}
.hw-rec-label{font-size:12px;font-weight:600;flex:0 0 72px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-rec-bar{flex:1;height:6px;border-radius:4px;background:var(--g5);overflow:hidden}
.hw-rec-bar>span{display:block;height:100%;border-radius:4px}
.hw-rec-val{font-size:11px;font-weight:700;color:var(--text2);flex:0 0 30px;text-align:right}
/* Muskelgruppen-Widget */
.hw-mg-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.hw-mg-row:last-child{margin-bottom:0}
.hw-mg-label{font-size:12px;font-weight:600;flex:0 0 90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Kopfzeile der Volumen-Verteilung: Titel plus eine Zeile, die die Einheit
nennt. Beides klein — sie soll erklaeren, nicht dominieren. */
.hw-mg-head{
font-size:12.5px;font-weight:800;color:var(--text);
margin:0 0 10px;line-height:1.35;
}
.hw-mg-head span{display:block;font-size:10.5px;font-weight:600;color:var(--text2);margin-top:1px}
.hw-mg-seg{flex:1;min-width:0;display:flex;align-items:center}
.hw-mg-card .segbar.segbar-mini{height:11px;gap:2px}
/* Kompaktform (mittelgrosse Kachel): dieselben Zeilen, nur enger gesetzt.
Der Platz kommt aus der Beschriftung und den Abstaenden — die Striche
behalten ihre Hoehe, sonst leuchten sie schwaecher als die in der grossen
Kachel daneben, und genau dieser Unterschied faellt auf. */
/* Die mittlere Kachel zentriert ihren Inhalt sonst mittig — richtig fuer eine
einzelne Kennzahl, falsch fuer eine Liste: die Zeilen sollen linksbuendig
untereinander stehen und oben anfangen. */
.hw-md .hw-card.hw-mg-kompakt{align-items:stretch;justify-content:flex-start;text-align:left;padding:10px 11px}
.hw-mg-kompakt .hw-mg-head{font-size:11.5px;margin-bottom:7px}
.hw-mg-kompakt .hw-mg-head span{font-size:9.5px}
.hw-mg-kompakt .hw-mg-row{gap:6px;margin-bottom:6px}
.hw-mg-kompakt .hw-mg-label{flex:0 0 58px;font-size:10.5px}
.hw-mg-kompakt .hw-mg-val{flex:0 0 28px;font-size:10px}
.hw-mg-kompakt .segbar.segbar-mini{height:10px;gap:2.5px}
.hw-mg-bar{flex:1;height:7px;border-radius:4px;background:var(--g5);overflow:hidden}
.hw-mg-bar>span{display:block;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--acc),var(--acc2))}
.hw-mg-val{font-size:11px;font-weight:700;color:var(--text2);flex:0 0 36px;text-align:right}
/* 1RM-Widget */
.hw-orm-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--sep)}
.hw-orm-row:first-child{border-top:none;padding-top:0}
.hw-orm-name{font-size:13px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-orm-val{font-size:13px;font-weight:800;color:var(--acc);flex-shrink:0}
/* Trainingspläne-Widget */
.hw-plan-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid var(--sep);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hw-plan-row:first-child{border-top:none;padding-top:2px}
.hw-plan-row:active{opacity:.55}
.hw-plan-name{font-size:13px;font-weight:600;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-plan-meta{font-size:11px;font-weight:600;color:var(--text2);flex-shrink:0}
.hw-plan-start{
flex-shrink:0;display:inline-flex;align-items:center;gap:3px;
font-size:12px;font-weight:700;font-family:inherit;color:#fff;
background:var(--green);
border:none;border-radius:999px;padding:6px 12px;cursor:pointer;
-webkit-tap-highlight-color:transparent;box-shadow:0 1px 4px rgba(52,199,89,.25);
}
.hw-plan-start:active{transform:scale(.94)}
.hw-plan-right{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* Heatmap-Widget */
.hw-hm-wrap{display:flex;gap:2px;justify-content:space-between}
.hw-hm-col{display:flex;flex-direction:column;gap:2px;flex:1}
.hw-hm-cell{aspect-ratio:1;border-radius:2px;background:var(--g5)}
.hw-hm-cell.l1{background:rgba(var(--acc-rgb),.25)}
.hw-hm-cell.l2{background:rgba(var(--acc-rgb),.5)}
.hw-hm-cell.l3{background:rgba(var(--acc-rgb),.75)}
.hw-hm-cell.l4{background:rgba(var(--acc-rgb),1)}
.hw-hm-cell.fut{opacity:.2}
/* Bearbeitungs-Modus */
.hw-badge{
position:absolute;width:24px;height:24px;border-radius:50%;
display:none;align-items:center;justify-content:center;
font-size:16px;font-weight:800;line-height:1;
z-index:6;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.35);
-webkit-tap-highlight-color:transparent;
}
.hw-remove{top:-8px;left:-8px;background:#ff3b30;color:#fff}
.heute-pad.editing .hw-badge{display:flex}
/* Resize-Griff (ziehen wie bei Apple, statt Tippen auf ein Symbol) */
.hw-rsz{
position:absolute;right:-9px;bottom:-9px;width:28px;height:28px;border-radius:50%;
display:none;align-items:center;justify-content:center;color:#fff;
background:rgba(60,60,67,.96);z-index:7;cursor:nwse-resize;
box-shadow:0 2px 7px rgba(0,0,0,.4);touch-action:none;
-webkit-tap-highlight-color:transparent;
}
.hw-rsz svg{width:14px;height:14px;display:block}
.heute-pad.editing .hw-rsz{display:flex}
.hw.hw-resizing{animation:none!important;z-index:60}
.hw.hw-resizing .hw-card,.hw.hw-resizing .hw-quick,.hw.hw-resizing .card{
box-shadow:0 14px 38px rgba(0,0,0,.32)!important;outline:2px solid var(--acc);outline-offset:1px
}
.heute-pad.editing .hw{
touch-action:none;
animation:hw-jiggle .28s ease-in-out infinite;
cursor:grab;
}
.heute-pad.editing .hw:nth-child(2n){animation-delay:-.14s}
.heute-pad.editing .hw:nth-child(3n){animation-delay:-.09s}
.heute-pad.editing .hw:active{cursor:grabbing}
.heute-pad.editing .hw-content{pointer-events:none}
.heute-pad.editing .hw-quick{pointer-events:none}
@keyframes hw-jiggle{
0% {transform:rotate(-.8deg)}
50% {transform:rotate( .9deg)}
100%{transform:rotate(-.8deg)}
}
.hw-drag-ghost{
opacity:.95;transform:scale(1.06) rotate(1.5deg);
box-shadow:0 16px 40px rgba(0,0,0,.3);border-radius:20px;
pointer-events:none;transition:none;animation:none!important;
}
.hw-drop-hint{outline:2px dashed var(--acc);outline-offset:3px;border-radius:20px}
/* Live-Resize-Frame: folgt dem Finger beim Ziehen (Apple-Stil) */
.hw-rsz-frame{
position:fixed;z-index:9998;pointer-events:none;
border-radius:20px;
border:2.5px solid var(--acc);
background:rgba(var(--acc-rgb),.10);
box-shadow:0 10px 34px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.25);
transition:box-shadow .18s ease, background .18s ease;
}
.hw-rsz-frame.snap{
background:rgba(var(--acc-rgb),.22);
box-shadow:0 14px 40px rgba(var(--acc-rgb),.4),inset 0 0 0 1px rgba(255,255,255,.4);
}
.hw.hw-snap-in{animation:hw-snap-in .3s cubic-bezier(.34,1.56,.64,1) both}
@keyframes hw-snap-in{
0% {transform:scale(.9)}
60% {transform:scale(1.04)}
100%{transform:scale(1)}
}
/* Edit-Bar */
.heute-edit-bar{
display:none;
position:fixed;
left:50%;transform:translateX(-50%);
width:calc(100% - 40px);max-width:390px;
bottom:calc(6px + var(--sab) + 64px + 10px); /* über der Tabbar */
gap:10px;
z-index:1100;
}
.heute-pad.editing~* .heute-edit-bar,
.heute-pad.editing .heute-edit-bar,
body.heute-editing .heute-edit-bar{display:flex}
#heute-edit-bar.visible{display:flex}
.heute-edit-bar button{
flex:1;padding:13px;border-radius:14px;border:none;
font-family:inherit;font-size:15px;font-weight:700;cursor:pointer;
transition:opacity .12s;
box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.heute-edit-bar button:active{opacity:.75}
.heute-edit-bar .eb-add{background:var(--gl-bg-h);backdrop-filter:blur(40px);-webkit-backdrop-filter:blur(40px);color:var(--text);border:1px solid var(--gl-bdr)}
.heute-edit-bar .eb-clear{background:rgba(255,59,48,.14);color:#ff3b30;border:1px solid rgba(255,59,48,.30);box-shadow:none;font-size:14px}
.heute-edit-bar .eb-done{background:var(--acc);color:#fff;box-shadow:0 3px 14px rgba(var(--acc-rgb),.45)}
.heute-grid-empty{
text-align:center;color:var(--text2);
font-size:14px;padding:32px 10px;line-height:1.65;
}
/* Widget-Picker Sheet · Apple-Style Galerie mit echten, gerenderten Vorschauen */
.widget-add-list{
display:grid;grid-template-columns:1fr 1fr;
gap:18px 14px;align-items:start;
padding:6px 16px calc(24px + var(--sab,0px));
}
.wa-card{
display:flex;flex-direction:column;gap:10px;min-width:0;
cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.wa-card.span2{grid-column:span 2}
.wa-card.added{cursor:default}
.wa-stage{position:relative;transition:transform .14s cubic-bezier(.32,1,.32,1)}
.wa-card:not(.added):active .wa-stage{transform:scale(.955)}
.wa-card.added .wa-stage{opacity:.45}
/* Mini-Raster, das die echte Heute-Anordnung 1:1 nachbildet */
.wa-stage-grid{
display:grid;
grid-auto-rows:minmax(var(--hw-unit,78px),auto);
grid-auto-flow:row;gap:12px;
}
.wa-stage-grid.cols1{grid-template-columns:1fr}
.wa-stage-grid.cols2{grid-template-columns:1fr 1fr}
/* Vorschau-Kacheln sind nicht interaktiv – der ganze Card-Tap fügt hinzu */
.wa-stage .hw{pointer-events:none}
.wa-stage .hw-title{margin-bottom:6px}
.wa-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 3px}
.wa-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.wa-plus{
width:27px;height:27px;border-radius:50%;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-size:17px;font-weight:700;line-height:1;
background:var(--acc);color:#fff;
box-shadow:0 2px 9px rgba(var(--acc-rgb),.42);
}
.wa-card.added .wa-plus{background:var(--green);box-shadow:none}
.wa-card.added .wa-name{color:var(--text2)}
/* S/M/L-Größenwahl – macht sichtbar, dass es jedes Widget in mehreren Größen gibt */
.wa-sizes{
display:inline-flex;gap:2px;align-self:center;
background:var(--g5);border-radius:9px;padding:2px;
}
.wa-size-seg{
font-size:10.5px;font-weight:800;letter-spacing:.4px;
color:var(--text2);padding:3px 11px;border-radius:7px;line-height:1;
cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .14s,color .14s;
}
.wa-size-seg.on{background:var(--acc);color:#fff;box-shadow:0 2px 7px rgba(var(--acc-rgb),.42)}
.wa-size-seg.wa-size-only{background:transparent;color:var(--text2);box-shadow:none;cursor:default}
.wa-card.added .wa-sizes{opacity:.5}
/* Während der Widget-Picker offen ist, die schwebende „＋ Widget / Fertig"-Leiste
ausblenden – sonst verdeckt sie die untersten Galerie-Kacheln. */
body.wpick-open #heute-edit-bar{display:none!important}
/* ── WEIGHT CARD: NEUE SEITE-AN-SEITE-LAYOUT ── */
#heute-weight-sec .weight-card-inner{
flex:1;min-height:0;
display:flex;flex-direction:column;
}
.weight-top-row{
display:flex;align-items:flex-start;gap:10px;
flex-shrink:0;margin-bottom:10px;
}
.weight-left{flex-shrink:0;min-width:80px}
/* Verkleinertes Gewicht-Widget: quadratisch, ohne Diagramm & Ziel-Block,
nur Gewicht + Verlaufs-Delta + Eintragen-Button. */
.weight-card-sm{aspect-ratio:1;display:flex;flex-direction:column;justify-content:center}
.weight-card-sm .weight-top-row{align-items:center;margin-bottom:0}
.weight-card-sm .weight-left{flex:1}
.weight-mini-wrap{
flex:1;min-width:0;
height:74px;
border-radius:10px;
overflow:hidden;
cursor:pointer;
position:relative;
background:rgba(var(--acc-rgb),.05);
-webkit-tap-highlight-color:transparent;
transition:opacity .12s;
}
.weight-mini-wrap:active{opacity:.7}
.weight-mini-wrap canvas{
width:100%!important;height:100%!important;display:block;
}
.weight-mini-tap-hint{
position:absolute;bottom:3px;right:6px;
font-size:9px;color:var(--text2);opacity:.5;
pointer-events:none;
}
.weight-mini-empty{
width:100%;height:100%;
display:flex;align-items:center;justify-content:center;
font-size:11px;color:var(--text2);opacity:.55;
}
/* Zahlen in der Card */
.weight-current-val{font-size:30px;font-weight:700;letter-spacing:-.5px;line-height:1.1}
.weight-current-unit{font-size:13px;color:var(--text2);font-weight:500}
.weight-delta{font-size:11px;font-weight:600;padding:2px 7px;border-radius:20px;margin-top:3px;display:inline-block}
.weight-delta.pos{background:rgba(255,59,48,.12);color:var(--red)}
.weight-delta.neg{background:rgba(52,199,89,.12);color:var(--green)}
.weight-delta.neu{background:var(--g5);color:var(--text2)}
.weight-add-btn{
background:var(--acc);border:none;border-radius:50%;
width:34px;height:34px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:#fff;font-size:22px;font-weight:300;line-height:1;
box-shadow:0 4px 14px rgba(var(--acc-rgb),.40);
margin-top:2px;
}
/* ── KÖRPERGEWICHT CARD ── */
.weight-card-inner{padding:16px;position:relative;z-index:1}
.weight-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.weight-current{display:flex;flex-direction:column;gap:2px}
.weight-current-val{font-size:32px;font-weight:700;letter-spacing:-.5px;line-height:1.1}
.weight-current-unit{font-size:14px;color:var(--text2);font-weight:500}
.weight-delta{font-size:12px;font-weight:600;padding:3px 8px;border-radius:20px;margin-top:4px;display:inline-block}
.weight-delta.pos{background:rgba(255,59,48,.12);color:var(--red)}
.weight-delta.neg{background:rgba(52,199,89,.12);color:var(--green)}
.weight-delta.neu{background:var(--g5);color:var(--text2)}
.weight-add-btn{
background:var(--acc);border:none;border-radius:50%;
width:36px;height:36px;display:flex;align-items:center;justify-content:center;
cursor:pointer;color:#fff;font-size:22px;flex-shrink:0;font-weight:300;line-height:1;
box-shadow:0 4px 14px rgba(var(--acc-rgb),.40);
}
.weight-chart-wrap{height:90px;position:relative;margin:0 -2px}
.weight-chart-wrap canvas{width:100%!important}
.weight-empty{font-size:14px;color:var(--text2);text-align:center;padding:20px 0 6px}
/* ── Ziel-Fortschritt ── */
.weight-goal-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--sep)}
.wgt-track-wrap{position:relative;height:8px;background:var(--g5);border-radius:99px;margin-bottom:7px}
.wgt-track-fill{
position:absolute;top:0;left:0;height:100%;border-radius:99px;
background:var(--green);
transition:width .65s cubic-bezier(.34,1.56,.64,1);
}
.wgt-track-fill.gain{background:var(--orange)}
.wgt-track-dot{
position:absolute;top:50%;transform:translate(-50%,-50%);
width:16px;height:16px;border-radius:50%;
background:var(--green);border:2.5px solid var(--gl-bg);
box-shadow:0 2px 8px rgba(52,199,89,.50);
transition:left .65s cubic-bezier(.34,1.56,.64,1);
}
.wgt-track-dot.gain{background:var(--orange);box-shadow:0 2px 8px rgba(255,149,0,.45)}
.wgt-track-labels{display:flex;justify-content:space-between;margin-bottom:10px}
.wgt-track-lbl{display:flex;flex-direction:column;gap:1px}
.wgt-track-lbl-val{font-size:13px;font-weight:700;color:var(--text)}
.wgt-track-lbl-sub{font-size:10px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.4px}
.wgt-track-lbl.right{text-align:right}
.wgt-stats-row{display:flex;align-items:center;justify-content:space-between}
.wgt-stat{display:flex;flex-direction:column;gap:1px}
.wgt-stat-val{font-size:17px;font-weight:800;color:var(--text)}
.wgt-stat-lbl{font-size:11px;color:var(--text2)}
.wgt-stat.right{text-align:right}
.wgt-pct-badge{
font-size:14px;font-weight:800;
color:var(--green);background:rgba(52,199,89,.12);
border-radius:20px;padding:5px 12px;
}
.wgt-pct-badge.gain{color:var(--orange);background:rgba(255,149,0,.12)}
/* Ziel erreicht */
.wgt-goal-done{
padding:12px 14px;border-radius:14px;
background:rgba(52,199,89,.10);border:1px solid rgba(52,199,89,.20);
text-align:center;
}
.wgt-goal-done-title{font-size:19px;font-weight:800;color:var(--green)}
.wgt-goal-done-sub{font-size:12px;color:var(--text2);margin-top:3px}
/* Ziel setzen Button */
.weight-set-goal-btn{
width:100%;margin-top:14px;padding:11px;
border-radius:13px;
background:rgba(var(--acc-rgb),.07);
border:1.5px dashed rgba(var(--acc-rgb),.28);
color:var(--acc);font-size:13px;font-weight:700;
cursor:pointer;font-family:inherit;
-webkit-tap-highlight-color:transparent;
transition:background .15s;
}
.weight-set-goal-btn:active{background:rgba(var(--acc-rgb),.14)}
/* Ziel bearbeiten Link */
.wgt-edit-link{
display:block;text-align:right;
font-size:11px;font-weight:600;color:var(--text2);
margin-top:8px;cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.wgt-edit-link:active{color:var(--acc)}
/* ── GEWICHTSVERLAUF SHEET ── */
.wh-item{overflow:hidden;border-radius:14px;margin-bottom:8px}
.wh-item-track{
display:flex;flex-direction:row;
width:calc(100% + 80px);
will-change:transform;
transition:transform .25s cubic-bezier(.25,.46,.45,.94);
}
.wh-item-row{
flex:1;min-width:0;
display:flex;align-items:center;padding:14px 16px;
background:var(--gl-bg-h);cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.wh-item-row:active{background:var(--g5)}
.wh-del-btn{
flex:none;width:80px;
background:var(--red);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:700;cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.wh-del-btn:active{opacity:.8}
.wh-item-date{flex:1;font-size:14px;color:var(--text2);font-weight:500}
.wh-item-val{font-size:19px;font-weight:800;color:var(--text);margin-right:4px}
.wh-item-unit{font-size:13px;font-weight:500;color:var(--text2)}
.wh-item-chevron{font-size:20px;color:var(--text2);line-height:1;margin-left:6px;opacity:.4}
/* ── LAST-CARD SWIPE (Letztes Training auf Heute) ── */
.last-swipe-wrap{overflow:hidden;border-radius:18px}
.last-swipe-inner{
display:flex;flex-direction:row;
width:calc(100% + 72px);
will-change:transform;
transition:transform .22s cubic-bezier(.25,.46,.45,.94);
}
.last-swipe-row{flex:1;min-width:0}
.last-swipe-del{
flex:none;width:72px;
background:var(--red);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:22px;cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.last-swipe-del:active{opacity:.8}
/* ── COMPACT HISTORY SWIPE ── */
.ch-swipe-wrap{overflow:hidden}
/* ── HISTORY-WIDGET: Höhe folgt Inhalt, kein festes Grid-Span ── */
.hw[data-type="history"].hw-lg{grid-row:auto!important;align-self:start;height:auto}
.hw[data-type="history"] .hw-content{flex:none}
.hw[data-type="history"] .hw-content>.card{height:auto!important}
/* ── WORKOUT CANCEL BUTTON ── */
.wk-cancel-btn{
background:transparent;border:1px solid var(--gl-bdr);
color:var(--text2);font-family:inherit;font-size:13px;font-weight:600;
padding:8px 12px;border-radius:10px;cursor:pointer;
transition:opacity .15s,color .15s,border-color .15s;
-webkit-tap-highlight-color:transparent;
flex-shrink:0;
}
.wk-cancel-btn:active{opacity:.6;color:var(--red);border-color:var(--red)}
/* ── KONFETTI ── */
.confetti-host{
position:fixed;inset:0;pointer-events:none;
z-index:5000;overflow:hidden;
}
.confetti-piece{
position:absolute;top:-12px;
width:9px;height:14px;border-radius:2px;
will-change:transform,opacity;
animation:confetti-fall linear forwards;
}
@keyframes confetti-fall{
0%{transform:translate3d(0,0,0) rotate(0);opacity:1}
100%{transform:translate3d(var(--cx,0),105vh,0) rotate(var(--cr,720deg));opacity:.85}
}
/* ── ÜBUNGS-SUCHE ── */
.ex-search-wrap{
padding:0 20px 10px;position:relative;
}
.ex-search{
width:100%;background:var(--inp-bg);
border:1px solid var(--gl-bdr);border-radius:var(--r-md);
padding:11px 14px 11px 38px;font-size:15px;font-family:inherit;
outline:none;color:var(--text);
transition:background .15s,border-color .15s,box-shadow .15s;
}
.ex-search:focus{
background:var(--inp-focus);border-color:var(--acc);
box-shadow:0 0 0 2px rgba(var(--acc-rgb),.16);
}
.ex-search::placeholder{color:var(--text2);opacity:.7}
/* Variante ohne Lupen-Icon — Text bleibt weiter rechts (statt links anzukleben) */
.ex-search.no-ico{padding-left:18px}
.ex-search-ico{
position:absolute;left:32px;top:50%;transform:translateY(-50%);
font-size:15px;opacity:.55;pointer-events:none;
}
.ex-search-clr{
position:absolute;right:30px;top:50%;transform:translateY(-50%);
background:none;border:none;font-size:18px;color:var(--text2);
cursor:pointer;padding:6px;line-height:1;display:none;
}
.ex-search-clr.on{display:block}
/* ── HEATMAP (Statistik) ── */
.heatmap-wrap{
padding:12px 10px;border-radius:18px;
background:var(--gl-bg);border:1px solid var(--gl-bdr);
backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat));
box-shadow:var(--gl-shad),var(--gl-hi);
overflow:hidden;position:relative;
box-sizing:border-box;max-width:100%;
}
.heatmap-scroll{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
padding-bottom:4px;
scrollbar-width:none;
max-width:100%;
}
.heatmap-scroll::-webkit-scrollbar{display:none}
.heatmap-months{display:flex;flex-wrap:nowrap;width:max-content;margin-bottom:3px}
.hm-month-lbl{font-size:9px;color:var(--text2);line-height:1;overflow:hidden;white-space:nowrap;flex-shrink:0}
.heatmap-grid{
display:grid;grid-auto-flow:column;grid-template-rows:repeat(7, 1fr);
gap:2px;width:max-content;
}
.hm-cell{
width:9px;height:9px;border-radius:2px;
background:rgba(128,128,128,.10);
transition:transform .12s;
}
.hm-cell.l1{background:rgba(var(--acc-rgb),.30)}
.hm-cell.l2{background:rgba(var(--acc-rgb),.55)}
.hm-cell.l3{background:rgba(var(--acc-rgb),.80)}
.hm-cell.l4{background:var(--acc)}
.hm-cell.today{outline:1.5px solid var(--text);outline-offset:1px}
.hm-cell:active{transform:scale(1.4)}
.heatmap-legend{
display:flex;align-items:center;justify-content:flex-end;
gap:6px;margin-top:8px;font-size:11px;color:var(--text2);
}
.heatmap-legend .hm-cell{cursor:default}
/* ── WOCHENÜBERSICHT (Kreise Mo–So) ── */
.week-card{
padding:14px 12px;border-radius:18px;
background:var(--gl-bg);border:1px solid var(--gl-bdr);
backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat));
box-shadow:var(--gl-shad),var(--gl-hi);
box-sizing:border-box;max-width:100%;cursor:pointer;
transition:transform .12s;
}
.week-card:active{transform:scale(.985)}
/* ── WOCHENLEISTE: Kapseln statt freistehender Kreise ────────────────────
Jeder Tag steht in einer eigenen hohen Kapsel, der Tagespunkt sitzt oben
darin. Der heutige Tag wird nicht durch einen Rahmen am Punkt markiert,
sondern dadurch, dass seine KAPSEL heller ist als die anderen und eine
Marke ueber sich traegt — so ist "heute" schon aus dem Augenwinkel zu
sehen, ohne dass der Punkt selbst seine Aussage (trainiert / nicht)
dafuer hergeben muss. Genau das war vorher der Konflikt: Rahmen fuer
heute und Fuellung fuer trainiert lagen auf demselben Element. */
.week-circles-row{display:flex;justify-content:space-between;gap:5px;padding-top:9px}
.week-day{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;min-width:0;position:relative}
.week-day-lbl{font-size:10.5px;color:var(--text2);font-weight:700;letter-spacing:.2px}
/* Die Marke ueber dem heutigen Tag. Ein kleines Dreieck, das nach unten auf
die Kapsel zeigt — es beansprucht keine Breite (position:absolute), sonst
ruecken die sieben Spalten beim Tageswechsel gegeneinander. */
.week-day.is-today::before{
content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);
width:0;height:0;border-left:4.5px solid transparent;border-right:4.5px solid transparent;
border-top:5px solid var(--text);opacity:.85;
}
.week-day.is-today .week-day-lbl{color:var(--text)}
.week-pill{
width:100%;max-width:38px;height:52px;border-radius:999px;
display:flex;align-items:flex-start;justify-content:center;padding-top:4px;
box-sizing:border-box;
background:var(--ng-well);
box-shadow:inset 0 0 0 1px var(--ng-well-bdr);
transition:background .25s ease,box-shadow .25s ease;
}
/* Die Kapsel des heutigen Tages: heller Grund und ein Saum in der
Akzentfarbe. Der Saum ist bewusst schwach — er soll die Spalte heben, nicht
mit dem Punkt darin um Aufmerksamkeit streiten. */
.week-pill.today{
background:var(--ng-well-on);
box-shadow:inset 0 0 0 1px var(--ng-well-on-bdr),
0 0 var(--gw-2) rgba(var(--acc-rgb),calc(.3 * var(--neon)));
}
.week-dot{
width:30px;height:30px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-size:12.5px;font-weight:800;line-height:1;
background:transparent;color:var(--text2);
border:none;box-sizing:border-box;flex-shrink:0;
}
.week-dot.l1{background:rgba(var(--acc-rgb),var(--ng-step-1));color:#fff}
.week-dot.l2{background:rgba(var(--acc-rgb),var(--ng-step-2));color:#fff}
.week-dot.l3{background:rgba(var(--acc-rgb),var(--ng-step-3));color:#fff}
.week-dot.l4{background:var(--acc);color:#fff}
.week-dot.future{opacity:.4}
/* Kommende Tage treten zurueck, verschwinden aber nicht: die Woche soll als
ganze lesbar bleiben, sonst weiss man am Montag nicht, wovon die zwei
gefuellten Punkte ein Teil sind. */
.week-pill.future{background:var(--ng-well-off);box-shadow:inset 0 0 0 1px var(--ng-well-off-bdr)}
/* ── Neon: die trainierten Tage leuchten ──────────────────────────────────
Der Schein liegt AUSSEN (box-shadow ohne inset) und die Farbe bleibt satt.
Die vier Stufen (l1–l4) markieren weiterhin, wie viel an dem Tag bewegt
wurde — sie leuchten deshalb unterschiedlich stark, nicht unterschiedlich
bunt. Ein Tag ist ein Tag; die Menge sagt der Schein. */
/* Dieselbe Staffel wie ueberall, nur mit steigender Deckkraft je Stufe: die
Menge sagt der Schein, nicht ein eigener Radius je Stufe. */
/* var(--neon-edge) als letzte Lage: auf hellem Grund kann ein Hof nichts mehr
ausrichten (er kann nur truebem), die Kontaktkante uebernimmt dort seine
Aufgabe — den Punkt vom Grund zu trennen. Diese vier Regeln waren die
EINZIGE Stelle der Neon-Familie ohne die Kante, deshalb klebten die
Wochenpunkte in hell flach auf der Karte. Auf Dark kostet es nichts, dort
ist das Token durchsichtig. */
.week-dot.l1{box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-2)),
var(--neon-edge)}
.week-dot.l2{box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--acc-rgb),var(--gwa-3)),
var(--neon-edge)}
.week-dot.l3{box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--acc-rgb),var(--gwa-2)),
var(--neon-edge)}
.week-dot.l4{box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--acc-rgb),var(--gwa-2)),
0 0 var(--gw-3) rgba(var(--acc-rgb),var(--gwa-3)),
var(--neon-edge)}
.week-dot svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:3;
stroke-linecap:round;stroke-linejoin:round;display:block}
/* Ein Tag ohne Training traegt sein Datum als blossen Umriss — kein gefuellter
Kreis. Die Zahl allein war frueher missverstaendlich (sie las sich wie ein
Wert), in der Kapsel mit Umriss ist sie eindeutig ein Datum. Der Unterschied
trainiert / nicht trainiert liegt jetzt in Fuellung und Schein, nicht mehr
darin, ob ueberhaupt etwas im Kreis steht. */
.week-dot:not(.l1):not(.l2):not(.l3):not(.l4){
background:transparent;
box-shadow:inset 0 0 0 1.5px var(--ng-outline);
}
/* ── Streak mit Flamme ────────────────────────────────────────────────────
Der Schein liegt HINTER der Flamme als eigener Kreis. Ein drop-shadow auf
dem SVG waere teurer und muesste bei jedem Neuzeichnen der Startseite neu
gerastert werden — hier reicht ein Verlauf, den der Compositor haelt. */
.hw-streak .hw-stat{display:flex;flex-direction:column;align-items:center;gap:2px}
.strk-flame{
position:relative;display:flex;align-items:center;justify-content:center;
/* Nur wenig groesser als die Flamme selbst. Vorher war der Ring fast doppelt
so breit — dadurch sah man vor allem den Schein und die Flamme darin wie
einen Funken. Der Schein soll sie umgeben, nicht ersetzen. */
width:calc(var(--fl) * 1.28);height:calc(var(--fl) * 1.28);
margin-bottom:5px;
}
.strk-flame::before{
content:'';position:absolute;inset:-12%;border-radius:50%;
background:radial-gradient(circle at 50% 58%,
rgba(255,150,50,.55) 0%, rgba(255,90,31,.28) 46%, rgba(255,90,31,0) 74%);
/* Das Lodern: der Schein atmet, die Flamme steht. Bewegt wird nur opacity
und transform — beides macht der Compositor allein, die Startseite
scrollt waehrenddessen unveraendert ruhig. */
animation:flmGlow 2.6s ease-in-out infinite;
}
/* Auch das Lodern haengt am zentralen Dimmer; die Bewegung bleibt, nur die
Helligkeit gibt nach. */
@keyframes flmGlow{
0%,100%{opacity:calc(.85 * var(--neon));transform:scale(1)}
50% {opacity:var(--neon); transform:scale(1.09)}
}
/* Die Bewegung bringt die Flamme selbst mit (.fl-outer/.fl-inner/.fl-core).
Hier kommt nur der Schein dazu — eine zweite Animation auf demselben
Element wuerde gegen ihre eigene laufen. */
.strk-flame .fl{position:relative;z-index:1;
/* Der Kern der Flamme stand bei .9 und war damit heller als jeder Ring —
auch sie folgt jetzt dem zentralen Dimmer. */
filter:drop-shadow(0 0 7px rgba(255,150,50,calc(.9 * var(--neon)))) drop-shadow(0 0 16px rgba(255,90,31,calc(.5 * var(--neon))))}
.strk-val{
font-size:30px;font-weight:800;line-height:1;color:var(--text);
font-variant-numeric:tabular-nums;display:flex;align-items:baseline;gap:5px;
}
.strk-val span{font-size:13px;font-weight:700;color:var(--text2)}
.hw-card.hw-streak .hw-sub{margin-top:3px}
/* Erloschen: kein Schein, gedaempfte Flamme. Eine leuchtende Flamme ueber
einer Null waere eine Feier fuer nichts. */
.hw-streak.is-aus .strk-flame::before{display:none}
.hw-streak.is-aus .strk-flame .fl{filter:grayscale(.7);opacity:.34}
.hw-streak.is-aus .strk-flame .fl-outer,
.hw-streak.is-aus .strk-flame .fl-inner,
.hw-streak.is-aus .strk-flame .fl-core{animation:none}
.hw-streak.is-aus .strk-val{color:var(--text2)}
@media (prefers-reduced-motion:reduce){
.strk-flame::before{animation:none}
.strk-flame .fl-outer,.strk-flame .fl-inner,.strk-flame .fl-core{animation:none}
}
.week-card-foot{
display:flex;align-items:center;justify-content:space-between;
margin-top:12px;font-size:12px;color:var(--text2);
}
.week-card-foot b{color:var(--text);font-weight:700}
/* ── KALENDER-OVERLAY ── */
/* Über die schwebende Tabbar (z-index 1000) heben, sonst verdeckt die Leiste
die untersten Kalender-Zeilen + die Legende ("weniger/mehr"). */
.ov-cal{z-index:1002}
.cal-card{
/* Transparenz etwas reduziert: zweite Tönungsschicht über dem Glas */
background-color:var(--gl-bg-h);
background-image:linear-gradient(var(--gl-bg), var(--gl-bg));
backdrop-filter:blur(60px) saturate(200%);
-webkit-backdrop-filter:blur(60px) saturate(200%);
border:1px solid var(--gl-bdr);
border-radius:24px 24px 0 0;
width:calc(100% - 24px);max-width:440px;margin:0 auto;
max-height:88vh;max-height:min(88vh,var(--sheet-cap));display:flex;flex-direction:column;
padding:4px 16px calc(16px + env(safe-area-inset-bottom));
box-shadow:0 -16px 56px rgba(0,0,0,.32);
animation:up .28s cubic-bezier(.32,1,.32,1);
}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-head-title{font-size:17px;font-weight:700}
/* Seitliche Luft fuer die Ringe, ohne die Spalten schmaler zu machen.
overflow-y:auto schaltet in CSS auch die X-Achse auf Beschneiden — und das
Gitter fuellt die Box exakt aus. Der Akzentring von "heute" liegt 5px AUSSEN
um die Zelle; faellt der Tag auf einen Montag oder Sonntag, lief er genau in
diese Kante und war zur Haelfte abgeschnitten (dasselbe gilt fuer den
Schatten der vollen Trainingstage). Das Innenmass bleibt durch das negative
Aussenmass unveraendert, die Box wuchert nur in das Kartenpolster hinein. */
.cal-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1;min-height:0;
padding-left:6px;padding-right:6px;margin-left:-6px;margin-right:-6px}
.cal-month{margin-bottom:18px}
.cal-month-title{font-size:14px;font-weight:700;color:var(--text);margin:0 2px 8px}
.cal-weekhdr{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px}
.cal-weekhdr span{text-align:center;font-size:10px;color:var(--text2);font-weight:600}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:40px;gap:4px}
/* Tage ohne Training bekommen keine FUELLUNG — die grauen Kaestchen bildeten im
Gitter ein Streifenmuster. Ohne Fuellung war aber auch das Feld weg und das
Gitter loeste sich in einzelne Zahlen auf. Beides loest eine Haarlinie nach
innen: sie zeichnet das Feld, ohne Flaeche zu setzen.
Neutrales Grau statt --gl-bdr: die Glas-Variable ist in den hellen Themes
WEISS und waere auf dem hellen Blatt unsichtbar. 128,128,128 traegt in hell
wie dunkel. */
.cal-cell{
border-radius:9px;min-width:0;
display:flex;align-items:center;justify-content:center;
font-size:12px;color:var(--text);
background:transparent;
box-shadow:inset 0 0 0 1px rgba(128,128,128,.22);
}
/* Platzhalter vor dem Monatsersten sind KEIN Tag — sie bekommen auch kein Feld. */
.cal-cell.empty{background:transparent;box-shadow:none}
/* Trainingstage tragen ihre Flaeche; ein Rahmen darauf waere ein zweiter Rand. */
.cal-cell.l1{background:rgba(var(--acc-rgb),.30);color:var(--text);box-shadow:none}
.cal-cell.l2{background:rgba(var(--acc-rgb),.55);color:#fff;box-shadow:none}
.cal-cell.l3{background:rgba(var(--acc-rgb),.80);color:#fff;box-shadow:none}
.cal-cell.l4{background:var(--acc);color:#fff;box-shadow:none}
.cal-cell.today{outline:2px solid var(--text);outline-offset:-2px}
.cal-cell.has-sess{cursor:pointer}
.cal-cell.has-sess:active{transform:scale(.9)}
.cal-month-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cal-day-chip{
display:inline-flex;align-items:center;gap:4px;
padding:4px 9px;border-radius:9px;font-size:11.5px;
background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.22);
color:var(--text);cursor:pointer;transition:transform .12s,background .2s;
}
.cal-day-chip b{color:var(--acc)}
.cal-day-chip:active{transform:scale(.95);background:rgba(var(--acc-rgb),.2)}
.cal-legend{
display:flex;align-items:center;justify-content:flex-end;
gap:6px;margin-top:10px;font-size:11px;color:var(--text2);
}
/* Die Legende zeigt dasselbe wie das Gitter: "kein Training" ist ein leeres
Feld mit Kontur, keine graue Flaeche. Die Kontur erbt sie von .cal-cell. */
.cal-legend .cal-cell{width:14px;height:14px;aspect-ratio:auto;border-radius:4px}
/* ── KALENDER: ANSICHTS-UMSCHALTER (Monate ⇄ Matrix) ──────────────
Segmented Control mit gleitender Kapsel. Liegt unter dem Kopf, damit der
Daumen ihn erreicht, ohne den Gitter-Bereich zu verdecken. */
.cal-modes{
position:relative;display:grid;grid-template-columns:1fr 1fr;
gap:2px;padding:3px;margin:2px 0 10px;
border-radius:13px;background:var(--gl-ctrl,rgba(128,128,128,.10));
border:1px solid var(--gl-bdr,rgba(128,128,128,.18));
}
.cal-modes::before{
content:'';position:absolute;top:3px;bottom:3px;left:3px;
width:calc(50% - 4px);border-radius:10px;
background:rgba(var(--acc-rgb),.90);
box-shadow:0 2px 10px rgba(var(--acc-rgb),.30),inset 0 1px 0 rgba(255,255,255,.25);
transition:transform .34s cubic-bezier(.32,1,.32,1);
}
.cal-modes[data-mode="matrix"]::before{transform:translateX(calc(100% + 2px))}
.cal-mode-btn{
position:relative;z-index:1;border:0;background:none;
padding:7px 4px;border-radius:10px;cursor:pointer;
font-size:12.5px;font-weight:700;letter-spacing:.02em;
color:var(--text2);transition:color .22s;text-transform:capitalize;
}
.cal-mode-btn.on{color:#fff}
.cal-view[hidden]{display:none}
.cal-view{display:flex;flex-direction:column;flex:1;min-height:0;animation:calFade .26s ease}
@keyframes calFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* ── MATRIX-ANSICHT (Jahres-Raster, Wochen × Wochentage) ── */
.mx{--mxc:15px;--mxg:4px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.mx-range{display:flex;gap:6px;margin-bottom:12px;align-items:stretch}
.mx-range button.mx-full-btn{
flex:0 0 44px; /* schlägt das flex:1 der Range-Chips */border-radius:10px;cursor:pointer;
display:flex;align-items:center;justify-content:center;
background:var(--gl-ctrl,rgba(128,128,128,.08));
border:1px solid var(--gl-bdr,rgba(128,128,128,.16));
color:var(--text2);transition:background .2s,color .2s,transform .12s;
}
.mx-full-btn svg{width:16px;height:16px}
.mx-full-btn:active{transform:scale(.94)}
.mx-full-btn.on{background:rgba(var(--acc-rgb),.16);border-color:rgba(var(--acc-rgb),.42);color:var(--acc)}
.mx-range button{
flex:1;padding:6px 4px;border-radius:10px;cursor:pointer;
font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;
background:var(--gl-ctrl,rgba(128,128,128,.08));
border:1px solid var(--gl-bdr,rgba(128,128,128,.16));
color:var(--text2);transition:background .2s,color .2s,transform .12s;
}
.mx-range button:active{transform:scale(.96)}
.mx-range button.on{
background:rgba(var(--acc-rgb),.16);border-color:rgba(var(--acc-rgb),.42);
color:var(--acc);
}
.mx-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:12px}
.mx-stat{
padding:9px 6px 10px;border-radius:14px;text-align:center;
background:var(--gl-ctrl,rgba(128,128,128,.07));
border:1px solid var(--gl-bdr,rgba(128,128,128,.14));
box-shadow:var(--gl-rim,none);
}
.mx-stat b{
display:block;font-size:19px;font-weight:800;line-height:1.1;
font-variant-numeric:tabular-nums;color:var(--text);
}
.mx-stat span{
display:block;margin-top:3px;font-size:9.5px;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--text2);
}
.mx-scroll{
overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
padding-bottom:4px;scrollbar-width:none;
}
.mx-scroll::-webkit-scrollbar{display:none}
.mx-board{display:flex;gap:6px;align-items:flex-start}
.mx-board .mx-scroll{flex:1;min-width:0}
.mx-wdcol{display:grid;grid-template-rows:14px repeat(7,var(--mxc));gap:var(--mxg)}
.mx-wdcol span{
font-size:9px;font-weight:600;color:var(--text2);
display:flex;align-items:center;justify-content:flex-end;
min-width:16px;line-height:1;
}
.mx-cols{display:flex;flex-direction:column;gap:var(--mxg);width:max-content}
.mx-mrow{display:flex;gap:var(--mxg);height:14px}
.mx-m{
flex:0 0 var(--mxc);width:var(--mxc);position:relative;
font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
color:var(--text2);white-space:nowrap;overflow:visible;line-height:14px;
}
.mx-grid{display:flex;gap:var(--mxg)}
.mx-col{display:grid;grid-template-rows:repeat(7,var(--mxc));gap:var(--mxg)}
/* Höhere Spezifität als die Feinschliff-Regeln für .cal-cell weiter unten —
sonst erben die Matrix-Felder deren 12px-Radius und den großen Heute-Ring. */
.mx .mx-cell{
width:var(--mxc);height:var(--mxc);border-radius:4.5px;
font-size:0;padding:0;min-width:0;
transition:transform .12s var(--press,ease),box-shadow .2s;
}
/* Zukunftstage: dasselbe leere Feld wie ein vergangener Tag ohne Training, nur
eine Spur blasser. Vorher stand hier --gl-bdr — in den hellen Themes ist die
Variable WEISS, das Feld also unsichtbar; und weil die Vergangenheit gar
keine Kontur hatte, war ausgerechnet die Zukunft der einzige sichtbare Teil
des Rasters. */
.mx .mx-cell.future{
background:transparent;
box-shadow:inset 0 0 0 1px rgba(128,128,128,.15);
pointer-events:none;
}
.mx .mx-cell.today{box-shadow:0 0 0 1.5px var(--acc),0 0 0 3.5px rgba(var(--acc-rgb),.18)}
.mx .mx-cell.sel{box-shadow:0 0 0 1.5px var(--text),0 0 0 4px rgba(var(--acc-rgb),.22);transform:scale(1.12)}
.mx .mx-cell.tap{cursor:pointer}
.mx .mx-cell.tap:active{transform:scale(.86)}
.mx-sel{
margin-top:12px;min-height:38px;display:flex;align-items:center;gap:9px;
padding:9px 12px;border-radius:14px;font-size:12.5px;color:var(--text);
background:var(--gl-ctrl,rgba(128,128,128,.07));
border:1px solid var(--gl-bdr,rgba(128,128,128,.14));
animation:calFade .2s ease;
}
.mx-sel .mx-sel-d{font-weight:700;font-variant-numeric:tabular-nums}
.mx-sel .mx-sel-v{margin-left:auto;color:var(--text2);font-size:11.5px;white-space:nowrap}
.mx-sel.empty{color:var(--text2);justify-content:center;font-size:12px}
.mx-sel.tap{cursor:pointer}
.mx-sel.tap:active{transform:scale(.99)}
/* ── VOLLANSICHT: ganze Jahre untereinander, kein Querscrollen ──
Zellgröße wird in JS aus der Breite berechnet, damit 53 Wochen exakt
in eine Zeile passen (Stronger-Look). */
.cal-card.full{max-height:none;height:var(--sheet-cap)}
.mx.full{min-height:0;overflow:hidden}
.mx.full .mx-board{display:flex;flex-direction:column;flex:1;min-height:0}
.mx.full .mx-scroll{overflow-x:hidden;overflow-y:auto;flex:1;min-height:0;width:100%}
.mx.full > .mx-board > .mx-wdcol{display:none} /* je Jahresblock eigene Spalte */
.mx-year{margin-bottom:22px}
.mx-year-head{
display:flex;align-items:baseline;justify-content:space-between;
margin:0 0 8px;
}
.mx-year-head b{font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.mx-year-head span{font-size:11.5px;font-weight:600;color:var(--text2);font-variant-numeric:tabular-nums}
.mx-year-body{display:flex;gap:5px;align-items:flex-start}
/* Jahres-Ansicht: alle sieben Wochentage stehen an der Spalte. Die Zellen sind
hier nur ~4px hoch, darum bekommt die Vollansicht einen eigenen VERTIKALEN
Abstand (--mxgv) — sonst ist die Zeilenhoehe kleiner als die Schrift und es
passte nur jeder zweite Tag hinein. */
.mx-year .mx-wdcol{grid-template-rows:12px repeat(7,var(--mxc));gap:var(--mxgv,var(--mxg))}
.mx.full .mx-col{gap:var(--mxgv,var(--mxg))}
/* Auch der Abstand Monatszeile → Raster muss --mxgv sein. Sonst startet die
Wochentags-Spalte (Kopf + --mxgv) tiefer als das Raster (Kopf + --mxg) und
jedes Label sitzt um die Differenz neben seiner Zeile. */
.mx.full .mx-cols{gap:var(--mxgv,var(--mxg))}
.mx-year .mx-wdcol span{font-size:7.5px;letter-spacing:-.02em;min-width:20px}
.mx-year .mx-mrow{height:12px}
.mx-year .mx-m{line-height:12px;font-size:8.5px;letter-spacing:.02em}
/* Vollansicht: die Zelle ist nur noch wenige Pixel gross. Eine 1px-Kontur in
voller Staerke fuellte sie fast — hier reicht ein Hauch, das Raster traegt
ohnehin schon der Abstand zwischen den Zellen. */
.mx.full .mx-cell{border-radius:1.5px;box-shadow:inset 0 0 0 1px rgba(128,128,128,.12)}
.mx.full .mx-cell.l1,.mx.full .mx-cell.l2,
.mx.full .mx-cell.l3,.mx.full .mx-cell.l4{box-shadow:none}
.mx-mrow.m12{display:grid;grid-template-columns:repeat(12,1fr);gap:0;width:100%}
.mx-m12{
font-size:8.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--text2);line-height:12px;text-align:center;
}
.mx.full .mx-cell.today{box-shadow:0 0 0 1px var(--acc),0 0 0 2.5px rgba(var(--acc-rgb),.20)}
.mx.full .mx-cell.sel{box-shadow:0 0 0 1px var(--text),0 0 0 3px rgba(var(--acc-rgb),.22);transform:scale(1.3)}
.mx-year-empty{font-size:11.5px;color:var(--text2);padding:2px 0 4px}
/* In der Vollansicht zählt jedes Jahr für sich → Range-Chips und die
Gesamt-Kacheln verschwinden, die Zahlen stehen in den Jahres-Köpfen. */
.mx.full .mx-stats{display:none}
.mx.full .mx-range button:not(.mx-full-btn){display:none}
.mx.full .mx-range{justify-content:flex-end}
/* ── MID-ADD FOOTER (Button unter Übungsliste im aktiven Training) ── */
.mid-add-footer{
flex-shrink:0;padding:10px 16px 16px;
padding-bottom:max(16px, calc(env(safe-area-inset-bottom,0px) + 16px));
border-top:1px solid var(--gl-bdr);
}
/* ── SET-TYPE BADGE (Drop / Warmup / Failure) ── */
.set-row{grid-template-columns:26px 24px 26px 1fr 1fr 30px !important}
.set-hdr{grid-template-columns:26px 24px 26px 1fr 1fr 30px !important}
.set-type{
width:24px;height:26px;border-radius:8px;
border:1px solid var(--gl-bdr);background:var(--inp-bg);
font-size:11px;font-weight:800;color:var(--text2);
display:flex;align-items:center;justify-content:center;
cursor:pointer;padding:0;font-family:inherit;
transition:transform .15s,background-color .15s,background .15s,color .15s,border-color .15s,box-shadow .15s,opacity .15s;letter-spacing:-.3px;
}
.set-type.normal{}
.set-type.warmup{background:rgba(255,149,0,.20);border-color:rgba(255,149,0,.45);color:var(--orange)}
.set-type.top{background:rgba(175,82,222,.18);border-color:rgba(175,82,222,.45);color:#AF52DE}
/* Backoff in Teal — der einzige freie Platz zwischen Aufwaermen (orange),
Top-Satz (lila), Drop-Satz (blau/Akzent) und Versagen (rot). Bewusst NICHT
gruen: gruen steht in dieser App durchgehend fuer "erholt/fertig" und wuerde
an einem Satztyp etwas anderes behaupten. */
.set-type.backoff{background:rgba(46,211,198,.18);border-color:rgba(46,211,198,.45);color:#2ED3C6}
.set-type.drop{background:rgba(0,122,255,.18);border-color:rgba(var(--acc-rgb),.45);color:var(--acc)}
.set-type.fail{background:rgba(255,59,48,.18);border-color:rgba(255,59,48,.45);color:var(--red)}
.set-type:active{transform:scale(.86)}
/* ── SET-TYPE EXPLAIN POPUP ── */
.settype-body{display:flex;flex-direction:column;gap:10px;padding:6px 20px calc(24px + var(--sab))}
.settype-card{
display:flex;align-items:flex-start;gap:14px;
background:var(--gl-bg);border:1.5px solid var(--gl-bdr2);
border-radius:18px;padding:14px 16px;
cursor:pointer;font-family:inherit;text-align:left;
transition:background .15s,border-color .15s,transform .15s;
color:var(--text);
}
.settype-card:active{transform:scale(.98)}
.settype-card.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.08)}
.settype-badge{
width:38px;height:38px;border-radius:11px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
font-weight:800;font-size:15px;letter-spacing:-.3px;
border:1.5px solid var(--gl-bdr2);background:var(--inp-bg);color:var(--text2);
}
.settype-badge.warmup{background:rgba(255,149,0,.20);border-color:rgba(255,149,0,.45);color:var(--orange)}
.settype-badge.top {background:rgba(175,82,222,.20);border-color:rgba(175,82,222,.45);color:#AF52DE}
.settype-badge.backoff{background:rgba(46,211,198,.20);border-color:rgba(46,211,198,.45);color:#2ED3C6}
.settype-badge.drop {background:rgba(0,122,255,.18);border-color:rgba(var(--acc-rgb),.45);color:var(--acc)}
.settype-badge.fail {background:rgba(255,59,48,.18);border-color:rgba(255,59,48,.45);color:var(--red)}
.settype-info{flex:1;min-width:0}
.settype-name{font-size:16px;font-weight:700;margin-bottom:3px}
.settype-desc{font-size:13px;color:var(--text2);line-height:1.45}
/* ── LAST-TIME HINT (Live-Vergleich) ── */
.set-prev-hint{
grid-column:4 / span 2;
font-size:10.5px;color:var(--text2);
text-align:center;letter-spacing:.2px;
margin:-2px 0 6px;opacity:.78;
font-variant-numeric:tabular-nums;
}
.set-prev-hint b{color:var(--text);font-weight:600}
/* ── EXERCISE LIBRARY PICKER ── */
.lib-trigger{
display:flex;align-items:center;gap:12px;
padding:12px 14px;border-radius:14px;
background:linear-gradient(135deg,rgba(var(--acc-rgb),.10),rgba(var(--acc-rgb),.04));
border:1px solid rgba(var(--acc-rgb),.22);
cursor:pointer;width:100%;font-family:inherit;
text-align:left;transition:opacity .15s;
}
.lib-trigger:active{opacity:.7}
.lib-trigger-body{flex:1;min-width:0}
.lib-trigger-title{font-size:14px;font-weight:700;color:var(--acc)}
.lib-trigger-sub{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.3}
.lib-trigger-chev{color:var(--acc);font-size:18px;opacity:.6}
.lib-cat-row{
display:flex;gap:7px;overflow-x:auto;-webkit-overflow-scrolling:touch;
padding:6px 20px 10px;scrollbar-width:none;
}
.lib-cat-row::-webkit-scrollbar{display:none}
.lib-cat{
flex-shrink:0;background:var(--gl-bg);border:1px solid var(--gl-bdr);
border-radius:18px;padding:7px 14px;font-size:13px;font-weight:600;
color:var(--text);cursor:pointer;font-family:inherit;
transition:transform .15s,background-color .15s,background .15s,color .15s,border-color .15s,box-shadow .15s,opacity .15s;
}
.lib-cat.on{background:var(--acc);border-color:var(--acc);color:#fff}
.lib-list{padding:0 20px 20px;max-height:62vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.lib-item{
display:flex;align-items:center;gap:12px;
padding:12px 12px;border-radius:14px;cursor:pointer;
transition:background .12s;
border-bottom:1px solid var(--sep);
}
.lib-item:active{background:rgba(var(--acc-rgb),.08)}
.lib-item:last-child{border-bottom:none}
.lib-ico{
width:38px;height:38px;border-radius:11px;flex-shrink:0;
background:var(--gl-bg);border:1px solid var(--gl-bdr);
display:flex;align-items:center;justify-content:center;font-size:20px;
}
.lib-name{font-size:15px;font-weight:600;color:var(--text);line-height:1.25}
.lib-mg{font-size:12px;color:var(--text2);margin-top:2px}
.lib-already{font-size:11px;color:var(--green);font-weight:700;margin-left:auto;flex-shrink:0}
/* ── TRAININGSPLAN-TEMPLATES ── */
.tpl-trigger{
display:flex;align-items:center;gap:12px;margin:0 20px 12px;
padding:13px 14px;border-radius:16px;
background:linear-gradient(135deg,rgba(var(--acc-rgb),.12),rgba(var(--acc-rgb),.05));
border:1px solid rgba(var(--acc-rgb),.25);
cursor:pointer;font-family:inherit;
transition:opacity .15s;
}
.tpl-trigger:active{opacity:.7}
.tpl-trigger-ico{font-size:24px;flex-shrink:0}
.tpl-trigger-body{flex:1;min-width:0}
.tpl-trigger-title{font-size:15px;font-weight:700;color:var(--acc)}
.tpl-trigger-sub{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.35}
.tpl-trigger-chev{color:var(--acc);font-size:20px;opacity:.6}
.tpl-list{padding:6px 20px 20px;display:flex;flex-direction:column;gap:10px}
.tpl-card{
padding:14px 16px;border-radius:16px;
background:var(--gl-bg);border:1px solid var(--gl-bdr);
backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
cursor:pointer;font-family:inherit;text-align:left;
transition:transform .12s,border-color .15s;
}
.tpl-card:active{transform:scale(.98)}
.tpl-card-head{
display:flex;align-items:center;gap:10px;margin-bottom:6px;
}
.tpl-card-emoji{font-size:22px}
.tpl-card-title{font-size:16px;font-weight:700;color:var(--text);flex:1}
.tpl-card-freq{
font-size:11px;font-weight:700;color:var(--acc);
background:rgba(var(--acc-rgb),.12);
padding:3px 9px;border-radius:10px;
}
.tpl-card-desc{font-size:13px;color:var(--text2);line-height:1.4}
.tpl-card-days{
display:flex;gap:5px;flex-wrap:wrap;margin-top:8px;
}
.tpl-day-chip{
font-size:11px;font-weight:600;color:var(--text2);
background:rgba(128,128,128,.10);border-radius:8px;
padding:3px 8px;
}
.tpl-warn{
padding:11px 13px;border-radius:12px;margin:0 20px 14px;
background:rgba(255,149,0,.10);border:1px solid rgba(255,149,0,.25);
font-size:12.5px;color:var(--text2);line-height:1.4;
}
.tpl-warn b{color:var(--orange)}
/* ── AUTO-UPDATE TOAST ── */
#update-toast{
position:fixed;top:calc(var(--sat) + 12px);left:50%;
transform:translateX(-50%) translateY(-120px);
background:var(--acc);color:#fff;
padding:12px 22px;border-radius:14px;
font-size:14px;font-weight:600;
z-index:9999;white-space:nowrap;
box-shadow:0 4px 20px rgba(0,0,0,.3);
transition:transform .35s cubic-bezier(.34,1.56,.64,1);
pointer-events:none;
}
#update-toast.show{transform:translateX(-50%) translateY(0);}
/* ── Native-App Update-Banner (App Store) ── */
#native-update-bar{
position:fixed;left:50%;top:calc(var(--sat) + 10px);
transform:translateX(-50%) translateY(-180px);
width:calc(100% - 20px);max-width:440px;
display:flex;align-items:center;gap:11px;
padding:12px 13px;border-radius:22px;
background:var(--gl-bg-h);
backdrop-filter:blur(40px) saturate(200%);-webkit-backdrop-filter:blur(40px) saturate(200%);
border:1px solid var(--gl-bdr);
box-shadow:0 12px 38px rgba(0,0,0,.30),var(--gl-hi);
z-index:9998;
visibility:hidden;pointer-events:none;
transition:transform .42s cubic-bezier(.34,1.4,.64,1),visibility 0s .42s;
}
#native-update-bar.show{transform:translateX(-50%) translateY(0);visibility:visible;pointer-events:auto;transition:transform .42s cubic-bezier(.34,1.4,.64,1)}
/* App-Icon im App-Store-Stil */
.nub-ico{
flex-shrink:0;width:50px;height:50px;border-radius:12px;
object-fit:cover;display:block;
box-shadow:0 1px 3px rgba(0,0,0,.22),inset 0 0 0 .5px rgba(255,255,255,.14);
}
.nub-txt{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center}
.nub-title{font-size:15px;font-weight:700;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nub-sub{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Blauer App-Store-Pill-Button */
.nub-btn{
flex-shrink:0;border:none;font-family:inherit;cursor:pointer;
background:rgba(120,120,128,.18);color:#0a84ff;
font-size:11.5px;font-weight:800;letter-spacing:.2px;text-transform:uppercase;
padding:8px 13px;border-radius:100px;
transition:background .12s,transform .12s;
}
.nub-btn:active{background:rgba(120,120,128,.30);transform:scale(.95)}
.nub-x{
flex-shrink:0;border:none;background:transparent;color:var(--text2);
width:18px;height:18px;border-radius:50%;cursor:pointer;opacity:.5;
font-size:11px;font-weight:600;display:flex;align-items:center;justify-content:center;
margin-left:-2px;padding:0;
}
.nub-x:active{opacity:.85}
/* ── CHANGELOG POPUP (Was ist neu) ── */
.changelog-card{
background:var(--gl-bg-h);
backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat));
border:1px solid var(--gl-bdr);
border-radius:28px;
width:100%;max-width:380px;
box-shadow:var(--gl-shad-lg),var(--gl-hi);
overflow:hidden;
animation:changelog-pop .42s cubic-bezier(.34,1.56,.64,1);
position:relative;
}
.changelog-card::after{
content:'';position:absolute;top:0;left:0;right:0;height:90px;
background:var(--sheen);pointer-events:none;border-radius:28px 28px 0 0;
}
@keyframes changelog-pop{
from{opacity:0;transform:scale(.82) translateY(20px)}
to {opacity:1;transform:scale(1) translateY(0)}
}
.changelog-hero{
text-align:center;padding:30px 20px 14px;position:relative;z-index:1;
}
.changelog-badge{
display:inline-flex;align-items:center;gap:6px;
background:var(--acc);
color:#fff;border-radius:20px;
padding:6px 16px;font-size:13px;font-weight:700;
letter-spacing:.2px;margin-bottom:14px;
box-shadow:0 2px 8px rgba(var(--acc-rgb),.25);
}
.changelog-title{font-size:22px;font-weight:700;letter-spacing:-.3px;margin-bottom:4px}
.changelog-version{font-size:13px;color:var(--text2);margin-top:2px}
.changelog-list{
margin:0;padding:0 20px 4px;list-style:none;
position:relative;z-index:1;
}
.changelog-list li{
display:flex;gap:12px;align-items:flex-start;
padding:11px 0;border-bottom:1px solid var(--sep);
font-size:15px;line-height:1.4;
}
.changelog-list li:last-child{border-bottom:none}
.changelog-dot{
width:8px;height:8px;border-radius:50%;
background:var(--acc);
flex-shrink:0;margin-top:5px;
}
.changelog-footer{padding:16px 20px calc(18px + var(--sab));position:relative;z-index:1}
.changelog-scroll{max-height:60vh;overflow-y:auto;position:relative;z-index:1}
.changelog-section{padding:0 20px}
.changelog-section + .changelog-section{
margin-top:6px;border-top:1px solid var(--sep);padding-top:10px;
}
.changelog-section .changelog-list{padding:0}
.changelog-section .changelog-list li{font-size:14px;padding:9px 0}
.changelog-section-head{
display:flex;align-items:center;gap:8px;
padding:10px 0 4px;
font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
color:var(--text2);
}
.changelog-section-head .ver-pill{
background:rgba(var(--acc-rgb),.14);color:var(--acc);
padding:2px 9px;border-radius:9px;font-size:10.5px;
}
.changelog-summary{
text-align:center;font-size:12px;color:var(--text2);
padding:6px 20px 2px;position:relative;z-index:1;
}
/* ── DRAG-AND-DROP: ÜBUNG → WOCHENPLAN ── */
.ex-drag-handle{
width:30px;height:46px;
display:flex;align-items:center;justify-content:center;
color:var(--text2);opacity:.35;
font-size:17px;flex-shrink:0;
cursor:grab;touch-action:none;
-webkit-tap-highlight-color:transparent;
user-select:none;-webkit-user-select:none;
}
.ex-drag-handle:active{opacity:.7;cursor:grabbing}
/* ── SWIPE-TO-DELETE: ÜBUNGEN ── */
.ex-swipe-wrap{overflow:hidden}
.ex-swipe-inner{
display:flex;flex-direction:row;
width:calc(100% + 72px);
will-change:transform;
transition:transform .22s cubic-bezier(.25,.46,.45,.94);
}
.ex-row{flex:1;min-width:0}
.ex-row-del{
flex:none;width:72px;
background:var(--red);color:#fff;
display:flex;align-items:center;justify-content:center;
font-size:22px;cursor:pointer;
-webkit-tap-highlight-color:transparent;
}
.ex-row-del:active{opacity:.8}
.ex-row-remove{font-size:13px;font-weight:600;line-height:1.1;text-align:center;padding:0 6px}
.dnd-ghost{
position:fixed;z-index:9999;pointer-events:none;
background:var(--gl-bg-h);
backdrop-filter:blur(20px) saturate(200%);
-webkit-backdrop-filter:blur(20px) saturate(200%);
border:1.5px solid var(--acc);border-radius:16px;
padding:10px 16px;display:flex;align-items:center;gap:10px;
box-shadow:0 8px 32px rgba(0,0,0,.28),0 2px 8px rgba(var(--acc-rgb),.22);
transform:scale(1.04) rotate(-1.5deg);opacity:.94;
max-width:220px;white-space:nowrap;overflow:hidden;
}
.dnd-ghost-emoji{font-size:20px}
.dnd-ghost-name{font-size:13px;font-weight:700;color:var(--text)}
.wk-prev-day.dnd-over{
border-color:var(--acc) !important;
background:rgba(var(--acc-rgb),.22) !important;
transform:scale(1.10) !important;
box-shadow:0 0 0 2px rgba(var(--acc-rgb),.40) !important;
z-index:2;
}
.plan-day.dnd-over{
background:rgba(var(--acc-rgb),.18) !important;
box-shadow:inset 0 0 0 2px var(--acc);
}
.ex-row.dnd-row-over{
background:rgba(var(--acc-rgb),.10) !important;
box-shadow:inset 0 2px 0 var(--acc);
}
.split-chip-row{
display:flex;gap:8px;flex-wrap:wrap;
padding:0 20px 10px;
}
.split-chip{
display:inline-flex;align-items:center;gap:6px;
padding:8px 12px;border-radius:14px;
background:rgba(var(--acc-rgb),.12);
border:1px solid rgba(var(--acc-rgb),.30);
color:var(--acc);font-size:13px;font-weight:700;
cursor:grab;touch-action:none;
-webkit-tap-highlight-color:transparent;
user-select:none;-webkit-user-select:none;
transition:transform .12s;
}
.split-chip:active{cursor:grabbing;transform:scale(.96)}
.split-chip .split-grab{opacity:.6;font-size:12px;letter-spacing:-2px}
.ex-week-hint{
font-size:11px;color:var(--text2);text-align:center;
padding:5px 20px 2px;letter-spacing:.1px;opacity:.7;
}
/* ── ADMIN STATISTIK ── */
.stat-grid{
display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;
}
.stat-tile{
background:var(--gl-bg);
backdrop-filter:blur(20px) saturate(180%);
-webkit-backdrop-filter:blur(20px) saturate(180%);
border:1px solid var(--gl-bdr);border-radius:14px;
padding:14px 12px;text-align:center;
box-shadow:var(--gl-shad),var(--gl-hi);
position:relative;overflow:hidden;
}
.stat-tile::after{
content:'';position:absolute;top:0;left:0;right:0;height:50%;
background:var(--sheen);pointer-events:none;
}
.stat-num{
font-size:24px;font-weight:700;color:var(--acc);
font-variant-numeric:tabular-nums;line-height:1.1;
position:relative;z-index:1;
}
.stat-lab{
font-size:11px;color:var(--text2);font-weight:600;
letter-spacing:.3px;margin-top:4px;
position:relative;z-index:1;
}
.stat-live .ico{font-size:18px}
.stat-live{margin-bottom:14px}
/* ── MINI WORKOUT BANNER (Training läuft im Hintergrund) ── */
#wk-mini{
position:fixed;left:10px;right:10px;
top:calc(env(safe-area-inset-top,0px) + 8px);
z-index:1050;display:none;
background:var(--gl-bg-h);
backdrop-filter:blur(28px) saturate(220%);
-webkit-backdrop-filter:blur(28px) saturate(220%);
border:1px solid rgba(var(--acc-rgb),.45);
border-radius:16px;padding:10px 14px;
align-items:center;gap:12px;
box-shadow:0 8px 28px rgba(0,0,0,.22),0 0 0 1px rgba(var(--acc-rgb),.20);
cursor:pointer;-webkit-tap-highlight-color:transparent;
animation:wkMiniIn .28s cubic-bezier(.32,1,.32,1);
}
#wk-mini.on{display:flex}
/* Wenn das Banner läuft: Header-Inhalt nach unten schieben, damit das Banner
nichts überdeckt. Der Header-Hintergrund (Glas) zieht bis nach oben durch,
sodass kein blanker Hintergrund hinter dem Banner sichtbar wird. */
body.wk-active .hdr{padding-top:calc(var(--wk-clear,70px) + 6px)}
@keyframes wkMiniIn{from{opacity:0;transform:translateY(-12px)}}
.wk-mini-dot{
width:10px;height:10px;border-radius:50%;
background:var(--green);flex-shrink:0;
box-shadow:0 0 0 4px rgba(52,199,89,.18);
animation:wkMiniPulse 1.5s ease-in-out infinite;
}
@keyframes wkMiniPulse{
0%,100%{box-shadow:0 0 0 4px rgba(52,199,89,.18)}
50%{box-shadow:0 0 0 7px rgba(52,199,89,.05)}
}
.wk-mini-body{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.1}
.wk-mini-l{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.wk-mini-v{font-size:18px;font-weight:700;color:var(--green);font-variant-numeric:tabular-nums}
.wk-mini-chev{color:var(--acc);font-size:22px;font-weight:300;flex-shrink:0}
/* ── STATISTIK: 2-Spalten-Layout (Volumen + Erholung) ── */
.stats-dual{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.stats-mini-box{
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
border:1px solid var(--gl-bdr);
border-radius:20px;
padding:12px 12px 10px;
box-shadow:var(--gl-shad),var(--gl-hi);
position:relative;overflow:hidden;
display:flex;flex-direction:column;
height:230px;
cursor:pointer;
transition:transform .12s ease, box-shadow .15s ease;
-webkit-tap-highlight-color:transparent;
}
.stats-mini-box:active{transform:scale(.99)}
.stats-mini-box::after{
content:'';position:absolute;top:0;left:0;right:0;height:40%;
background:var(--sheen);pointer-events:none;border-radius:20px 20px 0 0;
}
.stats-mini-title{
font-size:11px;font-weight:700;text-transform:uppercase;
letter-spacing:.5px;color:var(--text2);margin-bottom:6px;
position:relative;z-index:1;
}
/* min-height war 160px. Zusammen mit Titel (19), Kopfzeile (22), Fuss (16) und
Padding (22) ergab das 239px in einer 230px hohen Kachel — overflow:hidden hat
den Fuss "Tap fuer Vollbild" abgeschnitten. Die Zeichenflaeche darf schrumpfen
(Chart.js ist responsive), der Fuss nicht (flex-shrink:0 unten). */
.stats-mini-canvas-wrap{flex:1;min-height:120px;max-height:200px;position:relative;z-index:1}
.stats-mini-canvas-wrap canvas{display:block}
.stats-mini-empty{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:11px;color:var(--text2);text-align:center;padding:8px;line-height:1.4;
}
.stats-mini-foot{
font-size:10px;color:var(--text2);text-align:center;margin-top:4px;
position:relative;z-index:1;font-weight:500;
flex-shrink:0;line-height:1.2;
}
.stats-mini-title,.stats-vol-kopf{flex-shrink:0}
/* ── MUSKEL-AKKU-LISTE ── */
.rec-list{
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
border:1px solid var(--gl-bdr);
border-radius:20px;
padding:6px 4px;
box-shadow:var(--gl-shad),var(--gl-hi);
overflow:hidden;
}
/* Kompakt-Variante in der Mini-Box neben Volumen: scrollbare, schmalere Zeilen */
.stats-rec-box{padding:12px 8px 10px}
.stats-rec-box .stats-mini-title{padding:0 6px}
.rec-list-mini{
background:transparent;border:none;box-shadow:none;
/* Glas IN Glas: der geerbte Blur aus .rec-list zeichnet sonst eine zweite
Kachel um die Muskelgruppen-Liste. Innenfläche bleibt komplett unsichtbar. */
backdrop-filter:none;-webkit-backdrop-filter:none;border-radius:0;
padding:2px 2px 4px;
flex:1;min-height:0;
overflow-y:auto;overscroll-behavior:contain;
-webkit-overflow-scrolling:touch;
scrollbar-width:thin;
}
.rec-list-mini::-webkit-scrollbar{width:4px}
.rec-list-mini::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:2px}
/* rechts mehr Luft als links: der Pluspol der Batterie (.rec-batt::after) sitzt mit
right:-3.5px ausserhalb ihrer Box und stiess sonst an den Kachelrand. */
.rec-list-mini .rec-row{padding:7px 8px;gap:8px;border-radius:10px}
/* Der Pluspol der Batterie sitzt per right:-3.5px AUSSERHALB ihrer Box. Ohne diesen
Rand stiess er an die Kachelkante bzw. wurde vom overflow abgeschnitten. */
.rec-list-mini .rec-batt{margin-right:6px}
.rec-list-mini .rec-row + .rec-row{border-top-color:var(--sep)}
.rec-list-mini .rec-row-title{font-size:12px;line-height:1.2}
.rec-list-mini .rec-row-sub{font-size:9px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ══ SEGMENT-BALKEN ("die Striche") ══════════════════════════════════════
Gefuellte Striche leuchten (Farbe und Schein kommen aus dem JS, weil sie
vom Wert abhaengen), leere bleiben als dunkle Huelsen stehen. Dass die
leeren sichtbar bleiben, ist der Punkt: nur so ist die Skala ablesbar und
"sieben von sechzehn" wird zu einer Menge statt zu einer Laenge. */
.segbar{display:flex;align-items:stretch;gap:3px;width:100%;height:22px}
.segbar > i{
flex:1 1 0;min-width:0;border-radius:3px;
/* Leere Huelse: dunkel, aber sichtbar — sie ist die Skala, an der man den
gefuellten Teil abliest. Ganz unsichtbar waere die Reihe nur ein Balken. */
background:var(--ng-well);
box-shadow:inset 0 0 0 1px var(--ng-well-bdr);
transition:background .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;
}
/* Der aktuelle Strich traegt die Marke aus der Vorlage — ein heller Rahmen,
der den Kopf der Reihe zeigt. */
.segbar > i.is-now{outline:1.5px solid rgba(255,255,255,.55);outline-offset:2px}
/* Klein in den Erholungs-Zeilen: schmaler, ohne Marke — dort zaehlt der
Vergleich der Zeilen untereinander, nicht der Kopf einer einzelnen. */
.segbar.segbar-mini{height:14px;gap:2px}
.segbar.segbar-mini > i{border-radius:2px}
.rec-seg-wrap{flex:0 0 100px;display:flex;align-items:center;gap:7px}
.rec-list-mini .rec-seg-wrap{flex:0 0 92px}
.rec-seg-val{
flex-shrink:0;font-size:10.5px;font-weight:800;
font-variant-numeric:tabular-nums;letter-spacing:.2px;min-width:30px;text-align:right;
}
/* In der Batterie-Huelle: die Reihe fuellt sie ganz aus, die Prozentzahl
liegt darueber. Die Striche stossen dabei nicht an den Rand — der schmale
Abstand ist es, der die Huelle weiter als Huelle lesbar haelt statt als
Rahmen um einen Block. */
/* Absolute Kinder beziehen sich auf die PADDING-Box, liegen also ohnehin
innerhalb des 2-px-Rahmens. Ein Pixel Luft genuegt, damit die Striche die
Rundung der Huelle nicht beruehren. */
/* width:auto ist hier PFLICHT: .segbar bringt width:100% mit, und bei einem
absolut positionierten Element gewinnen dann left+width — right wird still
ignoriert. Die Reihe war dadurch so breit wie die ganze Padding-Box, begann
aber eingerueckt und lag rechts genau auf dem Rahmen. Genau der Ueberstand,
den alle bisherigen inset-Korrekturen nicht beheben konnten. */
.rec-batt .segbar.segbar-batt{
position:absolute;inset:1px;width:auto;height:auto;gap:2px;z-index:0;
}
/* Die Aussenkanten folgen der Huelle: der erste Strich ist links so rund wie
das Gehaeuse, der letzte rechts. Gleichfoermige Rechtecke stossen sonst mit
ihren Ecken in die Rundung und es sieht aus, als passten sie nicht hinein —
genau das war der Eindruck. Innen bleiben alle Kanten fast eckig, damit die
Reihe als Reihe lesbar bleibt. */
.rec-batt .segbar.segbar-batt > i{border-radius:1.5px}
.rec-batt .segbar.segbar-batt > i:first-child{border-radius:4.5px 1.5px 1.5px 4.5px}
.rec-batt .segbar.segbar-batt > i:last-child{border-radius:1.5px 4.5px 4.5px 1.5px}
/* Rundum gleicher Abstand — die frueher hier stehende Extra-Luft rechts war der
Versuch, den width:100%-Ueberstand auszugleichen; das ging nicht auf, weil
right bei left+width gar nicht wirkt. Mit width:auto oben ist der Rand
symmetrisch, so wie die Huelle es zeigt. */
.rec-list-mini .rec-batt .segbar.segbar-batt{inset:1.5px;gap:1.5px;border-radius:4.5px}
/* .rec-batt-val (die Prozentzahl IN der Batterie) wird nicht mehr gerendert:
sie lag mittig auf der Fuellung und zwang den Schein klein zu halten, damit
sie lesbar blieb. Die Grundregeln dazu bleiben unangetastet stehen — die
Detailansicht einer Muskelgruppe baut ihre Batterie aus denselben Klassen. */
@media (prefers-reduced-motion:reduce){.segbar > i{transition:none}}
/* ── Bereitschaft im Coach-Hub ── */
/* Die Leiste ist ein Knopf — sie fuehrt in die Aufschluesselung. Deshalb
traegt sie den Winkel rechts und gibt beim Druecken nach. */
.ch-rdy{
display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;
margin:14px 0 4px;padding:12px 13px 13px;border-radius:16px;
background:var(--gl-bg-h);border:1px solid var(--gl-bdr);
transition:transform .14s ease,border-color .18s ease;
}
.ch-rdy:active{transform:scale(.985);border-color:rgba(var(--acc-rgb),.4)}
.ch-rdy-chev{display:inline-flex;flex-shrink:0;color:var(--text2);opacity:.7}
/* ── Aufschluesselung der Leistung ── */
.ch-perf-top{display:flex;align-items:baseline;gap:10px;margin-bottom:10px}
.ch-perf-val{font-size:38px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.ch-perf-val i{font-size:18px;font-style:normal;margin-left:2px;opacity:.75}
.ch-perf-lbl{font-size:15px;font-weight:700;color:var(--text2)}
.segbar.segbar-gross{height:38px;gap:4px}
.segbar.segbar-gross > i{border-radius:5px}
.ch-perf-rows{margin-top:20px;display:flex;flex-direction:column;gap:16px}
.ch-perf-row-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.ch-perf-row-lbl{flex:1;min-width:0;font-size:13.5px;font-weight:800;color:var(--text)}
/* Das Gewicht steht dabei, weil es die Zahl erklaert: ein schwacher Wert bei
20 % Gewicht zieht anders als einer bei 35 %. */
.ch-perf-row-g{font-size:10.5px;font-weight:700;color:var(--text2);opacity:.75}
.ch-perf-row-v{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;min-width:24px;text-align:right}
.ch-perf-row-txt{margin-top:6px;font-size:12.5px;line-height:1.45;color:var(--text2)}
.ch-perf-tips{margin-top:22px;padding-top:14px;border-top:1px solid var(--sep)}
.ch-perf-tips-h{font-size:13px;font-weight:800;color:var(--acc);margin-bottom:9px}
.ch-perf-tip{display:flex;flex-direction:column;gap:3px;margin-bottom:11px}
.ch-perf-tip b{font-size:12px;font-weight:800;color:var(--text)}
.ch-perf-tip span{font-size:12.5px;line-height:1.45;color:var(--text2)}
.ch-perf-ok{margin-top:20px;font-size:12.5px;color:var(--text2)}
.ch-perf-foot{
margin-top:18px;padding-top:12px;border-top:1px solid var(--sep);
font-size:11px;line-height:1.5;color:var(--text2);opacity:.8;
}
.ch-rdy-head{display:flex;align-items:center;gap:7px;margin-bottom:10px}
.ch-rdy-ico{display:inline-flex;flex-shrink:0}
.ch-rdy-ico svg{fill:currentColor;stroke:none}
.ch-rdy-lbl{font-size:14px;font-weight:800;color:var(--text)}
.ch-rdy-sub{flex:1;min-width:0;font-size:11px;color:var(--text2);font-weight:600}
.ch-rdy-pct{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
/* Deutlich hoeher als breit — daran haengt der ganze Eindruck. Bei sechzehn
Strichen ueber die volle Breite werden sie sonst fast quadratisch und die
Reihe liest sich als Kachelband statt als Skala. */
.ch-rdy .segbar{height:32px;gap:4px}
.ch-rdy .segbar > i{border-radius:4px}
.rec-list-mini .rec-batt{flex:0 0 42px;height:18px;border-width:1.5px;padding:1.5px}
.rec-list-mini .rec-batt::after{width:2px;height:7px;right:-3.5px}
.rec-list-mini .rec-batt-val{font-size:9px;letter-spacing:.2px}
.rec-row{
display:flex;align-items:center;gap:12px;
padding:11px 14px;border-radius:14px;
cursor:pointer;-webkit-tap-highlight-color:transparent;
transition:background .15s;
}
.rec-row:active{background:rgba(var(--acc-rgb),.08)}
.rec-row + .rec-row{border-top:1px solid var(--sep)}
.rec-row-body{flex:1;min-width:0}
.rec-row-title{font-size:15px;font-weight:600;color:var(--text);line-height:1.15}
.rec-row-sub{font-size:11px;color:var(--text2);margin-top:2px;font-weight:500}
.rec-batt{
position:relative;flex:0 0 64px;height:26px;
border-radius:7px;
border:2px solid var(--text2);
padding:2px;
background:var(--g5);
display:flex;align-items:center;
}
.rec-batt::after{
/* Pluspol */
content:'';position:absolute;right:-5px;top:50%;transform:translateY(-50%);
width:3px;height:11px;background:var(--text2);border-radius:0 2px 2px 0;
}
.rec-batt-fill{
height:100%;border-radius:3px;
transition:width .4s cubic-bezier(.4,0,.2,1), background .25s;
box-shadow:0 0 8px currentColor;
}
.rec-batt-val{
position:absolute;left:0;right:0;top:0;bottom:0;
display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:700;color:#fff;
text-shadow:0 1px 2px rgba(0,0,0,.6);
font-variant-numeric:tabular-nums;letter-spacing:.5px;
z-index:2;pointer-events:none;
}
.rec-batt.is-empty{border-color:rgba(255,59,48,.55)}
.rec-batt.is-empty .rec-batt-val{color:rgba(255,255,255,.85)}
.rec-list-empty{
padding:24px 16px;text-align:center;color:var(--text2);font-size:13px;
}
/* ── PR-FEIER OVERLAY ── */
.pr-burst-host{
position:fixed;inset:0;pointer-events:none;z-index:9999;
display:flex;align-items:center;justify-content:center;
}
.pr-burst{
background:linear-gradient(135deg,#FFD700 0%,#FFA500 100%);
color:#1a1a1a;font-weight:800;font-size:28px;
padding:18px 32px;border-radius:22px;
box-shadow:0 12px 40px rgba(255,165,0,.55),0 0 0 4px rgba(255,215,0,.35);
animation:pr-pop 1.6s cubic-bezier(.34,1.56,.64,1) forwards;
display:flex;flex-direction:column;align-items:center;gap:4px;
text-align:center;letter-spacing:.5px;
}
.pr-burst-sub{font-size:13px;font-weight:600;opacity:.85;letter-spacing:.2px}
@keyframes pr-pop{
0% {transform:scale(.4) rotate(-8deg);opacity:0}
18% {transform:scale(1.12) rotate(2deg);opacity:1}
35% {transform:scale(.96) rotate(-1deg)}
55% {transform:scale(1) rotate(0)}
85% {transform:scale(1);opacity:1}
100% {transform:scale(.9) translateY(-30px);opacity:0}
}
.pr-badge{
display:inline-flex;align-items:center;gap:3px;
background:linear-gradient(135deg,#FFD700,#FFA500);
color:#1a1a1a;font-size:10px;font-weight:800;
padding:2px 7px;border-radius:999px;letter-spacing:.3px;
margin-left:6px;vertical-align:middle;
box-shadow:0 2px 6px rgba(255,165,0,.4);
}
/* Swipe-to-delete im aktiven Training */
.ex-card{position:relative;transition:transform .3s cubic-bezier(.32,1,.32,1)}
.ex-card.is-swiping{transition:none}
.ex-card.swipe-removing{
transform:translateX(-110%);opacity:0;
transition:transform .35s ease-out,opacity .35s ease-out,margin .35s ease-out,padding .35s ease-out,max-height .35s ease-out;
margin:0!important;padding-top:0!important;padding-bottom:0!important;max-height:0!important;overflow:hidden;
}
.ex-card-swipe-bg{
position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,#ff3b30 100%);
border-radius:18px;display:flex;align-items:center;justify-content:flex-end;
padding-right:24px;color:#fff;font-weight:700;font-size:15px;
pointer-events:none;opacity:0;transition:opacity .2s;z-index:-1;
}
.ex-card-swipe-bg.on{opacity:1}
/* ── MUSKEL-DETAIL-OVERLAY ── */
.ov.ov-mus{
align-items:center;justify-content:center;
background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
z-index:1003;
}
.mus-card{
background:var(--gl-bg-h);
backdrop-filter:blur(60px) saturate(200%);
-webkit-backdrop-filter:blur(60px) saturate(200%);
border:1px solid var(--gl-bdr);
border-radius:24px;
width:calc(100% - 24px);
max-width:440px;
max-height:88vh;max-height:min(88vh,var(--sheet-cap));
display:flex;flex-direction:column;
box-shadow:0 16px 56px rgba(0,0,0,.32);
overflow:hidden;
animation:up .28s cubic-bezier(.32,1,.32,1);
}
.mus-head{
display:flex;align-items:center;justify-content:space-between;
padding:14px 16px 10px;border-bottom:1px solid var(--gl-bdr);
}
.mus-title{font-size:17px;font-weight:700;flex:1;min-width:0}
.mus-sub{font-size:11px;color:var(--text2);font-weight:500;margin-top:1px}
.mus-body{overflow-y:auto;padding:18px 16px}
.mus-ring-wrap{
display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:18px;
}
.mus-ring{
position:relative;width:140px;height:140px;
}
.mus-ring svg{transform:rotate(-90deg)}
.mus-ring-val{
position:absolute;inset:0;display:flex;flex-direction:column;
align-items:center;justify-content:center;
}
.mus-ring-pct{font-size:34px;font-weight:700;line-height:1}
.mus-ring-state{font-size:11px;color:var(--text2);margin-top:3px;font-weight:600}
.mus-stats-grid{
display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px;
}
.mus-stat-box{
background:var(--gl-bg-t);border:1px solid var(--gl-bdr);
border-radius:12px;padding:10px;text-align:center;
}
.mus-stat-l{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.5px;font-weight:700}
.mus-stat-v{font-size:15px;font-weight:700;margin-top:2px}
.mus-hist-row{
display:flex;justify-content:space-between;align-items:center;
padding:8px 0;border-bottom:1px solid var(--gl-bdr);font-size:13px;
}
.mus-hist-row:last-child{border-bottom:none}
.mus-hist-date{color:var(--text2);font-size:11px}
.mus-hist-ex{font-weight:600;flex:1;margin:0 8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mus-hist-vol{font-size:12px;color:var(--text2);font-variant-numeric:tabular-nums}
/* ── VOLUME-VOLLBILD ── */
.ov.ov-vol{
align-items:center;justify-content:center;
background:rgba(0,0,0,.55);backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
z-index:1002;
}
.vol-card{
background:var(--gl-bg-h);
backdrop-filter:blur(60px) saturate(200%);
-webkit-backdrop-filter:blur(60px) saturate(200%);
border:1px solid var(--gl-bdr);
border-radius:24px;
width:calc(100% - 24px);
max-width:680px;
max-height:88vh;max-height:min(88vh,var(--sheet-cap));
display:flex;flex-direction:column;
box-shadow:0 16px 56px rgba(0,0,0,.32);
overflow:hidden;
animation:up .28s cubic-bezier(.32,1,.32,1);
}
.vol-head{
display:flex;align-items:center;justify-content:space-between;
padding:14px 16px;border-bottom:1px solid var(--gl-bdr);
}
.vol-body{flex:1;padding:14px 16px;min-height:300px;display:flex}
.vol-body canvas{width:100% !important;height:100% !important}
/* ── OVERLOAD-AMPEL ──────────────────────────────────── */
.prog-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;align-self:center}
.prog-dot.up{background:#34c759}.prog-dot.down{background:#ff3b30}
.prog-dot.same{background:#ff9500}.prog-dot.new{background:#c7c7cc}
/* ── REST-TIMER BAR ─────────────────────────────────── */
/* Bleibt beim Scrollen oben sichtbar (sticky) und ist als gefüllter,
pulsierender Akzent-Balken deutlich prominenter — kein Hochscrollen nötig. */
/* Sticky-Stapel im Training: Coach-Leiste + Pause-Balken bleiben beim Scrollen
gemeinsam oben sichtbar (der Wrapper klebt, nicht mehr der Balken allein). */
#wk-sticky{position:sticky;top:58px;z-index:4}
.last-train-tag{display:inline-block;font-size:11px;font-weight:600;background:rgba(var(--acc-rgb),.12);color:var(--acc);border:1px solid rgba(var(--acc-rgb),.25);border-radius:10px;padding:2px 8px;margin-left:8px;vertical-align:middle;white-space:nowrap}
/* ── SESSION-NOTIZ ──────────────────────────────────── */
.wk-note-inp{width:100%;background:var(--soft);border:1.5px solid var(--gl-bdr);border-radius:14px;padding:10px 13px;font-size:16px;color:var(--text);font-family:inherit;resize:none;box-sizing:border-box;outline:none;margin-top:10px;display:block}
.wk-note-inp:focus{border-color:var(--acc)}
/* ── ERHOLUNG SLIDER ────────────────────────────────── */
.rec-slider-wrap{flex:1;min-height:0;overflow:hidden;position:relative}
.rec-slider{display:flex;width:100%;height:100%;transition:transform .32s cubic-bezier(.4,0,.2,1)}
.rec-panel{flex:0 0 100%;min-width:100%;display:flex;flex-direction:column;min-height:0}
.rec-dots{display:flex;gap:5px;align-items:center}
.rec-dot{width:5px;height:5px;border-radius:50%;background:var(--text2);opacity:.35;transition:opacity .2s,background .2s;flex-shrink:0}
.rec-dot.on{background:var(--acc);opacity:1}
/* Großer senkrechter Akku */
/* Ebenfalls sichtbar — sonst kappt dieser Rahmen den Schein gleich wieder,
den die Huelle darunter durchlaesst. */
.rec-batt-v-wrap{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:2px 0;overflow:visible}
.rec-batt-v-outer{display:flex;flex-direction:column;align-items:center}
.rec-batt-v-cap{width:14px;height:6px;background:var(--text);border-radius:3px 3px 0 0;opacity:.3}
/* overflow SICHTBAR: die Huelle schnitt den Schein der Striche exakt an ihrem
Rand ab, und uebrig blieb nur der Teil, der nach innen faellt — deshalb war
ausgerechnet die grosse Batterie die schwaechste Anzeige der App. Die Striche
selbst bleiben innen (segbar-v liegt auf inset:2px), es tritt nur ihr Licht
heraus, und das soll es auch: eine Roehre leuchtet durch ihr Gehaeuse. */
.rec-batt-v{width:44px;height:82px;border:2px solid var(--text);border-radius:10px;position:relative;overflow:visible;opacity:.9}
/* Senkrechte Strichreihe im stehenden Akku. Die Aussenzellen folgen der
Rundung der Huelle — oben die obere, unten die untere, damit ihre Ecken
nicht in den Radius stossen (derselbe Grund wie bei der liegenden Reihe). */
.segbar-v{position:absolute;inset:2px;display:flex;flex-direction:column;gap:2.5px}
.segbar-v > i{
flex:1 1 0;min-height:0;border-radius:2px;
background:var(--ng-well);
box-shadow:inset 0 0 0 1px var(--ng-well-bdr);
transition:background .45s cubic-bezier(.22,1,.36,1),box-shadow .45s ease;
}
.segbar-v > i:first-child{border-radius:5px 5px 2px 2px}
.segbar-v > i:last-child{border-radius:2px 2px 5px 5px}
@media (prefers-reduced-motion:reduce){.segbar-v > i{transition:none}}
.rec-batt-v-fill{position:absolute;bottom:0;left:0;right:0;transition:height .6s cubic-bezier(.34,1.56,.64,1);border-radius:7px;opacity:.9}
.rec-batt-v-pct{font-size:22px;font-weight:800;letter-spacing:.5px}
.rec-batt-v-lbl{font-size:10px;color:var(--text2);text-align:center;line-height:1.4}
/* ── SHARE-BUTTON ───────────────────────────────────── */
.share-wk-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--soft);border:1.5px solid var(--gl-bdr);border-radius:16px;padding:14px;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;margin-top:10px}
/* ── POST-WORKOUT DONE SCREEN ──────────────────────── */
#ov-done{align-items:stretch!important;background:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:1100!important}
.done-screen{width:100%;height:100%;background:linear-gradient(160deg,#0c0c26 0%,#070714 40%,#090820 100%);position:relative;overflow:hidden;display:flex;flex-direction:column;animation:done-slide-in .38s cubic-bezier(.32,1,.32,1)}
@keyframes done-slide-in{from{transform:translateY(100%)}}
/* Die drei Farbwolken hinter dem Abschluss-Bild laufen ueber denselben Dimmer
wie jedes andere Licht — sonst ist der Fertig-Screen der einzige Ort, an dem
es noch grell ist. */
.done-bg-glow{position:absolute;border-radius:50%;pointer-events:none;opacity:calc(.4 + .6 * var(--neon))}
.done-glow-1{width:440px;height:440px;top:-110px;left:-110px;background:radial-gradient(circle,rgba(88,36,230,.58) 0%,transparent 68%);filter:blur(65px)}
.done-glow-2{width:360px;height:360px;bottom:-90px;right:-90px;background:radial-gradient(circle,rgba(0,124,255,.52) 0%,transparent 68%);filter:blur(60px)}
.done-glow-3{width:300px;height:300px;top:38%;left:50%;transform:translateX(-50%);background:radial-gradient(circle,rgba(255,168,36,.26) 0%,transparent 68%);filter:blur(55px)}
.done-close-btn{position:absolute;top:calc(var(--sat,0px) + 16px);right:20px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);color:#fff;font-size:15px;cursor:pointer;z-index:10;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .15s;-webkit-tap-highlight-color:transparent}
.done-close-btn:active{background:rgba(255,255,255,.22)}
.done-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:calc(var(--sat,0px) + 62px) 20px 0;position:relative;z-index:2}
.done-hero{text-align:center;padding:20px 0 24px}
.done-hero-title{font-size:34px;font-weight:800;color:#fff;letter-spacing:-.7px;line-height:1.1;margin-bottom:8px}
.done-hero-date{font-size:13px;color:rgba(255,255,255,.44);letter-spacing:.1px}
.done-hero-dur{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:7px 16px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:22px;font-size:14px;font-weight:600;color:rgba(255,255,255,.78)}
.done-stats-row{display:flex;gap:8px;margin-bottom:20px}
.done-stat-chip{flex:1;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.11);border-radius:16px;padding:13px 6px;text-align:center}
.done-stat-ico{font-size:18px;display:block;margin-bottom:5px;line-height:1}
.done-stat-val{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1;display:block;margin-bottom:3px;font-variant-numeric:tabular-nums}
.done-stat-lbl{font-size:9px;color:rgba(255,255,255,.38);letter-spacing:.5px;display:block;text-transform:uppercase;font-weight:600}
.done-pr-wrap{background:linear-gradient(135deg,rgba(255,185,0,.16) 0%,rgba(255,100,0,.10) 100%);border:1px solid rgba(255,185,0,.30);border-radius:20px;padding:16px 18px;margin-bottom:18px}
.done-pr-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.done-pr-icon{font-size:30px;line-height:1;filter:drop-shadow(0 2px 10px rgba(255,185,0,.55))}
.done-pr-headtitle{font-size:16px;font-weight:800;color:#fff}
.done-pr-headsub{font-size:10px;font-weight:700;color:rgba(255,185,0,.72);margin-top:2px;text-transform:uppercase;letter-spacing:.5px}
.done-pr-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid rgba(255,185,0,.13)}
.done-pr-item-left{flex:1;min-width:0}
.done-pr-item-name{font-size:14px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-pr-item-detail{font-size:11px;color:rgba(255,255,255,.38);margin-top:1px}
.done-pr-item-val{font-size:16px;font-weight:800;color:rgba(255,210,50,.95);flex-shrink:0;font-variant-numeric:tabular-nums}
.done-section-lbl{font-size:11px;font-weight:700;color:rgba(255,255,255,.36);letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px}
.done-hl-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:20px}
.done-hl-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);border-radius:18px;padding:16px 14px;position:relative;overflow:hidden}
.done-hl-card::before{content:'';position:absolute;top:-25px;right:-25px;width:80px;height:80px;border-radius:50%;background:var(--done-hl-color,rgba(255,255,255,.04));pointer-events:none;filter:blur(20px)}
.done-hl-ico{font-size:26px;margin-bottom:8px;display:block;line-height:1}
.done-hl-val{font-size:20px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1.1;font-variant-numeric:tabular-nums}
.done-hl-sub{font-size:10px;color:rgba(255,255,255,.38);margin-top:3px;text-transform:uppercase;letter-spacing:.4px;font-weight:600}
.done-hl-name{font-size:12px;color:rgba(255,255,255,.52);margin-top:6px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-ex-list{display:flex;flex-direction:column;gap:8px;margin-bottom:16px}
.done-ex-row{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:16px;padding:13px 16px}
.done-ex-info{flex:1;min-width:0}
.done-ex-name{font-size:15px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.done-ex-meta{font-size:12px;color:rgba(255,255,255,.38);margin-top:2px}
.done-ex-right{text-align:right;flex-shrink:0}
.done-ex-maxw{font-size:16px;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.done-ex-maxw-u{font-size:10px;font-weight:500;color:rgba(255,255,255,.35)}
.done-ex-pr{display:inline-block;padding:2px 7px;border-radius:8px;background:linear-gradient(135deg,#ffd700,#ff8c00);font-size:10px;font-weight:800;color:#000;margin-top:3px}
.done-note{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:14px;padding:13px 15px;font-size:14px;color:rgba(255,255,255,.58);margin-bottom:16px;line-height:1.5}
.done-actions{display:flex;gap:10px;position:sticky;bottom:0;padding:14px 0 10px;background:linear-gradient(to top,#09091e 52%,transparent 100%)}
.done-share-btn{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:7px;background:rgba(255,255,255,.08);border:1.5px solid rgba(255,255,255,.20);color:rgba(255,255,255,.88);border-radius:16px;padding:14px 18px;font-size:15px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s;-webkit-tap-highlight-color:transparent}
.done-share-btn:active{background:rgba(255,255,255,.16)}
.done-ok-btn{flex:1;background:linear-gradient(135deg,#007AFF 0%,#0051d6 100%);color:#fff;border:none;border-radius:16px;padding:15px;font-size:17px;font-weight:700;cursor:pointer;font-family:inherit;box-shadow:0 6px 28px rgba(0,90,255,.48);transition:opacity .15s;-webkit-tap-highlight-color:transparent;letter-spacing:-.2px}
.done-ok-btn:active{opacity:.82}
/* ═══════════════════════════════════════════════════
GLASS 2.0 — LEBENDIGE DETAILS (additiver Layer)
Flamme · Batterie-Laden · Ringe · Ziffern
═══════════════════════════════════════════════════ */
/* ── ANIMIERTE FLAMME (SVG, ersetzt 🔥 in Badge + Streak-Sheet) ── */
.fl{display:inline-flex;position:relative;line-height:0;vertical-align:middle}
.fl svg{display:block;overflow:visible}
.fl .fl-outer{transform-origin:50% 94%;animation:fl-outer 1.9s ease-in-out infinite}
.fl .fl-inner{transform-origin:50% 92%;animation:fl-inner 1.25s ease-in-out infinite}
.fl .fl-core{transform-origin:50% 90%;animation:fl-core .95s ease-in-out infinite}
@keyframes fl-outer{
0%,100%{transform:scaleY(1) scaleX(1) rotate(-1.6deg)}
28%{transform:scaleY(1.07) scaleX(.965) rotate(1.1deg)}
55%{transform:scaleY(.955) scaleX(1.03) rotate(-.6deg)}
78%{transform:scaleY(1.05) scaleX(.98) rotate(1.7deg)}
}
@keyframes fl-inner{
0%,100%{transform:scaleY(1) rotate(1.4deg)}
35%{transform:scaleY(1.11) scaleX(.94) rotate(-1.8deg)}
70%{transform:scaleY(.93) scaleX(1.05) rotate(1deg)}
}
@keyframes fl-core{
0%,100%{transform:scaleY(1);opacity:.95}
45%{transform:scaleY(1.16) scaleX(.9);opacity:.75}
75%{transform:scaleY(.9) scaleX(1.06);opacity:1}
}
.streak-badge .fl{filter:drop-shadow(0 1px 5px rgba(255,149,0,.55))}
.streak-badge.cold .fl{filter:grayscale(.75) opacity(.6)}
.streak-badge.cold .fl .fl-outer,.streak-badge.cold .fl .fl-inner,.streak-badge.cold .fl .fl-core{animation:none}
.strd-fire .fl{filter:drop-shadow(0 5px 16px rgba(255,149,0,.50))}
/* Funken steigen nur in der großen Detail-Flamme auf */
.fl-ember{position:absolute;left:50%;bottom:18%;width:4px;height:4px;border-radius:50%;
background:radial-gradient(circle,#FFD60A 0%,#FF9500 70%);opacity:0;pointer-events:none;
animation:fl-ember 2.7s ease-out infinite}
.fl-ember:nth-child(2){animation-delay:.9s;margin-left:-9px;width:3px;height:3px}
.fl-ember:nth-child(3){animation-delay:1.8s;margin-left:7px;width:3px;height:3px}
@keyframes fl-ember{
0%{opacity:0;transform:translate(0,0) scale(1)}
10%{opacity:.95}
100%{opacity:0;transform:translate(var(--ember-x,5px),-46px) scale(.3)}
}
/* ── MUSKEL-AKKU: Lade-Animation + Glas-Glanz (Logik/Farben unverändert) ── */
.rec-batt-fill{
position:relative;overflow:hidden;
transform-origin:left center;
animation:batt-charge .9s cubic-bezier(.22,1,.36,1) both;
}
@keyframes batt-charge{from{transform:scaleX(.04)}}
.rec-batt-fill::after{
content:'';position:absolute;inset:0;border-radius:inherit;
background:linear-gradient(180deg,rgba(255,255,255,.42) 0%,rgba(255,255,255,.08) 48%,rgba(0,0,0,.06) 100%);
pointer-events:none;
}
.rec-batt.is-empty .rec-batt-fill{
animation:batt-charge .9s cubic-bezier(.22,1,.36,1) both,batt-low 2s ease-in-out 1.1s infinite;
}
@keyframes batt-low{0%,100%{opacity:1}50%{opacity:.5}}
/* Großer senkrechter Akku lädt von unten */
.rec-batt-v-fill{transform-origin:50% 100%;animation:batt-charge-v .9s cubic-bezier(.22,1,.36,1) both}
@keyframes batt-charge-v{from{transform:scaleY(.05)}}
/* ── WOCHENZIEL-RINGE: weiches Aufziehen ──
Alle drei Ebenen mit derselben Kurve, sonst laeuft das Licht dem Bogen
hinterher (s. renderTrackers). */
.tracker-ring-progress,.tracker-ring-halo,.tracker-ring-glow{transition:stroke-dashoffset 1s cubic-bezier(.22,1,.36,1)}
/* ── ZAHLEN: tabellarische Ziffern für ruhiges Layout ── */
.hw-big,.erf-hero-val,.erf-tile-val,.strd-weeks,.rec-batt-val,.rec-batt-v-pct,
.done-stat-val,.hw-orm-val{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
.fl .fl-outer,.fl .fl-inner,.fl .fl-core,.fl-ember,
.rec-batt-fill,.rec-batt-v-fill{animation:none!important}
.tracker-ring-progress,.tracker-ring-halo,.tracker-ring-glow{transition:none}
}
/* ── ONBOARDING (Ersteinrichtung) ────────────────────── */
#ob-screen{position:fixed;inset:0;z-index:1400;background:var(--bg);display:none;flex-direction:column}
#ob-screen.on{display:flex}
.ob-top{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--sat) + 14px) 20px 4px;min-height:42px}
.ob-dots{display:flex;gap:6px}
.ob-dot{width:7px;height:7px;border-radius:4px;background:var(--sep);transition:transform .3s,background-color .3s,background .3s,color .3s,border-color .3s,box-shadow .3s,opacity .3s var(--ease)}
.ob-dot.on{background:var(--acc);width:22px}
.ob-skip{background:none;border:none;color:var(--text2);font-size:14px;font-weight:600;font-family:inherit;padding:8px 0 8px 12px;cursor:pointer}
.ob-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:10px 22px 16px;display:flex;flex-direction:column}
.ob-step{animation:ob-in .38s var(--ease) both}
@keyframes ob-in{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
.ob-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:9vh 4px 16px}
.ob-hero-icon{width:96px;height:96px;border-radius:26px;background:linear-gradient(135deg,#5B3FFD,var(--acc));display:flex;align-items:center;justify-content:center;box-shadow:0 18px 44px -12px rgba(var(--acc-rgb),.55);animation:welcome-pop .6s var(--spring)}
.ob-hero-icon svg{width:50px;height:50px}
.ob-hero-logo{width:104px;height:104px;border-radius:24px;box-shadow:0 18px 44px -12px rgba(var(--acc-rgb),.55);animation:welcome-pop .6s var(--spring)}
.ob-h1{font-size:28px;font-weight:800;letter-spacing:-.5px;margin:22px 0 10px;color:var(--text)}
.ob-sub{font-size:15px;color:var(--text2);line-height:1.55;max-width:300px}
.ob-q{font-size:23px;font-weight:800;letter-spacing:-.4px;margin:12px 0 4px;color:var(--text)}
.ob-qsub{font-size:14px;color:var(--text2);line-height:1.5;margin-bottom:16px}
.ob-opts{display:flex;flex-direction:column;gap:10px}
.ob-opt{display:flex;align-items:center;gap:14px;text-align:left;width:100%;background:var(--card);border:1.5px solid var(--gl-bdr);border-radius:16px;padding:14px 15px;font-family:inherit;cursor:pointer;transition:border-color .18s,background .18s;color:var(--text)}
.ob-opt.on{border-color:var(--acc);background:var(--soft)}
.ob-opt-ico{width:40px;height:40px;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--acc)}
.ob-opt-ico svg{width:21px;height:21px}
.ob-opt-title{font-size:16px;font-weight:700}
.ob-opt-sub{font-size:13px;color:var(--text2);margin-top:2px;line-height:1.4}
.ob-freq{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.ob-freq button{aspect-ratio:1;border-radius:15px;border:1.5px solid var(--gl-bdr);background:var(--card);font-family:inherit;font-size:20px;font-weight:800;color:var(--text);cursor:pointer;transition:transform .18s,background .18s,border-color .18s,color .18s}
.ob-freq button.on{border-color:var(--acc);background:var(--acc);color:#fff;transform:scale(1.07)}
.ob-freq-lbl{text-align:center;font-size:12.5px;color:var(--text2);margin-top:10px}
.ob-name-in{width:100%;background:var(--card);border:1.5px solid var(--gl-bdr);border-radius:16px;padding:16px;font-size:17px;font-weight:600;color:var(--text);font-family:inherit;outline:none;box-sizing:border-box}
.ob-name-in:focus{border-color:var(--acc)}
.ob-tpl{width:100%;border:1.5px solid var(--gl-bdr);border-radius:16px;background:var(--card);padding:14px 15px;text-align:left;font-family:inherit;color:var(--text);cursor:pointer;transition:border-color .18s,background .18s}
.ob-tpl.on{border-color:var(--acc);background:var(--soft)}
.ob-tpl-badge{display:inline-block;font-size:10.5px;font-weight:800;color:#fff;background:var(--acc);border-radius:7px;padding:3px 8px;margin-bottom:8px;letter-spacing:.4px;text-transform:uppercase}
.ob-tpl-title{font-size:15.5px;font-weight:700}
.ob-tpl-desc{font-size:12.5px;color:var(--text2);line-height:1.45;margin-top:3px}
.ob-tpl-days{display:flex;gap:5px;margin-top:9px;flex-wrap:wrap}
.ob-day-chip{font-size:11px;font-weight:700;color:var(--acc);background:var(--soft);border-radius:7px;padding:3px 7px}
.ob-foot{padding:10px 22px calc(var(--sab) + 16px);display:flex;flex-direction:column;gap:6px}
.ob-ghost{background:none;border:none;color:var(--text2);font-size:14.5px;font-weight:600;font-family:inherit;padding:12px;cursor:pointer;width:100%}
.ob-done-ring{width:92px;height:92px;border-radius:50%;background:var(--soft);display:flex;align-items:center;justify-content:center;animation:welcome-pop .6s var(--spring);color:var(--acc)}
.ob-done-ring svg{width:46px;height:46px}
/* ── AUTH-GATE (Login-Pflicht nach Onboarding) ───────── */
#auth-gate{position:fixed;inset:0;z-index:1390;background:var(--bg);display:none;flex-direction:column}
#auth-gate.on{display:flex}
.ag-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;align-items:center;text-align:center;padding:calc(var(--sat) + 7vh) 26px 12px;animation:ob-in .38s var(--ease) both}
.ag-benefits{display:flex;flex-direction:column;gap:14px;margin-top:30px;width:100%;max-width:320px;text-align:left}
.ag-ben{display:flex;align-items:center;gap:13px}
.ag-ben-ico{width:40px;height:40px;border-radius:12px;background:var(--soft);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--acc)}
.ag-ben-ico svg{width:20px;height:20px}
.ag-ben-title{font-size:14.5px;font-weight:700;color:var(--text)}
.ag-ben-sub{font-size:12.5px;color:var(--text2);line-height:1.4;margin-top:1px}
.ag-foot{padding:10px 26px calc(var(--sab) + 18px);display:flex;flex-direction:column;gap:10px;align-items:center}
.ag-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:340px;border-radius:24px;padding:14px 20px;font-size:16.5px;font-weight:600;font-family:inherit;cursor:pointer;letter-spacing:-.2px;transition:transform .15s}
.ag-btn:active{transform:scale(.97)}
.ag-btn svg{flex-shrink:0}
.ag-apple{background:var(--text);color:var(--bg);border:none}
.ag-google{background:#fff;color:#1f1f1f;border:1.5px solid var(--gl-bdr)}
.ag-legal{font-size:11.5px;color:var(--text2);line-height:1.5;text-align:center;max-width:300px;margin-top:2px}
.ag-legal a{color:var(--text2)}
/* ── COMMUNITY (Freunde · Rangliste · Karte) ─────────── */
#ov-social .sheet{height:92vh;height:min(92vh,var(--sheet-cap));max-height:92vh;max-height:min(92vh,var(--sheet-cap));display:flex;flex-direction:column}
#soc-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(14px + var(--sab))}
.soc-gate{text-align:center;padding:34px 18px;display:flex;flex-direction:column;align-items:center;gap:14px}
.soc-gate-ico{width:64px;height:64px;border-radius:20px;background:var(--soft);display:flex;align-items:center;justify-content:center;color:var(--acc)}
.soc-gate-ico svg{width:30px;height:30px}
.soc-code-card{background:var(--soft);border:1.5px dashed rgba(var(--acc-rgb),.45);border-radius:18px;padding:18px;text-align:center;margin-bottom:14px}
.soc-code{font-size:32px;font-weight:800;letter-spacing:7px;color:var(--acc);font-variant-numeric:tabular-nums;user-select:all}
.soc-code-btns{display:flex;gap:8px;justify-content:center;margin-top:12px}
.soc-code-btns button{background:var(--card);border:1px solid var(--gl-bdr);border-radius:12px;padding:9px 14px;font-size:13.5px;font-weight:700;color:var(--acc);font-family:inherit;cursor:pointer}
.soc-add-row{display:flex;gap:8px;margin-bottom:16px}
.soc-add-row input{flex:1;background:var(--inp-bg);border:1.5px solid var(--gl-bdr);border-radius:14px;padding:12px 14px;font-size:16px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--text);font-family:inherit;outline:none;min-width:0}
.soc-add-row input:focus{border-color:var(--acc)}
.soc-add-row button{background:var(--acc);color:#fff;border:none;border-radius:14px;padding:0 18px;font-size:14.5px;font-weight:700;font-family:inherit;cursor:pointer;flex-shrink:0}
.soc-row{display:flex;align-items:center;gap:12px;padding:11px 8px;border-radius:14px}
.soc-row.me{background:var(--soft)}
.soc-ava{width:42px;height:42px;border-radius:50%;background:rgba(var(--acc-rgb),.14);color:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:14.5px;flex-shrink:0;letter-spacing:.5px;overflow:hidden}
.soc-ava img{width:100%;height:100%;object-fit:cover}
.soc-rank{width:24px;text-align:center;font-weight:800;color:var(--text2);font-size:15px;flex-shrink:0}
.soc-rank.top{color:var(--acc)}
.soc-name{font-size:15.5px;font-weight:700;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-sub{font-size:12.5px;color:var(--text2);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soc-val{font-size:15px;font-weight:800;color:var(--text);flex-shrink:0;font-variant-numeric:tabular-nums}
.soc-chips{display:flex;gap:8px;margin:2px 0 12px}
.soc-chip{background:var(--card);border:1.5px solid var(--gl-bdr);border-radius:20px;padding:7px 14px;font-size:13px;font-weight:700;color:var(--text2);font-family:inherit;cursor:pointer}
.soc-chip.on{background:var(--acc);border-color:var(--acc);color:#fff}
.soc-x{background:none;border:none;color:var(--text2);font-size:17px;padding:8px;cursor:pointer;flex-shrink:0;font-family:inherit}
.soc-empty{text-align:center;color:var(--text2);font-size:14px;line-height:1.55;padding:26px 16px}
/* ── Gym-Karte: große, immersive Vollflächen-Map (Höhe wird per JS gesetzt) ── */
.soc-map-wrap{position:relative;margin:2px -20px 0;border-radius:24px;overflow:hidden}
#social-map{width:100%;height:340px;background:var(--soft);position:relative;z-index:1}
/* Info-/Aktionskarte UNTER der Karte (überlappt die Karte nicht mehr) */
.soc-map-foot{margin:12px 0 0;background:var(--card);
border:1px solid var(--gl-bdr);border-radius:20px;box-shadow:0 6px 20px rgba(0,0,0,.10);padding:5px 12px}
[data-theme="dark"] .soc-map-foot{background:var(--card);box-shadow:0 6px 20px rgba(0,0,0,.28)}
.soc-foot-hint{font-size:13px;color:var(--text2);text-align:center;line-height:1.4;margin:8px 4px 10px}
/* Schwebendes Such-Overlay oben (nur im Bearbeiten-Modus) */
.soc-map-search{position:absolute;left:12px;right:12px;top:12px;z-index:600;display:none}
.soc-map-search.on{display:block}
.soc-map-search .f-in{box-shadow:0 8px 26px rgba(0,0,0,.22);border:1px solid var(--gl-bdr)}
/* „Mein Standort"-Knopf — untere rechte Karten-Ecke */
.soc-map-loc{position:absolute;right:14px;bottom:14px;z-index:600;width:46px;height:46px;border-radius:50%;
background:var(--gl-bg-h);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);
border:1px solid var(--gl-bdr);box-shadow:0 6px 20px rgba(0,0,0,.22);
display:flex;align-items:center;justify-content:center;color:var(--acc);cursor:pointer;transition:transform .15s}
.soc-map-loc:active{transform:scale(.9)}
/* Leaflet-Attribution dezent (unten links, ohne Ukraine-Flaggen-Prefix) */
.soc-map-wrap .leaflet-control-attribution{background:rgba(0,0,0,.32);color:rgba(255,255,255,.72);
font-size:9.5px;padding:1px 6px;border-radius:0 8px 0 0}
.soc-map-wrap .leaflet-control-attribution a{color:rgba(255,255,255,.72)}
[data-theme="light"] .soc-map-wrap .leaflet-control-attribution,
[data-theme="rosa"] .soc-map-wrap .leaflet-control-attribution,
[data-theme="blau"] .soc-map-wrap .leaflet-control-attribution{background:rgba(255,255,255,.6);color:rgba(0,0,0,.5)}
[data-theme="light"] .soc-map-wrap .leaflet-control-attribution a,
[data-theme="rosa"] .soc-map-wrap .leaflet-control-attribution a,
[data-theme="blau"] .soc-map-wrap .leaflet-control-attribution a{color:rgba(0,0,0,.5)}
.gym-pin{width:34px;height:34px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12.5px;border:2.5px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.35);letter-spacing:.3px}
.gym-pin.me{background:#1d1d1f}
[data-theme="dark"] .gym-pin.me{background:#fff;color:#111;border-color:var(--acc)}
.soc-search-res{background:var(--card);border:1px solid var(--gl-bdr);border-radius:14px;margin-top:8px;overflow:hidden}
.soc-search-res button{display:block;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--sep);padding:11px 13px;font-size:13.5px;color:var(--text);font-family:inherit;cursor:pointer;line-height:1.35}
.soc-search-res button:last-child{border-bottom:none}
/* ── FREUNDE-TAB (HIG: Karten, Glass, sanfte Animationen) ── */
.fr-card{position:relative;display:flex;align-items:center;gap:14px;background:var(--gl-bg,var(--card));backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));border:1px solid var(--gl-bdr);border-radius:20px;padding:15px 16px;margin-bottom:12px;cursor:pointer;transition:transform .22s var(--spring),border-color .25s,box-shadow .25s;animation:fr-in .4s var(--ease) both}
[data-glass="off"] .fr-card{background:var(--card);backdrop-filter:none;-webkit-backdrop-filter:none}
.fr-card.noanim{animation:none}
.fr-card:active{transform:scale(.975)}
@keyframes fr-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.fr-card.live{border-color:rgba(48,209,88,.55);animation:fr-in .4s var(--ease) both,fr-pulse 2.6s ease-in-out 0.4s infinite}
@keyframes fr-pulse{0%,100%{box-shadow:0 0 0 3px rgba(48,209,88,.07)}50%{box-shadow:0 0 0 8px rgba(48,209,88,.14)}}
.fr-ava-wrap{position:relative;flex-shrink:0}
.fr-ava{width:54px;height:54px;border-radius:50%;background:rgba(var(--acc-rgb),.14);color:var(--acc);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;letter-spacing:.5px;overflow:hidden}
.fr-ava img{width:100%;height:100%;object-fit:cover}
.fr-ava.lg{width:78px;height:78px;font-size:26px}
.fr-dot{position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:50%;background:#8e8e93;border:2.5px solid var(--card)}
.fr-dot.on{background:#30d158}
.fr-name{font-size:16.5px;font-weight:700;letter-spacing:-.2px;color:var(--text);display:flex;align-items:center;gap:7px;min-width:0}
.fr-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fr-sub{font-size:13px;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:5px}
.fr-live-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(48,209,88,.14);color:#30d158;font-size:12px;font-weight:800;border-radius:9px;padding:3.5px 9px;letter-spacing:.2px;flex-shrink:0}
.fr-live-dot{width:7px;height:7px;border-radius:50%;background:#30d158;animation:fr-blink 1.6s ease-in-out infinite}
@keyframes fr-blink{0%,100%{opacity:1}50%{opacity:.35}}
.fr-pills{display:flex;gap:6px;margin-top:8px;flex-wrap:wrap}
.fr-pill{display:inline-flex;align-items:center;gap:5px;background:var(--soft);color:var(--text);font-size:12px;font-weight:700;border-radius:9px;padding:4px 9px}
.fr-pill svg{width:12px;height:12px}
.fr-pill .fl svg{width:100%;height:100%}
.fr-pill.fire{color:#ff9f0a;background:rgba(255,159,10,.13)}
.fr-chev{flex-shrink:0;color:var(--text2);opacity:.55}
.fr-empty-hero{text-align:center;padding:40px 22px;display:flex;flex-direction:column;align-items:center;gap:14px}
.fr-req-card{background:var(--soft);border:1.5px solid rgba(var(--acc-rgb),.3);border-radius:20px;padding:14px 16px;margin-bottom:12px;animation:fr-in .4s var(--ease) both}
.fr-req-head{font-size:12px;font-weight:800;color:var(--acc);letter-spacing:.8px;text-transform:uppercase;margin-bottom:10px}
.fr-req-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.fr-req-btns{display:flex;gap:8px;flex-shrink:0}
.fr-req-btns button{border:none;border-radius:12px;padding:9px 14px;font-size:13.5px;font-weight:700;font-family:inherit;cursor:pointer}
.fr-req-ok{background:var(--acc);color:#fff}
.fr-req-no{background:var(--inp-bg);color:var(--text2)}
.fr-ptr{height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--text2);font-size:13px;font-weight:600;transition:height .25s var(--ease)}
.fr-spin{width:18px;height:18px;border:2.5px solid var(--sep);border-top-color:var(--acc);border-radius:50%;animation:fr-rot .8s linear infinite;margin-right:8px}
@keyframes fr-rot{to{transform:rotate(360deg)}}
/* Freundes-Profil-Sheet */
.frp-hero{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px 0 16px}
.frp-level{display:inline-flex;align-items:center;gap:6px;margin-top:8px;background:var(--soft);color:var(--acc);font-size:12.5px;font-weight:800;border-radius:10px;padding:5px 11px;letter-spacing:.4px;text-transform:uppercase}
.frp-level .lvl-dot{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}
.frp-level .frp-xp{opacity:.7;font-weight:700}
/* Gründer-Banner auf dem Profil-Header */
.frp-founder{display:inline-flex;align-items:center;gap:7px;margin-top:10px;padding:6px 14px;border-radius:12px;
font-size:11.5px;font-weight:900;letter-spacing:.6px;text-transform:uppercase;color:#fff;
background:linear-gradient(90deg,#22e6ff,#a855ff,#ff2fd0);box-shadow:0 4px 16px rgba(168,85,255,.4)}
/* ── XP / Level-Karte (Gamification) ── */
.lvl-card{background:var(--gl-bg,rgba(120,120,128,.1));border:1px solid var(--gl-bdr,rgba(120,120,128,.16));border-radius:18px;padding:14px 16px;margin-bottom:14px;-webkit-tap-highlight-color:transparent;transition:transform .12s}
.lvl-card:active{transform:scale(.99)}
.lvl-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.lvl-rank{display:inline-flex;align-items:center;gap:8px;font-size:15.5px;font-weight:900;letter-spacing:.2px;color:var(--rc,var(--acc))}
.lvl-rank .lvl-dot{width:11px;height:11px;border-radius:50%;background:var(--rc,var(--acc));box-shadow:0 0 9px var(--rc,var(--acc));flex-shrink:0}
.lvl-xp{font-size:13px;font-weight:800;color:var(--text2);white-space:nowrap}
/* Neon: Mulde + 3-Layer-Staffel wie .segbar/.hw-spark. KEIN overflow:hidden mehr —
das wuerde den Hof des Fills abschneiden; der Fill traegt seinen eigenen Radius. */
.lvl-bar{height:9px;border-radius:6px;background:var(--ng-well,rgba(120,120,128,.2));box-shadow:inset 0 0 0 1px var(--ng-well-bdr,transparent)}
.lvl-fill{height:100%;border-radius:6px;background:var(--acc);transition:width .55s cubic-bezier(.32,1,.32,1);box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-1)),0 0 var(--gw-2) rgba(var(--acc-rgb),var(--gwa-2)),0 0 var(--gw-3) rgba(var(--acc-rgb),var(--gwa-3)),var(--neon-edge),inset 0 1px 3px rgba(255,255,255,var(--ng-hi))}
.lvl-sub{margin-top:9px;font-size:12.5px;font-weight:600;color:var(--text2)}
/* Level-Info-Sheet: Level-Leiter */
.lvl-ladder{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.lvl-step{display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:14px;background:var(--gl-bg-t,rgba(120,120,128,.1));border:1px solid transparent}
.lvl-step.on{border-color:rgba(var(--acc-rgb),.55);background:rgba(var(--acc-rgb),.08)}
.lvl-step .s-name{flex:1;font-size:14.5px;font-weight:800}
.lvl-step .s-xp{font-size:12.5px;font-weight:700;color:var(--text2)}
.lvl-step.on .s-xp{color:var(--acc)}
.lvl-xp-rules{margin-top:16px;font-size:12.5px;color:var(--text2);line-height:1.7}
.lvl-xp-rules b{color:var(--text)}
/* Header-Level-Badge (Startseite, neben der Flamme) — Stil analog Streak-Badge */
.lvl-badge{display:inline-flex;align-items:center;gap:4px;height:28px;box-sizing:border-box;padding:0 10px 0 7px;border-radius:999px;
background:linear-gradient(135deg,rgba(var(--acc-rgb),.20),rgba(var(--acc-rgb),.09));
border:1px solid rgba(var(--acc-rgb),.34);box-shadow:0 2px 10px rgba(var(--acc-rgb),.16);
font-size:13px;font-weight:800;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;cursor:pointer;white-space:nowrap}
.lvl-badge-n{color:var(--acc);letter-spacing:.2px}
.lvl-badge-pts{font-weight:700;color:var(--text2);font-size:12px}
.lvl-badge.bump{animation:lvlBump .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes lvlBump{0%{transform:scale(1)}45%{transform:scale(1.16)}100%{transform:scale(1)}}
/* „Lv N"-Tag neben Namen in der Community */
.lvl-tag{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:8px;font-size:11px;font-weight:800;
vertical-align:1px;letter-spacing:.2px;background:rgba(var(--acc-rgb),.16);color:var(--acc)}
.cpg-head .lvl-tag{background:rgba(255,255,255,.22);color:#fff}
/* Punkte-Ticker (beim Training-Ende): zentrale Pille + Punkte-Partikel ins Badge */
.xp-pill{position:fixed;z-index:4001;transform:translate(-50%,-50%) scale(.55);opacity:0;
padding:11px 20px;border-radius:999px;font-size:17px;font-weight:900;color:#fff;white-space:nowrap;pointer-events:none;
background:linear-gradient(135deg,rgba(var(--acc-rgb),.96),rgba(var(--acc-rgb),.72));
box-shadow:0 10px 34px rgba(var(--acc-rgb),.55),0 0 0 1px rgba(255,255,255,.14) inset;
transition:transform .7s cubic-bezier(.34,1.4,.5,1),opacity .7s ease}
.xp-pill.in{transform:translate(-50%,-50%) scale(1);opacity:1}
.xp-dot{position:fixed;z-index:4000;width:14px;height:14px;border-radius:50%;transform:translate(-50%,-50%) scale(1);
background:var(--acc);box-shadow:0 0 12px rgba(var(--acc-rgb),calc(.95 * var(--neon))),0 0 3px rgba(255,255,255,.85) inset;
pointer-events:none;opacity:1;animation:xpPop .18s ease-out;
transition:transform .52s cubic-bezier(.4,.02,.3,1),opacity .5s ease-in}
@keyframes xpPop{0%{transform:translate(-50%,-50%) scale(0)}62%{transform:translate(-50%,-50%) scale(1.4)}100%{transform:translate(-50%,-50%) scale(1)}}
@media (prefers-reduced-motion:reduce){.xp-pill,.xp-dot{transition-duration:.25s}.xp-dot{animation-duration:.08s}.lvl-badge.bump{animation:none}}
.frp-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}
.frp-stat{background:var(--card);border:1px solid var(--gl-bdr);border-radius:16px;padding:13px 14px}
.frp-stat-v{font-size:19px;font-weight:800;letter-spacing:-.3px;color:var(--text)}
.frp-stat-l{font-size:12px;color:var(--text2);font-weight:600;margin-top:2px}
.frp-sec{font-size:12.5px;font-weight:800;color:var(--text2);letter-spacing:.7px;text-transform:uppercase;margin:16px 0 8px}
.frp-badges{display:flex;gap:8px;flex-wrap:wrap}
.frp-badge{display:inline-flex;align-items:center;gap:6px;background:var(--soft);color:var(--acc);font-size:12.5px;font-weight:700;border-radius:11px;padding:7px 11px}
.frp-badge svg{width:14px;height:14px}
.frp-vs{background:var(--card);border:1px solid var(--gl-bdr);border-radius:16px;padding:14px}
.frp-vs-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.frp-vs-row:last-child{margin-bottom:0}
.frp-vs-name{width:64px;font-size:12.5px;font-weight:700;color:var(--text2);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.frp-vs-bar{flex:1;height:10px;border-radius:5px;background:var(--inp-bg);overflow:hidden}
.frp-vs-fill{height:100%;border-radius:5px;background:var(--acc);transition:width .7s var(--ease)}
.frp-vs-v{width:30px;text-align:right;font-size:13px;font-weight:800;color:var(--text)}
/* Plan / Split teilen (QR) + importieren */
.plan-share-btn svg{display:block}
.plshare-wrap{display:flex;flex-direction:column;align-items:center;padding:4px 24px 0;text-align:center}
.plshare-sub{font-size:14px;font-weight:700;color:var(--text);margin-bottom:16px;opacity:.9}
.plshare-qr{width:248px;height:248px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:20px;padding:8px;box-shadow:0 10px 34px rgba(0,0,0,.16)}
.plshare-qr img,.plshare-qr canvas{display:block;border-radius:10px}
.plshare-noqr{font-size:13px;color:#6b7280;font-weight:600;padding:0 18px;text-align:center}
.plshare-hint{font-size:12.5px;color:var(--text2);line-height:1.5;margin:16px 8px 20px;max-width:280px}
.plshare-btns{display:flex;flex-direction:column;gap:10px;width:100%}
.plimp-card{background:var(--card);border:1px solid var(--gl-bdr);border-radius:16px;padding:15px 16px;margin:6px 0 12px}
.plimp-hd{display:flex;align-items:center;gap:9px;margin-bottom:4px}
.plimp-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor}
.plimp-name{font-size:17px;font-weight:800;color:var(--text)}
.plimp-meta{font-size:12.5px;font-weight:700;color:var(--text2);letter-spacing:.2px}
.plimp-exs{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.plimp-ex{font-size:12.5px;font-weight:600;color:var(--text);background:var(--soft);border-radius:9px;padding:5px 10px}
.plimp-rows{margin-top:11px;display:flex;flex-direction:column;gap:8px}
.plimp-row{display:flex;align-items:center;gap:10px}
.plimp-day{width:82px;flex-shrink:0;font-size:13px;font-weight:700;color:var(--text2)}
.plimp-name2{font-size:14px;font-weight:700;color:var(--text);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plimp-note{font-size:12.5px;color:var(--text2);line-height:1.55;padding:0 2px}
.plimp-warn{font-size:12.5px;color:var(--text2);line-height:1.55;padding:11px 13px;background:rgba(255,159,10,.10);border:1px solid rgba(255,159,10,.22);border-radius:13px}
/* Activity-Feed */
.feed-item{display:flex;gap:12px;background:var(--card);border:1px solid var(--gl-bdr);border-radius:18px;padding:13px 14px;margin-bottom:10px;animation:fr-in .4s var(--ease) both}
.feed-txt{font-size:14px;color:var(--text);line-height:1.45;min-width:0}
.feed-txt b{font-weight:700}
.feed-time{font-size:12px;color:var(--text2);margin-top:3px}
.feed-reacts{display:flex;gap:6px;margin-top:9px;flex-wrap:wrap}
.feed-react{border:1px solid var(--gl-bdr);background:var(--inp-bg);border-radius:14px;padding:4px 10px;font-size:13px;font-family:inherit;cursor:pointer;color:var(--text2);font-weight:700;transition:transform .18s var(--spring),background .18s,border-color .18s}
.feed-react:active{transform:scale(1.2)}
.feed-react.on{background:var(--soft);border-color:rgba(var(--acc-rgb),.4);color:var(--acc)}
/* Privatsphäre / QR */
.priv-hint{font-size:13px;color:var(--text2);line-height:1.5;padding:2px 4px 12px}
#fr-qr{display:flex;justify-content:center;padding:14px;background:#fff;border-radius:18px;width:fit-content;margin:0 auto 6px}
.fradd-sec{font-size:12.5px;font-weight:800;color:var(--text2);letter-spacing:.7px;text-transform:uppercase;margin:18px 0 8px}
/* ── DARK + GLAS AN: Milchglas-Sweep (macOS-Widget-Look) ──
Alle restlichen Kästchen, die noch deckendes var(--card) bzw. dunkles
--gl-bg-t nutzten, bekommen dieselbe Milchglas-Rezeptur wie .card/.hw-card.
Aktive .on-Zustände (Akzentfarbe) bleiben ausgenommen. */
html:not([data-glass="off"])[data-theme="dark"] .frp-stat,
html:not([data-glass="off"])[data-theme="dark"] .frp-vs,
html:not([data-glass="off"])[data-theme="dark"] .feed-item,
html:not([data-glass="off"])[data-theme="dark"] .soc-search-res,
html:not([data-glass="off"])[data-theme="dark"] .soc-chip:not(.on),
html:not([data-glass="off"])[data-theme="dark"] .soc-code-btns button,
html:not([data-glass="off"])[data-theme="dark"] .wk-preset-card:not(.on),
html:not([data-glass="off"])[data-theme="dark"] .ob-opt:not(.on),
html:not([data-glass="off"])[data-theme="dark"] .ob-freq button:not(.on),
html:not([data-glass="off"])[data-theme="dark"] .ob-name-in,
html:not([data-glass="off"])[data-theme="dark"] .ob-tpl:not(.on),
html:not([data-glass="off"])[data-theme="dark"] .erf-tile,
html:not([data-glass="off"])[data-theme="dark"] .erf-badge{
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat));
border-color:var(--gl-bdr);
box-shadow:var(--gl-shad),var(--gl-hi);
}
/* Kleine Restflächen, die noch deckendes var(--card) trugen → helles Frost */
html:not([data-glass="off"])[data-theme="dark"] .wheel-typein-inp{background:var(--inp-focus)}
/* ===================================================================
LIQUID GLASS v3 — appweit, ALLE Themes (WebKit/WKWebView-sicher)
Rezeptur (wie macOS-Tahoe-Widgets):
1. SUBSTRAT: Wallpaper mit großen, weichen Lichtformen (Bögen/Streiflicht).
Ohne Struktur hinter dem Glas gibt es nichts zu brechen → grauer Kasten.
2. FLÄCHE: fast leer (Dark ~5 % Weiß), dafür sehr starker Blur.
3. LICHT: sitzt an der KANTE (Rim + Top-Edge), NICHT als Milchschleier innen.
Kein SVG-Refraktionsfilter und kein `mask` auf blur-Elementen (bricht WKWebView) —
Kanten kommen aus inset-Shadows + 1px-Pseudo mit mask (Pseudo ist unblurred).
Ersetzt den alten „EXPERIMENT"-Block (der nur Dark abdeckte und Tabbar/Buttons
mit einem milchigen Weiß-Fill zugedeckt hat).
=================================================================== */
/* ── 1 · SUBSTRAT ─────────────────────────────────────────────────
#bg = Grundfläche (--mesh) · #bg::before = Korn · #bg::after = Lichtformen.
Die Bögen sind riesige, sehr weiche Radial-Ringe mit Zentrum außerhalb des
Viewports → wirken wie gekrümmte Lichtkanten auf einem Apple-Wallpaper. */
#bg::after{
content:'';position:absolute;inset:0;pointer-events:none;
background:var(--wall,none);
transition:background .4s cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
--mesh:linear-gradient(180deg,#08080b 0%,#050507 52%,#000000 100%);
--wall:
/* Sehr dezente Lichtbögen (Zentrum außerhalb) — reine Funktion: das Glas
braucht Struktur zum Brechen. Kein Show-Effekt. */
radial-gradient(circle 760px at 108% 10%,transparent 46%,rgba(255,255,255,.13) 56%,rgba(255,255,255,.04) 63%,transparent 73%),
radial-gradient(circle 1150px at 118% 50%,transparent 54%,rgba(255,255,255,.09) 61%,rgba(255,255,255,.025) 67%,transparent 76%),
radial-gradient(circle 720px at -20% 76%,transparent 46%,rgba(255,255,255,.08) 56%,transparent 70%),
linear-gradient(108deg,transparent 14%,rgba(255,255,255,.028) 36%,rgba(255,255,255,.05) 47%,rgba(255,255,255,.02) 59%,transparent 78%),
radial-gradient(120% 60% at 88% -12%,rgba(255,255,255,.05) 0%,transparent 62%);
}
[data-theme="light"]{
--wall:
radial-gradient(circle 1050px at 118% 15%,transparent 55%,rgba(255,255,255,.95) 62%,transparent 74%),
radial-gradient(circle 1500px at 128% 62%,transparent 58%,rgba(118,126,142,.11) 64%,transparent 72%),
radial-gradient(circle 900px at -26% 86%,transparent 52%,rgba(118,126,142,.10) 60%,transparent 70%),
linear-gradient(116deg,transparent 28%,rgba(255,255,255,.80) 48%,transparent 66%);
}
[data-theme="rosa"]{
--wall:
radial-gradient(circle 1050px at 118% 15%,transparent 55%,rgba(255,255,255,.92) 62%,transparent 74%),
radial-gradient(circle 1500px at 128% 62%,transparent 58%,rgba(178,110,148,.13) 64%,transparent 72%),
radial-gradient(circle 900px at -26% 86%,transparent 52%,rgba(178,110,148,.11) 60%,transparent 70%),
linear-gradient(116deg,transparent 28%,rgba(255,255,255,.78) 48%,transparent 66%);
}
[data-theme="blau"]{
--wall:
radial-gradient(circle 1050px at 118% 15%,transparent 55%,rgba(255,255,255,.95) 62%,transparent 74%),
radial-gradient(circle 1500px at 128% 62%,transparent 58%,rgba(90,130,190,.13) 64%,transparent 72%),
radial-gradient(circle 900px at -26% 86%,transparent 52%,rgba(90,130,190,.11) 60%,transparent 70%),
linear-gradient(116deg,transparent 28%,rgba(255,255,255,.80) 48%,transparent 66%);
}
[data-theme="grün"]{
--wall:
radial-gradient(circle 1050px at 118% 15%,transparent 55%,rgba(255,255,255,.95) 62%,transparent 74%),
radial-gradient(circle 1500px at 128% 62%,transparent 58%,rgba(85,150,105,.13) 64%,transparent 72%),
radial-gradient(circle 900px at -26% 86%,transparent 52%,rgba(85,150,105,.11) 60%,transparent 70%),
linear-gradient(116deg,transparent 28%,rgba(255,255,255,.80) 48%,transparent 66%);
}
/* Glas aus → kein Substrat-Spiel, ruhige Fläche */
[data-glass="off"] #bg::after{display:none}
/* ── 2 · ZENTRALE GLAS-TOKENS (pro Theme) ──────────────────────────
--gl-chrome = Nav-/Steuerschicht (Tabbar, Floating)
--gl-sheet = Modals/Bottom-Sheets (dichter, Content muss lesbar bleiben)
--gl-ctrl = kleine Controls (Buttons, Chips, Close)
--gl-rim = Kantenlicht (oben hell, unten dezenter Reflex) */
[data-theme="dark"]{
/* SCHWARZE MILCH (Referenz macOS-Widgets): die Fläche ist ein dunkler,
rauchiger Film — sie DÄMPFT das Licht dahinter (siehe --gl-lift), statt es
aufzuhellen. Weiß gibt es nur an der Kante. Innen oben minimal heller. */
--gl-bg:linear-gradient(180deg,rgba(26,26,31,.58) 0%,rgba(9,9,13,.74) 100%);
--gl-bg-h:linear-gradient(180deg,rgba(30,30,36,.66) 0%,rgba(11,11,15,.80) 100%);
--gl-bg-t:rgba(20,20,25,.52);
--gl-chrome:linear-gradient(180deg,rgba(52,52,62,.34) 0%,rgba(20,20,27,.50) 100%);
--gl-sheet:linear-gradient(180deg,rgba(24,24,30,.78) 0%,rgba(8,8,12,.88) 100%);
--gl-ctrl:linear-gradient(180deg,rgba(38,38,45,.62) 0%,rgba(16,16,21,.76) 100%);
--gl-bdr:rgba(255,255,255,.15); --gl-bdr2:rgba(255,255,255,.07);
--gl-rim:
inset 0 1px 0 rgba(255,255,255,.34),
inset 0 0 0 1px rgba(255,255,255,.045),
inset 0 -1px 0 rgba(255,255,255,.075);
--gl-hi:var(--gl-rim);
/* Dezenter Milchschleier oben — im Mac-Widget sitzt das Licht an der Kante,
die Fläche selbst ist aber sichtbar milchig, nicht schwarz. */
--sheen:linear-gradient(180deg,rgba(255,255,255,.045) 0%,transparent 60%);
/* Rauchglas dämpft: das helle Wallpaper hinter der Scheibe wird runtergezogen
und nur diffus angedeutet → „schwarze Milch". Volle Helligkeit behalten die
Lücken ZWISCHEN den Flächen, dort blitzen die Lichtbögen. */
--gl-lift:brightness(.42) contrast(1.05);
--gl-blur:52px; --gl-blur-lg:88px; --gl-blur-sm:26px; --gl-sat:210%;
--inp-bg:rgba(255,255,255,.055); --inp-focus:rgba(255,255,255,.11);
}
[data-theme="light"],[data-theme="rosa"],[data-theme="blau"],[data-theme="grün"]{
/* Heller: Fläche bewusst dünner als vorher (.58 → .46), damit die Lichtformen
durchscheinen und es nach Glas aussieht statt nach weißem Karton. */
--gl-bg:linear-gradient(180deg,rgba(255,255,255,.46) 0%,rgba(255,255,255,.28) 100%);
--gl-bg-h:linear-gradient(180deg,rgba(255,255,255,.66) 0%,rgba(255,255,255,.46) 100%);
--gl-bg-t:rgba(255,255,255,.26);
--gl-chrome:linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,.34) 100%);
--gl-sheet:linear-gradient(180deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.68) 100%);
--gl-ctrl:linear-gradient(180deg,rgba(255,255,255,.58) 0%,rgba(255,255,255,.36) 100%);
--gl-rim:
inset 0 1px 0 rgba(255,255,255,.90),
inset 0 0 0 1px rgba(255,255,255,.32),
inset 0 -1px 0 rgba(255,255,255,.45);
--gl-hi:var(--gl-rim);
--sheen:linear-gradient(180deg,rgba(255,255,255,.16) 0%,transparent 70%);
--gl-blur:40px; --gl-blur-lg:66px; --gl-blur-sm:24px; --gl-sat:185%;
--gl-lift:brightness(1.06);
}
/* ── 2b · WENIGER KASTEN ────────────────────────────────────────
Im Referenz-Widget gibt es KEINE durchgezogene 1px-Linie: die Kante ist nur
dort hell, wo Licht drauf fällt (oben/links). Rahmen daher fast unsichtbar,
das sichtbare Kantenlicht macht der ::before-Rim. Größere Radien = weicher. */
:root{--r-lg:26px; --r-xl:32px}
html:not([data-glass="off"])[data-theme="dark"]{
--gl-bdr:rgba(255,255,255,.055); --gl-bdr2:rgba(255,255,255,.035);
--gl-rim:
inset 0 1px 0 rgba(255,255,255,.26),
inset 1px 0 0 rgba(255,255,255,.07),
inset 0 -1px 0 rgba(255,255,255,.045);
}
html:not([data-glass="off"]) .card,
html:not([data-glass="off"]) .ex-card,
html:not([data-glass="off"]) .hw-card,
html:not([data-glass="off"]) .hw-quick{border-radius:var(--r-lg)}
/* Innenkästen weg: Zeilen in einer Glasfläche tragen keinen eigenen Rahmen */
html:not([data-glass="off"]) .card .rec-row,
html:not([data-glass="off"]) .card .row{border-color:transparent}
html:not([data-glass="off"]) .card .rec-row + .rec-row{border-top:1px solid var(--sep)}
/* ── 3 · HEADER: kein Kasten mehr ─────────────────────────────────
Der Header scrollt mit; als eigene Glasplatte wirkt er wie ein Balken.
Transparent lassen = das Wallpaper läuft bis unter die Statusbar. */
html:not([data-glass="off"]) .hdr{
background:transparent!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
box-shadow:none!important;border:none!important;
}
html:not([data-glass="off"]) .hdr::after{display:none}
/* ── 4 · TABBAR ───────────────────────────────────────────────────
Kapsel aus fast leerem Glas: das Wallpaper wandert sichtbar dahinter durch,
das Licht sitzt auf der Kante. Gilt für alle Themes. */
html:not([data-glass="off"]) .tabbar{
background:var(--gl-chrome)!important;
/* KEIN --gl-lift hier: die Karten daempfen bewusst ab (schwarze Milch), die
Navigations-Kapsel muss dagegen durchlaessig bleiben — sonst sieht man hinter
ihr nur Schwarz und der Glaseffekt verschwindet. */
backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat)) brightness(1.14)!important;
-webkit-backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat)) brightness(1.14)!important;
border:1px solid var(--gl-bdr)!important;
box-shadow:var(--gl-rim),var(--gl-shad-lg)!important;
transition:max-width .3s cubic-bezier(.32,1,.32,1),padding .3s cubic-bezier(.32,1,.32,1),transform .3s;
}
html:not([data-glass="off"]) .tabbar::after{display:none} /* Sheen weg */
html:not([data-glass="off"]) .tabbar::before{
background:linear-gradient(150deg,
rgba(255,255,255,.75) 0%,rgba(255,255,255,.20) 26%,
transparent 52%,rgba(255,255,255,.10) 76%,rgba(255,255,255,.32) 100%);
}
html:not([data-glass="off"])[data-theme="dark"] .tabbar::before{
background:linear-gradient(150deg,
rgba(255,255,255,.58) 0%,rgba(255,255,255,.14) 24%,
transparent 50%,rgba(255,255,255,.05) 74%,rgba(255,255,255,.20) 100%);
}
/* Die Tab-Leiste bleibt konstant hoch. Das frühere Schrumpfen zur Icon-Kapsel
beim Runterscrollen (.tabbar--min) ist entfernt — die wandernde Unterkante
verschob Layout und Auswahl-Pille bei jedem Scroll-Richtungswechsel. */
/* KI-Bubble neben der Tabbar: gleiches Material, sonst wirkt sie wie ein Fremdkörper */
html:not([data-glass="off"]) #ai-bubble{
background:var(--gl-chrome)!important;
backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat)) brightness(1.14)!important;
-webkit-backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat)) brightness(1.14)!important;
border:1px solid var(--gl-bdr)!important;
box-shadow:var(--gl-rim),var(--gl-shad-lg)!important;
}
html:not([data-glass="off"]) #ai-bubble::after{display:none}
/* ── 5 · KARTEN / FLÄCHEN (alle Themes, nicht mehr nur Dark) ────── */
html:not([data-glass="off"]) .card,
html:not([data-glass="off"]) .ex-card,
html:not([data-glass="off"]) .hw-card,
html:not([data-glass="off"]) .hw-quick,
html:not([data-glass="off"]) .companion-card,
html:not([data-glass="off"]) .fr-card,
html:not([data-glass="off"]) .feed-item,
html:not([data-glass="off"]) .frp-stat,
html:not([data-glass="off"]) .frp-vs,
html:not([data-glass="off"]) .plimp-card,
html:not([data-glass="off"]) .soc-search-res,
html:not([data-glass="off"]) .soc-map-foot,
html:not([data-glass="off"]) .erf-tile,
html:not([data-glass="off"]) .ob-opt:not(.on),
html:not([data-glass="off"]) .ob-tpl:not(.on),
html:not([data-glass="off"]) .ob-name-in,
html:not([data-glass="off"]) .ob-freq button:not(.on),
html:not([data-glass="off"]) .wk-preset-card:not(.on){
background:var(--gl-bg);
backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat)) var(--gl-lift);
-webkit-backdrop-filter:blur(var(--gl-blur)) saturate(var(--gl-sat)) var(--gl-lift);
border-color:var(--gl-bdr);
box-shadow:var(--gl-rim),var(--gl-shad);
}
/* Verschachtelung: Glas IN Glas wird matschig (der Kind-Blur sampelt die schon
geblurrte Elternfläche). Kinder innerhalb einer Glasfläche daher ohne Blur. */
html:not([data-glass="off"]) .card .erf-tile,
html:not([data-glass="off"]) .card .frp-stat,
html:not([data-glass="off"]) .card .frp-vs{
backdrop-filter:none;-webkit-backdrop-filter:none;
background:var(--gl-bg-t);
}
/* ── 6 · CONTROLS: Buttons, Chips, Close, Segmente ──────────────── */
html:not([data-glass="off"]) .btn-gray,
html:not([data-glass="off"]) .btn:not(.btn-acc):not(.btn-danger):not(.fr-req-ok),
html:not([data-glass="off"]) .x-btn,
html:not([data-glass="off"]) .hdr-icon-btn,
html:not([data-glass="off"]) .fmode-btn:not(.on),
html:not([data-glass="off"]) .soc-chip:not(.on),
html:not([data-glass="off"]) .day-pill:not(.on),
html:not([data-glass="off"]) .soc-code-btns button,
html:not([data-glass="off"]) .pc-cfg-btn,
html:not([data-glass="off"]) .cs-preset-btn{
background:var(--gl-ctrl);
backdrop-filter:blur(var(--gl-blur-sm)) saturate(var(--gl-sat)) var(--gl-lift);
-webkit-backdrop-filter:blur(var(--gl-blur-sm)) saturate(var(--gl-sat)) var(--gl-lift);
border:1px solid var(--gl-bdr);
box-shadow:var(--gl-rim),var(--gl-shad);
color:var(--text);
transition:transform .14s ease,filter .14s ease,box-shadow .16s;
}
html:not([data-glass="off"]) .btn-gray:active,
html:not([data-glass="off"]) .x-btn:active,
html:not([data-glass="off"]) .hdr-icon-btn:active,
html:not([data-glass="off"]) .fmode-btn:active,
html:not([data-glass="off"]) .soc-chip:active{
transform:scale(.965);filter:brightness(1.10);
}
/* Primäre Aktion bleibt farbig (Apple: genau EIN prominentes Element) */
html:not([data-glass="off"]) .btn-acc{
background:
linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,0) 48%),
linear-gradient(160deg,rgba(var(--acc-rgb),1) 0%,rgba(var(--acc-rgb),.82) 100%);
border:1px solid rgba(255,255,255,.28);
color:#fff;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.55),
0 2px 8px rgba(var(--acc-rgb),.34),
0 14px 34px rgba(var(--acc-rgb),.28);
}
/* Auf hellem Grund verschwindet der weite 34-px-Schatten restlos — die Leiste
stand ohne jeden Saum da, waehrend sie im Dunkeln einen klaren Lichtsockel
hat. Enger und satter statt weiter und blasser, dieselbe Regel wie beim
Neon. Muss NACH der Regel oben stehen: gleiche Spezifitaet, es entscheidet
die Reihenfolge. */
html[data-theme="light"] .btn-acc,html[data-theme="rosa"] .btn-acc,
html[data-theme="blau"] .btn-acc,html[data-theme="grün"] .btn-acc{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.45),
0 2px 6px rgba(var(--acc-rgb),.32),
0 10px 22px rgba(var(--acc-rgb),.40);
}
/* ── 7 · SHEETS / MODALS ──────────────────────────────────────────
Dichter als Karten (Content dahinter darf nicht durchlesen), aber weiter Glas. */
html:not([data-glass="off"]) .sheet{
/* Deckende Basis + KEIN backdrop-filter. --gl-sheet ist nur 78–88 % deckend
und verliess sich auf den Blur; WebKit zog auf dem hohen, scrollenden
Sheet aber eine Kachelgrenze quer durch den Inhalt — die sichtbare Linie
mitten im Formular. Ohne Filter ist die Kante weg, der Verlauf bleibt. */
background-color:var(--gl-sheet-solid,var(--card))!important;
background-image:none!important;
border:1px solid var(--gl-bdr);
box-shadow:var(--gl-rim),var(--gl-shad-lg);
}
/* ── 8 · EINGABEFELDER ────────────────────────────────────────────*/
html:not([data-glass="off"]) .f-in,
html:not([data-glass="off"]) .set-in{
background:var(--inp-bg);
backdrop-filter:blur(var(--gl-blur-sm));-webkit-backdrop-filter:blur(var(--gl-blur-sm));
border:1px solid var(--gl-bdr);
box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
/* ── 9 · BARRIEREFREIHEIT ─────────────────────────────────────────*/
@media (prefers-reduced-transparency: reduce){
html:not([data-glass="off"]) .tabbar,html:not([data-glass="off"]) .sheet,
html:not([data-glass="off"]) .card,html:not([data-glass="off"]) .ex-card,
html:not([data-glass="off"]) .btn-gray,html:not([data-glass="off"]) .x-btn,
html:not([data-glass="off"]) .fmode-btn,html:not([data-glass="off"]) .soc-chip,
html:not([data-glass="off"]) .hdr-icon-btn{
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
[data-theme="dark"] .tabbar,[data-theme="dark"] .sheet,
[data-theme="dark"] .card,[data-theme="dark"] .ex-card{background:#1c1c22!important}
html:not([data-glass="off"]) #bg::after{display:none}
}
@media (prefers-reduced-motion: reduce){
.btn,.btn-acc,.tabbar,.tabbar .tab,.tabbar .tab span{transition:none!important}
.btn:active,.btn-acc:active{transform:none!important}
}
@media (prefers-contrast: more){
[data-theme="dark"]{--gl-bdr:rgba(255,255,255,.34)}
}
/* ── 10 · SOLID-MODUS (Glas aus) ───────────────────────────────────
Kein „Glas ohne Blur"-Kompromiss, sondern ein eigenes, ruhiges Material:
flacher Grund, eine Flächenstufe darüber, Haarlinien statt Lichtkanten.
Vorher blieb hier der alte, deckende Header als grauer Balken stehen und der
Grund war nicht durchgezogen — beides ist die Ursache des billigen Looks. */
[data-glass="off"][data-theme="dark"]{
--mesh:linear-gradient(180deg,#070709 0%,#050507 60%,#030304 100%);
--gl-bg:#141419; --gl-bg-h:#1a1a20; --gl-bg-t:#121217;
--gl-chrome:#16161c; --gl-sheet:#15151b; --gl-ctrl:#1e1e25;
--gl-bdr:rgba(255,255,255,.065); --gl-bdr2:rgba(255,255,255,.05);
--gl-rim:inset 0 1px 0 rgba(255,255,255,.05);
--gl-shad:0 1px 2px rgba(0,0,0,.45),0 10px 26px rgba(0,0,0,.40);
--gl-shad-lg:0 3px 10px rgba(0,0,0,.50),0 24px 56px rgba(0,0,0,.55);
--sheen:transparent; --sep:rgba(255,255,255,.06);
--inp-bg:#1c1c22; --inp-focus:#24242c;
}
[data-glass="off"]:not([data-theme="dark"]){
--gl-bg:#ffffff; --gl-bg-h:#ffffff; --gl-bg-t:#fbfbfd;
--gl-chrome:#ffffff; --gl-sheet:#ffffff; --gl-ctrl:#ffffff;
--gl-bdr:rgba(0,0,0,.07); --gl-bdr2:rgba(0,0,0,.05);
--gl-rim:inset 0 1px 0 rgba(255,255,255,.9);
--gl-shad:0 1px 2px rgba(0,0,0,.05),0 8px 22px rgba(0,0,0,.06);
--gl-shad-lg:0 2px 8px rgba(0,0,0,.07),0 20px 48px rgba(0,0,0,.10);
--sheen:transparent;
}
/* Header: auch im Solid-Modus KEIN Balken — er scrollt mit dem Inhalt. */
[data-glass="off"] .hdr{
background:transparent!important;box-shadow:none!important;border:none!important;
}
[data-glass="off"] .hdr::after{display:none}
/* Flächen: eine Stufe über dem Grund, Haarlinie, gleiche Radien wie im Glas */
[data-glass="off"] .card,[data-glass="off"] .ex-card,[data-glass="off"] .hw-card,
[data-glass="off"] .hw-quick,[data-glass="off"] .companion-card,
[data-glass="off"] .fr-card,[data-glass="off"] .feed-item,
[data-glass="off"] .frp-stat,[data-glass="off"] .frp-vs,
[data-glass="off"] .plimp-card,[data-glass="off"] .soc-search-res,
[data-glass="off"] .erf-tile{
background:var(--gl-bg);border:1px solid var(--gl-bdr);
border-radius:var(--r-lg);box-shadow:var(--gl-rim),var(--gl-shad);
}
[data-glass="off"] .tabbar{
background:var(--gl-chrome);border:1px solid var(--gl-bdr);
box-shadow:var(--gl-rim),var(--gl-shad-lg);
}
[data-glass="off"] .sheet{
background:var(--gl-sheet);border:1px solid var(--gl-bdr);
box-shadow:var(--gl-rim),var(--gl-shad-lg);
}
[data-glass="off"] #ai-bubble{
background:var(--gl-chrome);border:1px solid var(--gl-bdr);
box-shadow:var(--gl-rim),var(--gl-shad-lg);
}
[data-glass="off"] .btn-gray,[data-glass="off"] .btn:not(.btn-acc):not(.btn-danger):not(.fr-req-ok),
[data-glass="off"] .x-btn,[data-glass="off"] .hdr-icon-btn,
[data-glass="off"] .fmode-btn:not(.on),[data-glass="off"] .soc-chip:not(.on){
background:var(--gl-ctrl);border:1px solid var(--gl-bdr);
box-shadow:var(--gl-rim);color:var(--text);
}
/* Segment mit gleitender Pille: die inaktiven Felder bekommen im Glas-Modus
sonst einen eigenen deckenden Grund (Regeln weiter oben) — die Pille liegt
HINTER den Beschriftungen und waere auf ihrem Weg dahinter verschwunden.
Im Slide-Modus traegt darum nur die Wanne den Grund, die Felder sind nackt.
Steht bewusst hier unten: die Glas-Regeln kommen spaeter in der Datei als
der Segment-Block, ein Override oben waere wirkungslos. */
html:not([data-glass="off"]) .fmode-slide .fmode-btn:not(.on),
[data-glass="off"] .fmode-slide .fmode-btn:not(.on){
background:transparent;border-color:transparent;box-shadow:none;
backdrop-filter:none;-webkit-backdrop-filter:none;
color:var(--text2);
}
/* ===== LIQUID GLASS v3 — ENDE ===== */
/* ===================================================================
FEEL-LAYER — Anfassgefühl (Motion · Press · Typo-Politur)
Ziel: jede Berührung antwortet sofort und weich, nichts ruckelt, nichts
„springt". Regeln: nur transform/opacity/filter animieren (Compositor),
Enter länger als Exit, immer explizite transition-Properties.
=================================================================== */
:root{
--ease-out:cubic-bezier(.22,1,.36,1); /* Standard: schnell an, weich aus */
--ease-in:cubic-bezier(.4,0,1,1); /* Exits */
--press:cubic-bezier(.34,1.4,.64,1); /* Loslassen federt minimal zurück */
--t-press:120ms; --t-enter:280ms; --t-exit:160ms;
}
/* ── 1 · PRESS-FEEDBACK auf ALLEM, was man antippt ────────────────
Ohne Press-State fühlt sich eine Fläche wie ein Bild an, nicht wie ein
Bedienelement. Sehr kleine Skalierung (Apple-Maß), sofortiges Antworten. */
.card.tap,.row.tap,.hw-card,.hw-quick,.ex-card,.fr-card,.feed-item,
.rec-row,.day-pill,.soc-chip,.fmode-btn,.erf-tile,.plate-chip,
.cs-preset-btn,.ob-opt,.ob-tpl,.wk-preset-card,.frp-stat,.x-btn,
.hdr-icon-btn,.hdr-plus,.pc-cfg-btn,.tab{
transition-property:transform,opacity,background-color,border-color,box-shadow;
transition-duration:var(--t-press);
transition-timing-function:var(--press);
will-change:transform;
}
.card.tap:active,.row.tap:active,.hw-card:active,.hw-quick:active,
.ex-card:active,.fr-card:active,.feed-item:active,.rec-row:active,
.erf-tile:active,.frp-stat:active,.ob-opt:active,.ob-tpl:active,
.wk-preset-card:active,.plate-chip:active,.cs-preset-btn:active{
transform:scale(.978);
}
.day-pill:active,.soc-chip:active,.fmode-btn:active,.pc-cfg-btn:active{transform:scale(.94)}
.x-btn:active,.hdr-icon-btn:active,.hdr-plus:active{transform:scale(.88)}
/* Tab: Icon zuerst, Label folgt — wirkt „aufgehängt" statt starr */
.tab:active{transform:scale(.94)}
/* ── 2 · SHEETS: Enter weich, Exit kurz ───────────────────────────*/
.ov{transition:opacity var(--t-enter) var(--ease-out)}
.ov:not(.on){transition-duration:var(--t-exit)}
.sheet{
transition-property:transform,opacity;
transition-duration:var(--t-enter);
transition-timing-function:var(--ease-out);
/* KEIN will-change: das Blatt ist bildschirmhoch und scrollt. Eine dauerhaft
befoerderte Ebene dieser Groesse kostet Speicher und zwingt WebKit, sie bei
jeder Inhaltsaenderung neu zu zeichnen — sie hilft nur waehrend der 0,3 s
Oeffnungsblende und schadet die restliche Zeit. */
}
/* ── 3 · ZAHLEN & TEXT ────────────────────────────────────────────
Tabellenziffern: Zähler/Timer/Gewichte springen sonst in der Breite. */
.erf-tile-val,.erf-hero-val,.hw-card b,.rec-row-sub,.pc-plate,
.st-val,.stat-val,.set-in,.f-in,.rr-val,.frp-stat,.hdr .sub,
.tab span{font-variant-numeric:tabular-nums}
h1,h2,.row-title,.s-title{text-wrap:balance}
.row-sub,.sub,.rec-row-sub,.cs-intro,.priv-hint{text-wrap:pretty}
/* ── 4 · SCROLLEN ─────────────────────────────────────────────────
Kein Overscroll-Ketten (Sheet zieht sonst die Seite mit), Momentum an. */
.pg,.sheet{-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (prefers-reduced-motion: reduce){
.card.tap,.row.tap,.hw-card,.hw-quick,.ex-card,.fr-card,.feed-item,
.rec-row,.tab,.x-btn,.hdr-icon-btn{transition:none!important}
.card.tap:active,.row.tap:active,.hw-card:active,.ex-card:active,
.tab:active,.x-btn:active,.hdr-icon-btn:active{transform:none!important}
}
/* ===== FEEL-LAYER — ENDE ===== */
/* ===================================================================
SHEETS & TABBAR — Politur (an Liquid Glass v3 angepasst)
=================================================================== */
/* ── 1 · SCRIM: der Inhalt dahinter tritt zurück ───────────────────
Vorher blur(3px) + 50 % Schwarz → das Sheet „klebte" auf dem Inhalt. */
.ov{
background:rgba(0,0,0,.58)!important;
backdrop-filter:blur(14px) saturate(110%)!important;
-webkit-backdrop-filter:blur(14px) saturate(110%)!important;
}
/* Im Training gilt das NICHT. Das Trainingsblatt ist deckend und nimmt
95 vh ein — vom weichgezeichneten Hintergrund bleibt ein schmaler Streifen
am oberen Rand sichtbar. Dafuer eine bildschirmfuellende Weichzeichnung zu
rechnen lohnt nirgends, und hier schadet es doppelt: das Gewichts-Rad
(#ov-wheel) und die Satztyp-Wahl (#ov-settype) gehen waehrend einer Einheit
dutzendfach auf und zu, und jedes Aufgehen stoesst den Filter neu an.
Etwas mehr Schwarz ersetzt die Trennung zum Hintergrund. */
#ov-wk,#ov-wheel,#ov-settype{
background:rgba(0,0,0,.66)!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
/* Und das Trainingsblatt SELBST traegt keinen Weichzeichner und keinen Verlauf.
Das steht so schon bei .sheet (siehe dort: "KEIN Verlauf", "KEIN
backdrop-filter") — nur kam die Regel dort nie an: die Glas-Politur weiter
unten in diesem Block setzt beides mit !important zurueck, und !important
schlaegt jede Deklaration ohne. Auf einem 95 vh hohen Blatt, das scrollt, ist
genau das die teuerste Kombination, die es gibt: WebKit haelt eine
bildschirmgrosse Filterebene, und jede Aenderung im Inhalt — ein Haken, eine
eingeblendete Karte, ein Zahlenwechsel im Timer — zwingt sie zur
Neuzusammensetzung. Das war das Stocken beim Scrollen im Training.
Die ID gewinnt gegen die Klassenregel, das !important gegen deren !important.
Optisch aendert sich nichts Wesentliches: die Flaeche ist mit --card ohnehin
deckend, der Glanz kommt aus .sheet::after. */
#ov-wk>.sheet{
background:var(--card)!important;
background-image:none!important;
backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
/* ── 2 · SHEET-RAHMEN ─────────────────────────────────────────────*/
html:not([data-glass="off"]) .sheet,
html:not([data-glass="off"]) .cal-card{
border-radius:var(--r-xl) var(--r-xl) 0 0;
/* ACHTUNG: --gl-sheet ist ein GRADIENT (= background-image). Ein
background-image:none!important dahinter löscht ihn komplett → Sheet wird
durchsichtig und alle Bottom-Sheets sehen schwarz aus (Scrim dahinter).
Genau das war der „schwarze Kasten"-Bug vom 25.07. */
background:var(--gl-sheet)!important;
backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat)) var(--gl-lift)!important;
-webkit-backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat)) var(--gl-lift)!important;
border:1px solid var(--gl-bdr);border-bottom:none;
box-shadow:var(--gl-rim),0 -18px 60px rgba(0,0,0,.45);
}
/* Griff: feiner und ruhiger */
.sh-handle::after{width:36px;height:4px;opacity:.30}
/* ── 3 · SHEET-KOPF bleibt stehen ─────────────────────────────────
Vorher rutschte der Inhalt hart unter den Titel (im Kalender sah die erste
Zeile abgeschnitten aus). Jetzt klebt der Kopf oben und der Inhalt läuft
unter einem weichen Verlauf durch — nichts wird optisch abgehackt. */
.sheet .sh-head{
position:sticky;top:0;z-index:5;
padding-top:10px;padding-bottom:14px;
/* KEINE eigene Fläche! Jeder Verlauf/Radius hier malt eine zweite Kante über
das Sheet-Glas („doppelter Rahmen"-Bug 25.07.). Das Sheet ist EIN Material,
der Titel liegt einfach drauf. */
background:transparent;
}
.sheet{scroll-padding-top:64px}
/* Griff OHNE eigene Fläche: background:inherit malte den Sheet-Gradienten hier
nochmal komprimiert → heller Querbalken direkt unter der runden Kante, der
wie ein zweiter Rahmen aussah. Das Sheet-Glas läuft einfach durch; den
Schleier unterm Titel übernimmt .sh-head. */
.sheet .sh-handle{position:sticky;top:0;z-index:6;background:transparent;border-radius:var(--r-xl) var(--r-xl) 0 0}
/* ── 4 · KALENDER ─────────────────────────────────────────────────*/
.cal-card{width:calc(100% - 16px);max-width:460px;padding:4px 14px calc(18px + var(--sab))}
.cal-scroll{padding-top:2px}
.cal-weekhdr span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;opacity:.75}
.cal-grid{grid-auto-rows:42px;gap:5px}
.cal-cell{
border-radius:12px;font-size:12.5px;font-weight:600;
font-variant-numeric:tabular-nums;
background:transparent;
transition-property:transform,background-color,box-shadow;
transition-duration:var(--t-press);transition-timing-function:var(--press);
}
.cal-cell.l1{background:rgba(var(--acc-rgb),.22);color:var(--text)}
.cal-cell.l2{background:rgba(var(--acc-rgb),.42);color:#fff}
.cal-cell.l3{background:rgba(var(--acc-rgb),.66);color:#fff}
.cal-cell.l4{background:linear-gradient(180deg,rgba(var(--acc-rgb),.95),rgba(var(--acc-rgb),.78));color:#fff;
box-shadow:0 2px 8px rgba(var(--acc-rgb),.28),inset 0 1px 0 rgba(255,255,255,.28)}
/* Heute: Akzentring statt harter weißer Kontur */
.cal-cell.today{outline:none;box-shadow:0 0 0 2px var(--acc),0 0 0 5px rgba(var(--acc-rgb),.20)}
.cal-cell.has-sess:active{transform:scale(.92)}
.cal-day-chip{
padding:6px 11px;border-radius:11px;font-size:12px;
background:var(--gl-ctrl);border:1px solid var(--gl-bdr);
box-shadow:var(--gl-rim);
}
.cal-month-title{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text2)}
/* ── 5 · TABBAR: mehr Luft, weniger Gedrängel ─────────────────────
5 Labels in einer schmalen Kapsel wirkten voll. Kapsel etwas breiter (die
KI-Kugel ist kleiner), Innenabstände knapper, Labels eine Spur kleiner. */
/* ── Kapsel: nur Symbole ──────────────────────────────────────────────────
Die Beschriftungen sind raus. Fuenf Woerter in einer schmalen Kapsel waren
die eigentliche Enge — mit Symbolen allein bekommt jedes Ziel eine ruhige
Flaeche, und die Kapsel wird flach wie die Vorlage.
Das BLEIBT im Markup und wird nur optisch versteckt: VoiceOver liest
den Tab weiter als "Heute", "Training" — display:none haette die Leiste fuer
die Vorlesehilfe zu fuenf namenlosen Knoepfen gemacht. */
.tabbar{left:12px;right:74px;padding:6px}
.tabbar .tab{padding:10px 2px;gap:0;min-width:0;flex:1 1 0}
.tabbar .tab span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.tabbar .tab svg{width:24px;height:24px}
#ai-bubble{width:52px;height:52px;bottom:calc(8px + var(--sab))}
/* Aktiver Tab: KEINE eigene Farbfläche — das übernimmt die gleitende Bubble
(#tab-indicator). Zwei Highlights übereinander sahen doppelt/blau aus. */
html:not([data-glass="off"]) #tab-indicator{
background:var(--gl-ctrl);
backdrop-filter:blur(var(--gl-blur-sm)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur-sm)) saturate(var(--gl-sat));
border:1px solid var(--gl-bdr);
box-shadow:var(--gl-rim),0 4px 14px rgba(0,0,0,.28);
}
/* ===== SHEETS & TABBAR — ENDE ===== */
/* ── WORKOUT-SHARE-FLOW (Rattle → Kamera → Editor → Teilen) ── */
#ov-share{align-items:stretch!important;background:#07080d!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:1100!important}
.shf-screen{position:relative;width:100%;height:100%;display:flex;flex-direction:column;color:#fff;overflow:hidden;
background:
radial-gradient(120% 80% at 12% -5%, rgba(var(--acc-rgb,0,122,255),.24), transparent 55%),
radial-gradient(110% 75% at 105% 105%, rgba(var(--acc-rgb,0,122,255),.15), transparent 55%),
radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px) 0 0/26px 26px,
#07080d}
.shf-top{position:absolute;top:calc(10px + var(--sat,0px));left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 16px;z-index:30}
.shf-x{width:42px;height:42px;border-radius:50%;border:none;background:rgba(255,255,255,.14);color:#fff;font-size:17px;display:flex;align-items:center;justify-content:center}
.shf-title{font-size:15px;font-weight:800;letter-spacing:.3px}
.shf-hint{position:absolute;bottom:calc(30px + var(--sab));left:0;right:0;text-align:center;font-size:13px;color:rgba(255,255,255,.55);z-index:30}
/* Rattle */
.shf-rattle{flex:1;display:flex;align-items:center;justify-content:center;position:relative}
.shf-rcard{position:absolute;width:min(64vw,270px);aspect-ratio:3/4;border-radius:22px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.55);transition:transform .12s ease,opacity .12s ease}
.shf-rcard.back1{transform:scale(.88) translateY(-26px);opacity:.45;filter:brightness(.6)}
.shf-rcard.back2{transform:scale(.78) translateY(-48px);opacity:.25;filter:brightness(.4)}
.shf-rcard .shf-rname{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-size:13px;font-weight:800;letter-spacing:.4px;text-shadow:0 1px 6px rgba(0,0,0,.6)}
.shf-rcard img,.shf-rcard canvas{width:100%;height:100%;object-fit:cover;display:block}
@keyframes shfPop{0%{transform:scale(.96)}55%{transform:scale(1.04)}100%{transform:scale(1)}}
.shf-rcard.landed{animation:shfPop .38s cubic-bezier(.34,1.56,.64,1)}
/* Web-Kamera-Fallback */
.shf-cam{flex:1;position:relative;background:#000}
.shf-cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shf-cam video.mirror{transform:scaleX(-1)}
.shf-cam-bar{position:absolute;bottom:calc(26px + var(--sab));left:0;right:0;display:flex;align-items:center;justify-content:center;gap:44px;z-index:20}
.shf-shutter{width:74px;height:74px;border-radius:50%;background:#fff;border:5px solid rgba(255,255,255,.35)}
.shf-camside{width:46px;height:46px;border-radius:50%;border:none;background:rgba(0,0,0,.4);color:#fff;font-size:20px;display:flex;align-items:center;justify-content:center}
.shf-flashfx{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;z-index:40;transition:opacity .5s}
/* Editor (Layout-Swipe auf dem Foto) */
.shf-edit{flex:1;display:flex;flex-direction:column;justify-content:center}
.shf-swipe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;gap:16px;padding:14px 15vw;scrollbar-width:none}
.shf-swipe::-webkit-scrollbar{display:none}
/* Karten-Karussell: aktive Karte groß mit gestricheltem Rahmen (Ticket-Look),
Nachbarn lugen gedimmt und verkleinert an den Rändern rein */
.shf-slide{flex:0 0 70vw;scroll-snap-align:center;border-radius:22px;overflow:visible;position:relative;
transform:scale(.90);opacity:.38;transition:transform .28s ease,opacity .28s ease}
.shf-slide img{width:100%;display:block;border-radius:22px;box-shadow:0 14px 50px rgba(0,0,0,.5)}
.shf-slide.on{transform:scale(1);opacity:1}
.shf-slide.on::after{content:'';position:absolute;inset:-9px;border-radius:28px;pointer-events:none;
border:1.5px dashed rgba(255,255,255,.85)}
.shf-dots{display:flex;justify-content:center;gap:7px;margin-top:18px}
/* Stats-Zeile unter dem Karussell (Sessions · aktive Zeit, grüne Deltas) */
.shf-stats{display:flex;justify-content:center;gap:34px;margin-top:14px}
.shf-stats .l{display:block;font-size:10.5px;font-weight:800;letter-spacing:1.5px;color:rgba(255,255,255,.55);text-transform:uppercase}
.shf-stats b{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.3px}
.shf-stats i{font-style:normal;font-size:12px;font-weight:800;color:#30d158;margin-left:5px}
.shf-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.3);transition:transform .2s,background-color .2s,background .2s,color .2s,border-color .2s,box-shadow .2s,opacity .2s}
.shf-dot.on{background:var(--acc);width:20px;border-radius:4px}
.shf-cta{position:absolute;bottom:calc(24px + var(--sab));left:24px;right:24px;z-index:30;display:flex;gap:10px}
.shf-btn{flex:1;padding:16px;border-radius:18px;border:none;font-size:16px;font-weight:800;background:var(--acc);color:#fff}
.shf-btn.ghost{background:rgba(255,255,255,.14);color:#fff}
/* Teilen-Schritt */
.shf-share{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:10px;padding:calc(60px + var(--sat,0px)) 20px calc(20px + var(--sab));overflow-y:auto;-webkit-overflow-scrolling:touch}
.shf-share .shf-preview{flex:0 0 auto;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.shf-share .shf-preview img{max-width:52%;max-height:38vh;border-radius:16px;box-shadow:0 12px 44px rgba(0,0,0,.5)}
.shf-share .shf-btn{flex:0 0 auto;margin-top:2px}
.shf-dest{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:13px 15px}
.shf-dest .ico{width:30px;display:flex;align-items:center;justify-content:center;color:var(--acc)}
.shf-pal{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;padding:0 20px;position:absolute;bottom:calc(90px + var(--sab));left:0;right:0;z-index:30}
.shf-sw{width:30px;height:30px;border-radius:50%;border:2px solid rgba(255,255,255,.25);padding:0;transition:transform .15s,border-color .15s;cursor:pointer}
.shf-sw.on{border-color:#fff;transform:scale(1.14);box-shadow:0 0 0 3px rgba(255,255,255,.16)}
.shf-sw-wheel{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 2px rgba(255,255,255,.10)}
.shf-dest .t{flex:1;min-width:0}
.shf-dest .t b{display:block;font-size:15px}
.shf-dest .t span{font-size:12px;color:rgba(255,255,255,.55)}
/* ── COMMUNITY CARD-PAGER ── */
.cpg-wrap{position:relative;aspect-ratio:3/4;width:100%;max-width:calc((100dvh - 340px) * 0.75);margin:0 auto;touch-action:pan-y}
.cpg-card{position:absolute;inset:0;border-radius:22px;overflow:hidden;background:#111;box-shadow:0 14px 44px rgba(0,0,0,.35);will-change:transform,opacity}
.cpg-card.under{transform:scale(.9);opacity:0;z-index:1}
.cpg-card.top{z-index:2}
.cpg-card img.cpg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cpg-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,0) 55%,rgba(0,0,0,.62) 100%)}
.cpg-head{position:absolute;top:14px;left:14px;right:14px;display:flex;align-items:center;gap:10px;color:#fff;z-index:3}
.cpg-id:active{transform:scale(.97)}
.cpg-ava{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;overflow:hidden;flex-shrink:0}
.cpg-ava img{width:100%;height:100%;object-fit:cover}
.cpg-head .n{flex:1;min-width:0}
.cpg-head .n b{display:block;font-size:15px;text-shadow:0 1px 5px rgba(0,0,0,.5)}
.cpg-head .n span{font-size:12px;opacity:.75}
/* Gründer-Kennzeichnung: kleiner, cleaner schwarzer Badge neben dem Namen (nur Gründer).
Gleiche Größe wie der Level-Tag — statt der alten Neon-Krone. */
.founder-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:8px;font-size:11px;font-weight:800;
vertical-align:1px;letter-spacing:.3px;background:#0b0b0d;color:#fff;border:1px solid rgba(255,255,255,.16)}
.cpg-head .founder-tag{background:rgba(0,0,0,.55);border-color:rgba(255,255,255,.24)}
/* Moderator-Kennzeichnung: gleiche Form wie Founder-Tag, aber blau statt schwarz. */
.mod-tag{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:8px;font-size:11px;font-weight:800;
vertical-align:1px;letter-spacing:.3px;background:#0A84FF;color:#fff;border:1px solid rgba(255,255,255,.16)}
.cpg-head .mod-tag{background:rgba(10,132,255,.75);border-color:rgba(255,255,255,.24)}
/* Premium-Abzeichen neben Namen/Level — goldene Glow-Pille mit Shine-Sweep + sanftem
Puls, damit es in der Community präsenter neben dem Level sitzt. Theme-unabhängig gold. */
.prem-tag{position:relative;display:inline-flex;align-items:center;justify-content:center;
margin-left:6px;vertical-align:-3px;padding:3px;border-radius:999px;overflow:hidden;
background:radial-gradient(circle at 35% 30%,rgba(255,240,200,.30),rgba(217,165,52,.16) 70%,rgba(217,165,52,.05));
border:1px solid rgba(246,210,104,.55);
box-shadow:0 0 0 1px rgba(0,0,0,.04),0 2px 7px rgba(217,165,52,.35),inset 0 0 6px rgba(255,246,216,.35);
animation:premPulse 2.6s ease-in-out infinite}
.prem-tag svg{display:block;position:relative;z-index:1;filter:drop-shadow(0 0 2px rgba(255,224,140,.6))}
.prem-tag::after{content:"";position:absolute;top:0;left:-60%;width:55%;height:100%;z-index:2;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);
transform:skewX(-18deg);animation:premShine 3.4s ease-in-out infinite}
.cpg-head .prem-tag{border-color:rgba(255,255,255,.5);box-shadow:0 2px 8px rgba(0,0,0,.28),inset 0 0 6px rgba(255,246,216,.4)}
/* Solo-Variante im Startseiten-Header: eigenständig zwischen Level und Streak, klickbar. */
.prem-tag-solo{margin-left:0;vertical-align:baseline;padding:4px;cursor:pointer}
@keyframes premPulse{0%,100%{box-shadow:0 0 0 1px rgba(0,0,0,.04),0 2px 7px rgba(217,165,52,.30),inset 0 0 6px rgba(255,246,216,.35)}
50%{box-shadow:0 0 0 1px rgba(0,0,0,.04),0 3px 12px rgba(246,210,104,.60),inset 0 0 8px rgba(255,246,216,.55)}}
@keyframes premShine{0%{left:-60%}55%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){.prem-tag{animation:none}.prem-tag::after{display:none}}
.cpg-menu{width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.3);color:#fff;display:flex;align-items:center;justify-content:center;padding:0}
/* Snap-Card: das Bild ist bereits die fertig gestaltete Share-Card (Name, Tag, Stats,
Gym, Wasserzeichen alles eingebacken) — deshalb NUR die Controls drüberlegen,
kein doppelter HTML-Text-Chrome (sonst liegen zwei Layouts übereinander). */
.cpg-snap .cpg-menu{position:absolute;top:14px;right:14px;z-index:5}
.cpg-topfade{position:absolute;top:0;left:0;right:0;height:110px;border-radius:22px 22px 0 0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 60%,rgba(0,0,0,0));z-index:2;pointer-events:none}
/* Snap-Card = Bild OBEN (füllt den Bereich RANDLOS: cover, keine Balken) + SEPARATE
Flammen-Glasleiste DARUNTER (nicht auf dem Bild). Weicher Akzent-Übergang am Bildunterrand
lässt die Leiste sanft ausfaden — kein harter Balken. Header als Overlay über dem Bild. */
.cpg-snap{display:flex;flex-direction:column;background:#0d0d0f}
.cpg-snap-media{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:22px 22px 0 0;background:#0d0d0f}
.cpg-card.cpg-snap img.cpg-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.cpg-snap .cpg-head{z-index:4}
/* Weicher Akzent-Ausfaden am unteren Bildrand → geht sanft in die Fußleiste über (kein harter Rand). */
.cpg-foot-fade{position:absolute;left:0;right:0;bottom:0;height:96px;z-index:3;pointer-events:none;
background:linear-gradient(180deg,rgba(var(--acc-rgb),0) 0%,rgba(var(--acc-rgb),.05) 50%,rgba(var(--acc-rgb),.18) 100%)}
/* Separate Flammen-Glasleiste UNTER dem Bild (eigene Zeile, Akzent-Glas). */
/* KEIN backdrop-filter: die Fußleiste sitzt IN der Karte, und die Karte wird beim
Wischen pro Bild verschoben, gedreht und in der Deckkraft verändert. Ein
Weichzeichner müsste dann jedes Bild neu gerechnet werden, obwohl dahinter nur
die eigene dunkle Kartenfläche liegt — gemessen 23,5 → 19,3 ms Spitzenframe
allein durch das Weglassen, auf dem Gerät mehr. Der Farbverlauf liefert
denselben Eindruck ohne Kosten. */
.cpg-snap-foot{flex-shrink:0;height:60px;display:flex;align-items:center;justify-content:center;border-radius:0 0 22px 22px;
background:linear-gradient(180deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.30))}
.cpg-snap-foot{gap:12px}
/* Reaktions-Zähler-Label neben der Flamme („N Flammen") — Zahl steht in der Fußleiste UNTER dem Bild. */
.cpg-snap-foot .flm-btn .ct{display:none}
.cpg-flct{font-size:14px;font-weight:800;color:#fff;letter-spacing:-.2px}
.cpg-flct.dim{opacity:.7;font-weight:700}
.cpg-snap .flm-btn{position:static;transform:none;bottom:auto;left:auto;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.16);padding:8px 24px}
.cpg-snap .flm-btn:active{transform:scale(.92)}
.cpg-snap .flm-btn.on{background:rgba(255,90,0,.34);border-color:rgba(255,140,0,.4);box-shadow:0 0 22px rgba(255,120,0,calc(.4 * var(--neon)))}
.cpg-vdate{position:absolute;right:12px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:11px;letter-spacing:2.5px;color:rgba(255,255,255,.65);text-transform:uppercase;z-index:3}
.cpg-water{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) rotate(-8deg);font-size:34px;font-weight:900;letter-spacing:1px;color:rgba(255,255,255,.13);white-space:nowrap;pointer-events:none;z-index:2}
.cpg-info{position:absolute;left:16px;right:16px;bottom:76px;color:#fff;z-index:3}
.cpg-info .day{font-size:22px;font-weight:900;letter-spacing:-.4px;text-shadow:0 2px 8px rgba(0,0,0,.45)}
.cpg-info .meta{font-size:13px;opacity:.85;margin-top:3px}
.cpg-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
/* Ebenfalls ohne Weichzeichner (liegt in der animierten Karte, s. o.) — die
etwas dichtere Fläche trägt den Kontrast allein. */
.cpg-chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;background:rgba(255,255,255,.2)}
.cpg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:12px;color:var(--text2);text-align:center;padding:0 30px}
.cpg-count{position:absolute;top:-30px;right:4px;font-size:12px;color:var(--text2)}
/* Flamme */
.flm-btn{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);z-index:4;border:none;background:rgba(0,0,0,.38);backdrop-filter:blur(10px);color:#fff;border-radius:26px;padding:10px 22px;display:flex;align-items:center;justify-content:center;gap:0;font-size:15px;font-weight:800;transition:transform .15s}
.flm-btn:active{transform:translateX(-50%) scale(.92)}
.flm-btn .ct:not(:empty){margin-left:8px}
.flm-btn .fl{display:inline-flex;align-items:center;justify-content:center;transform-origin:center;filter:grayscale(1) brightness(1.6);transition:filter .2s}
.flm-btn.on{background:rgba(255,90,0,.32);box-shadow:0 0 22px rgba(255,120,0,calc(.45 * var(--neon)))}
.flm-btn.on .fl{filter:none}
@keyframes flmPop{0%{transform:scale(1)}40%{transform:scale(1.55) rotate(-8deg)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.flm-btn.pop .fl{animation:flmPop .5s cubic-bezier(.34,1.56,.64,1)}
.flm-part{position:absolute;left:50%;top:50%;font-size:13px;pointer-events:none;animation:flmFly .7s ease-out forwards}
@keyframes flmFly{0%{transform:translate(-50%,-50%) scale(.6);opacity:1}100%{transform:translate(calc(-50% + var(--fx)),calc(-50% + var(--fy))) scale(1.15);opacity:0}}
/* Oberste Community/Freunde-Umschaltung */
.soc-zone-toggle{display:flex;gap:6px;background:var(--gl-bg-t,rgba(120,120,128,.12));border-radius:15px;padding:5px}
.szt{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;border:none;background:none;padding:11px 8px;border-radius:11px;font-size:15px;font-weight:800;color:var(--text2);font-family:inherit;cursor:pointer;transition:background .18s,color .18s}
.szt svg{opacity:.8}
.szt.on{background:var(--acc);color:#fff}
.szt.on svg{opacity:1}
.cpg-zone{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--text2);font-size:12.5px;font-weight:700;margin-bottom:10px}
.cpg-zone svg{color:var(--acc)}
/* Dezenter Live-Zähler: „· N im Training" mit grünem Puls-Punkt */
.cpg-live{display:none;align-items:center;gap:5px;color:var(--text2)}
.cpg-live.on{display:inline-flex}
.cpg-live i{width:6px;height:6px;border-radius:50%;background:#30d158;flex-shrink:0}
@media (prefers-reduced-motion:no-preference){.cpg-live i{animation:coachPulse 2s ease-in-out infinite}}
.flm-bell{position:relative}
.flm-bell-badge{display:none;position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;border-radius:8px;background:#ff453a;color:#fff;font-size:10px;font-weight:800;line-height:16px;padding:0 4px;text-align:center}
.flm-note{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--gl-bdr,rgba(120,120,128,.15))}
.flm-note:last-child{border-bottom:none}
.flm-note .t{flex:1;font-size:14px;line-height:1.35}
.flm-note .ts{font-size:11.5px;color:var(--text2)}
/* ═══════════════════ PREMIUM ═══════════════════ */
/* Gold-Akzent für Premium-Elemente — unabhängig vom Theme */
:root{--prem1:#f7c948;--prem2:#ff9d2f;--prem-grad:linear-gradient(135deg,#f7c948,#ff9d2f)}
.prem-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:9px;font-size:11px;font-weight:800;
background:var(--prem-grad);color:#3a2500;letter-spacing:.3px}
/* Paywall — cleaner App-Stil, dezenter Akzent statt Gold-Verlauf; eigener
z-index über Tabbar (1000) und KI-Bubble (1060), sonst versteckt die
schwebende Leiste die Sheet-Unterkante. */
#ov-paywall{z-index:1080}
/* Inhalt nicht randbündig: Sheet selbst hat kein Seiten-Padding, nur .sh-head —
der gerenderte Paywall-Body braucht daher eigenes. */
#pw-body{padding:0 20px}
/* Konto-Sheet: gleicher Grund wie oben, PLUS kann von aiCall() bei 402 im
Simulator über ein bereits offenes KI-Sheet (Chat/Analyse) gelegt werden —
ohne eigenen z-index würde die Stapel-Reihenfolge nur vom DOM-Ort abhängen
(beide sonst gleich 900) und das Login-Sheet könnte dahinter verschwinden. */
#ov-account{z-index:1080}
/* ═══════════ PAYWALL v2 — Fullscreen, kein Scroll, clean/hell (Hevy-Stil) ═══════════
Ganzflächiges Sheet: obere Showcase mit wischbaren, animierten Vorteil-Karten,
unten die zwei Abomodelle + CTA. Alles auf EINEN Screen, nichts scrollt. */
#ov-paywall{align-items:stretch}
#ov-paywall .sheet{
height:100dvh;max-height:100dvh;min-height:100dvh;
border-radius:0;border:none;padding-bottom:0;overflow:hidden;
display:flex;flex-direction:column;
background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;
}
#ov-paywall .sheet::after{display:none}
#ov-paywall .sh-head{display:none}
#ov-paywall .sh-handle{height:calc(var(--sat) + 16px);align-items:flex-end;padding-bottom:5px}
#ov-paywall #pw-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:0}
.pw2{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.pw2-close{position:absolute;top:2px;right:14px;z-index:6;
width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;
background:var(--g5);color:var(--text2);display:flex;align-items:center;justify-content:center;
font-size:14px;font-weight:600;-webkit-tap-highlight-color:transparent}
.pw2-close:active{opacity:.55}
.pw2-brand{display:flex;align-items:center;justify-content:center;gap:6px;
font-size:12.5px;font-weight:800;letter-spacing:.3px;color:var(--acc);
padding:4px 0 2px}
.pw2-brand svg{color:var(--acc)}
/* ── Showcase / wischbare Karten ── */
.pw2-show{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center;padding-top:4px}
.pw2-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.pw2-track::-webkit-scrollbar{display:none}
.pw2-card{flex:0 0 100%;scroll-snap-align:center;
display:flex;flex-direction:column;align-items:center;justify-content:center;
padding:4px 30px;text-align:center}
.pw2-ct{font-size:22px;font-weight:800;letter-spacing:-.4px;line-height:1.15}
.pw2-cs{font-size:14.5px;color:var(--text2);line-height:1.5;margin-top:8px;max-width:290px}
.pw2-dots{display:flex;gap:7px;justify-content:center;margin-top:18px}
.pw2-dot{width:8px;height:8px;border-radius:50%;background:var(--sep);cursor:pointer;
transition:transform .3s,background .3s;-webkit-tap-highlight-color:transparent}
.pw2-dot.on{transform:scale(1.6);background:var(--acc)}
/* ── Animierte Bühne pro Karte ── */
/* Float sitzt auf der GANZEN Bühne, nicht nur auf dem Orb — sonst wandert das
Symbol aus seinem Glow-Layer und den Puls-Ringen raus (die floaten nicht mit). */
.pw2-stage{width:146px;height:146px;position:relative;margin-bottom:22px;
display:flex;align-items:center;justify-content:center;
animation:pwFloat 3.4s ease-in-out infinite}
.pw2-stage::before{content:'';position:absolute;inset:0;border-radius:44px;
background:radial-gradient(circle at 50% 50%,rgba(var(--acc-rgb),.16),transparent 68%)}
.pw2-orb{width:96px;height:96px;border-radius:30px;position:relative;z-index:2;
display:flex;align-items:center;justify-content:center;color:var(--acc);
background:linear-gradient(155deg,rgba(var(--acc-rgb),.16),rgba(var(--acc-rgb),.04));
border:1px solid rgba(var(--acc-rgb),.22);
box-shadow:0 16px 36px rgba(var(--acc-rgb),.18),inset 0 1px 0 rgba(255,255,255,.55)}
@keyframes pwFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
/* coach: Puls-Ringe */
.pwa-ring{position:absolute;width:96px;height:96px;border-radius:30px;z-index:1;
border:2px solid rgba(var(--acc-rgb),.45);animation:pwPulse 2.4s ease-out infinite}
.pwa-ring.d2{animation-delay:1.2s}
@keyframes pwPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.55);opacity:0}}
/* chat: aufpoppende Blasen */
.pwa-bub{position:absolute;z-index:3;border-radius:12px 12px 12px 3px;
background:var(--acc);box-shadow:0 6px 16px rgba(var(--acc-rgb),.35)}
/* Deko in % der Bühne — sonst behalten die px-Werte im kleinen Breakpoint
(Bühne 112 statt 146) ihren Abstand und rutschen aufs Symbol. */
.pwa-bub.a{width:23%;height:15%;top:11%;right:9.5%;animation:pwPop 3s ease-in-out infinite}
.pwa-bub.b{width:18%;height:12.5%;bottom:12%;left:9.5%;border-radius:12px 12px 3px 12px;
background:rgba(var(--acc-rgb),.55);animation:pwPop 3s ease-in-out .5s infinite}
@keyframes pwPop{0%,70%,100%{transform:scale(0);opacity:0}12%,58%{transform:scale(1);opacity:1}}
/* scan: durchlaufende Linie + Ecken */
.pwa-scan{overflow:hidden}
.pwa-scanline{position:absolute;left:8%;right:8%;height:2.5px;border-radius:2px;top:17%;
background:linear-gradient(90deg,transparent,var(--acc),transparent);
box-shadow:0 0 12px 2px rgba(var(--acc-rgb),calc(.55 * var(--neon)));animation:pwScan 2.2s ease-in-out infinite}
/* % statt px: Weg bleibt im kleinen Orb (78px) symmetrisch zur Mitte */
@keyframes pwScan{0%,100%{top:17%}50%{top:79%}}
/* analyze: wachsende Balken — gemeinsame Grundlinie (transform-origin:bottom),
sonst wächst jeder Balken aus seiner eigenen Mitte und die Gruppe wirkt schief. */
.pwa-bars{gap:7px;align-items:flex-end;padding-bottom:18px}
.pwa-bars span{width:11px;border-radius:4px;background:var(--acc);
transform-origin:bottom;animation:pwGrow 1.8s ease-in-out infinite}
.pwa-bars span:nth-child(1){height:30px;animation-delay:0s}
.pwa-bars span:nth-child(2){height:52px;animation-delay:.18s}
.pwa-bars span:nth-child(3){height:40px;animation-delay:.36s}
.pwa-bars span:nth-child(4){height:60px;animation-delay:.54s}
@keyframes pwGrow{0%,100%{transform:scaleY(.4)}50%{transform:scaleY(1)}}
/* insights: funkelnde Sparkles */
.pwa-spk{position:absolute;z-index:3;color:var(--acc);animation:pwTwinkle 2.4s ease-in-out infinite}
.pwa-spk.s1{top:8%;right:11%}
.pwa-spk.s2{bottom:9.5%;left:9.5%;animation-delay:.8s}
/* margin-top statt translateY: die Twinkle-Animation belegt transform schon */
.pwa-spk.s3{top:50%;margin-top:-5px;right:4%;animation-delay:1.5s}
@keyframes pwTwinkle{0%,100%{transform:scale(.3) rotate(0);opacity:0}50%{transform:scale(1) rotate(90deg);opacity:1}}
@media (prefers-reduced-motion:reduce){
.pw2-stage,.pw2-orb,.pwa-ring,.pwa-bub,.pwa-scanline,.pwa-bars span,.pwa-spk{animation:none!important}
.pwa-bub,.pwa-spk{opacity:1;transform:scale(1)}
}
/* ── Unterer Block: Pläne + CTA ── */
.pw2-bot{flex-shrink:0;padding:12px 20px calc(12px + var(--sab));
display:flex;flex-direction:column;gap:11px}
.pw2-plans{display:flex;gap:10px}
.pw2-plan{flex:1;position:relative;border:2px solid var(--gl-bdr);border-radius:18px;
padding:15px 10px 12px;text-align:center;cursor:pointer;background:var(--inp-bg);
transition:border-color .16s,transform .16s,box-shadow .2s;-webkit-tap-highlight-color:transparent}
.pw2-plan.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.07);
box-shadow:0 8px 24px rgba(var(--acc-rgb),.20)}
.pw2-plan-name{font-size:12px;font-weight:800;color:var(--text2);text-transform:uppercase;letter-spacing:.5px}
.pw2-plan-price{font-size:23px;font-weight:800;margin-top:5px;letter-spacing:-.4px}
.pw2-plan-per{font-size:11.5px;color:var(--text2);margin-top:2px}
.pw2-plan-save{position:absolute;top:-10px;left:50%;transform:translateX(-50%);white-space:nowrap;
background:linear-gradient(120deg,var(--acc),rgba(var(--acc-rgb),.75));color:#fff;
font-size:10px;font-weight:800;padding:3px 9px;border-radius:8px;
box-shadow:0 4px 12px rgba(var(--acc-rgb),.4)}
.pw2-plan-check{position:absolute;top:8px;right:8px;width:18px;height:18px;border-radius:50%;
display:flex;align-items:center;justify-content:center;background:var(--acc);color:#fff;
opacity:0;transform:scale(.5);transition:opacity .15s,transform .18s}
.pw2-plan.on .pw2-plan-check{opacity:1;transform:none}
.pw2-cta{width:100%;border:none;border-radius:16px;padding:16px;font-size:16.5px;font-weight:800;
font-family:inherit;cursor:pointer;position:relative;overflow:hidden;
background:linear-gradient(120deg,var(--acc) 0%,rgba(var(--acc-rgb),.82) 100%);color:#fff;
box-shadow:0 10px 26px rgba(var(--acc-rgb),.40),inset 0 1px 0 rgba(255,255,255,.28);
-webkit-tap-highlight-color:transparent}
.pw2-cta::after{content:'';position:absolute;top:0;bottom:0;width:46%;left:-50%;
background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);
animation:pwShine 3.2s ease-in-out infinite}
@keyframes pwShine{0%,55%{transform:translateX(0)}85%,100%{transform:translateX(420%)}}
@media (prefers-reduced-motion:reduce){.pw2-cta::after{animation:none}}
.pw2-cta:active{transform:scale(.985)}
.pw2-cta:disabled{opacity:.6}
.pw2-legal{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
font-size:11px;color:var(--text2)}
.pw2-legal .tk{display:inline-flex;align-items:center;gap:4px;font-weight:700}
.pw2-legal .tk svg{color:#30d158;flex-shrink:0}
.pw2-legal button{background:none;border:none;font-family:inherit;font-size:11px;
color:var(--acc);font-weight:700;cursor:pointer;padding:2px}
/* Abo-Bedingungen (Länge/Preis/Auto-Verlängerung) über den Pflicht-Links */
.pw2-legal{flex-direction:column;gap:5px}
.pw2-legal .tk{max-width:320px;text-align:center;line-height:1.45;
align-items:flex-start;font-weight:600}
.pw2-legal-links{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.pw2-webnote{padding:14px;text-align:center;font-size:14px;line-height:1.5;
border-radius:16px;background:var(--inp-bg);border:1px solid var(--gl-bdr)}
/* kurze Screens: alles etwas kompakter, bleibt scrollfrei */
@media (max-height:720px){
.pw2-stage{width:112px;height:112px;margin-bottom:16px}
.pw2-orb{width:78px;height:78px;border-radius:24px}
.pwa-ring{width:78px;height:78px;border-radius:24px}
.pwa-bars{padding-bottom:9px} /* Grundlinie mittig halten: (78 − 60) / 2 */
.pw2-ct{font-size:20px}.pw2-cs{font-size:13.5px}
.pw2-dots{margin-top:12px}
.pw2-plan-price{font-size:21px}
.pw2-cta{padding:14px}
}
/* ═══════════════════ KI-COACH: SCHWEBENDE BUBBLE + RADIALMENÜ ═══════════════════ */
/* Abgetrennter Kreis rechts neben der (gestauchten) Tableiste, gleiche Unterkante,
feste Größe (kleiner als die Tabbar-Höhe). IMMER dunkles Glas — bewusst NICHT
themenabhängig wie .tabbar, damit die Bubble als eigenständiges Premium-Element
erkennbar bleibt, egal welches App-Theme aktiv ist. Zeigt das App-Icon. */
#ai-bubble{
position:fixed;z-index:1060;right:14px;bottom:calc(6px + var(--sab));
width:56px;height:56px;border-radius:50%;overflow:hidden;
padding:0;margin:0;font:inherit;
display:flex;align-items:center;justify-content:center;
background:rgba(28,28,32,.62);
backdrop-filter:blur(34px) saturate(160%);
-webkit-backdrop-filter:blur(34px) saturate(160%);
border:1px solid rgba(255,255,255,.16);
cursor:pointer;-webkit-tap-highlight-color:transparent;
box-shadow:0 8px 28px rgba(0,0,0,.38),0 2px 8px rgba(0,0,0,.22),
inset 0 1px 0 rgba(255,255,255,.16);
transition:opacity .22s ease,visibility .22s ease;outline:none;
}
[data-glass="off"] #ai-bubble{
background:#1c1c20;backdrop-filter:none;-webkit-backdrop-filter:none;
box-shadow:0 2px 20px rgba(0,0,0,.30);
}
#ai-bubble::after{
content:'';position:absolute;top:0;left:0;right:0;height:48%;
background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 100%);
pointer-events:none;border-radius:999px 999px 0 0;
}
[data-glass="off"] #ai-bubble::after{display:none}
#ai-bubble::before{
content:'';position:absolute;inset:0;border-radius:50%;padding:1.5px;
background:linear-gradient(160deg,
rgba(255,255,255,.75) 0%,rgba(255,255,255,.22) 30%,
transparent 55%,rgba(255,255,255,.26) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;
pointer-events:none;z-index:2;
}
/* App-Icon füllt die Kugel komplett; Glas-Ebenen (::before/::after) liegen drüber */
#ai-bubble img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:1;pointer-events:none}
#ai-bubble:active{opacity:.72}
body.ai-hidden #ai-bubble,body.ai-hidden #ai-radial-backdrop,body.ai-hidden .ai-r-item{
opacity:0!important;visibility:hidden!important;pointer-events:none!important;
}
#ai-radial-backdrop{
position:fixed;inset:0;z-index:1055;display:none;
/* Dunkler als die fruehere .20: auf hellen Themes (light/rosa) standen die
Menue-Pillen kaum lesbar auf dem Seiteninhalt. Der Blur mildert nur Kanten,
den Kontrast macht die Deckschicht. */
background:rgba(0,0,0,.46);backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);
opacity:0;transition:opacity .22s ease;
}
#ai-radial-backdrop.on{display:block;opacity:1}
/* Dunkel behaelt exakt die Werte von vor dem Hell-Umbau: .20 Deckschicht und
blur(12px). Die .46 oben sind ausschliesslich fuer hell/rosa/blau/gruen da,
wo die Pillen sonst auf dem Seiteninhalt stehen. Auf Schwarz braucht es die
zusaetzliche Deckschicht nicht — dort war das Menue mit ihr nur noch ein Loch.
Die glass-off-Ausnahme weiter oben (blur 14px) gilt unveraendert fuer alle
Themes; ein eigener Dark-Wert dafuer entfaellt wieder. */
[data-theme="dark"] #ai-radial-backdrop{
background:rgba(0,0,0,.20);
backdrop-filter:blur(12px) saturate(1.15);-webkit-backdrop-filter:blur(12px) saturate(1.15);
}
/* Bewusst KEIN Scroll-Container mehr: overflow-y + Kind-Effekte erzeugten in
WKWebView eine durchgehende dunkle Compositing-Fläche hinter den Pillen. */
#ai-radial{
position:fixed;z-index:1061;display:flex;flex-direction:column-reverse;gap:10px;
padding:2px;background:none;
/* KRITISCH: Der Container ist IMMER im DOM und durch die 7 Pillen rund 400 px
hoch — ohne pointer-events:none fängt er als oberste Ebene (z-index 1061)
alle Taps und Swipes in seinem Bereich ab, obwohl man nichts sieht. Genau
das hat Community-Swipes und Buttons „tot" wirken lassen. Nur die
eingeblendeten Pillen (.ai-r-item.on) nehmen wieder Eingaben an. */
pointer-events:none;
}
.ai-r-item{
flex-shrink:0;width:fit-content;height:46px;border-radius:23px;padding:0 18px 0 14px;
display:flex;align-items:center;gap:10px;
/* KEIN backdrop-filter hier: innerhalb des Scroll-Containers #ai-radial rendert
WKWebView den Filter als durchgehende dunkle Box hinter allen Pillen
(gleicher WebKit-Bug wie bei der Snap-Card). Solide Pille stattdessen. */
background:var(--inp-bg);border:1px solid var(--gl-bdr);box-shadow:0 6px 18px rgba(0,0,0,.16);
color:var(--acc);cursor:pointer;font:inherit;
opacity:0;pointer-events:none;transform:translateY(16px) scale(.92);
transition:transform .28s cubic-bezier(.34,1.56,.64,1),opacity .2s ease;
}
#ai-radial[data-side="l"] .ai-r-item{align-self:flex-start}
#ai-radial[data-side="r"] .ai-r-item{align-self:flex-end}
.ai-r-item.on{opacity:1;pointer-events:auto;transform:none}
/* KEIN Dark-Override fuer .ai-r-item. Es gab hier einmal eine aufgehellte
Fassung (rgba(104,104,116,.78)) — gegen einen zu dunklen Grund, den es seit
der Ruecknahme des Backdrops auf .20 nicht mehr gibt. Auf schwarzem Grund
liest sich die Pille dadurch als helle Kachel; das Glas aus --inp-bg (6 %
Weiss) ist der Zustand, den das Menue im Dunkelmodus haben soll. Die hellen
Themes sind davon nicht betroffen — sie kommen ueber dieselbe Basisregel und
ihren eigenen --inp-bg-Wert. */
.ai-r-lbl{
white-space:nowrap;font-size:13.5px;font-weight:700;color:var(--text);
}
/* KONTINGENT-KOPF über dem KI-Menü: zeigt beim Aufklappen sofort, wie viele
Anfragen der Monat noch hergibt. Liegt als letztes DOM-Kind im
column-reverse-Stapel, sitzt also ganz oben über den Aktions-Pillen. */
.ai-r-quota{
flex-direction:column;align-items:stretch;gap:7px;height:auto;min-width:196px;
padding:10px 14px 11px;border-radius:18px;cursor:default;
border-color:rgba(var(--acc-rgb),.30);
}
.ai-r-quota:active{transform:none}
.ai-r-q-top{display:flex;align-items:center;gap:7px}
.ai-r-q-lbl{font-size:10.5px;font-weight:900;letter-spacing:.85px;text-transform:uppercase;color:var(--acc)}
.ai-r-q-val{margin-left:auto;font-size:14px;font-weight:900;color:var(--text);font-variant-numeric:tabular-nums;letter-spacing:-.2px}
.ai-r-q-val i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--text2)}
.ai-r-q-bar{height:5px;border-radius:3px;background:rgba(127,127,127,.18);overflow:hidden}
.ai-r-q-fill{
height:100%;border-radius:3px;width:0;
background:linear-gradient(90deg,rgba(var(--acc-rgb),.5),var(--acc));
transition:width .65s cubic-bezier(.25,.9,.3,1);
}
.ai-r-quota.low{border-color:rgba(255,159,10,.42)}
.ai-r-quota.low .ai-r-q-fill{background:linear-gradient(90deg,#ff9f0a,#ff453a)}
.ai-r-quota.low .ai-r-q-lbl{color:#ff9f0a}
.ai-r-q-sub{font-size:10.5px;font-weight:700;color:var(--text2);white-space:nowrap}
/* KI-Sheets über Tabbar (1000) + Bubble (1060) — sonst verdecken die schwebenden
Leisten die Sheet-Unterkante und blockieren Taps auf die unteren Buttons
(gleiche Lösung wie #ov-paywall). */
#ov-ai-chat,#ov-ai-analyze,#ov-plan-wizard,#ov-ai-scan,#ov-coach-hub,#ov-coach-setup{z-index:1080}
/* KI-Chat */
#aic-log{display:flex;flex-direction:column;gap:10px;padding:4px 2px;max-height:50vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.aic-msg{max-width:86%;padding:10px 13px;border-radius:16px;font-size:14.5px;line-height:1.5;white-space:pre-wrap;word-break:break-word}
.aic-user{align-self:flex-end;background:var(--acc);color:#fff;border-bottom-right-radius:5px}
.aic-bot{align-self:flex-start;background:var(--inp-bg);border:1px solid var(--gl-bdr);border-bottom-left-radius:5px}
.aic-bot b{font-weight:750}
.aic-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px}
.aic-typing span{width:7px;height:7px;border-radius:50%;background:var(--text2);opacity:.5;animation:aicB 1.2s infinite}
.aic-typing span:nth-child(2){animation-delay:.18s}.aic-typing span:nth-child(3){animation-delay:.36s}
@keyframes aicB{0%,60%,100%{transform:none;opacity:.4}30%{transform:translateY(-4px);opacity:1}}
.aic-inrow{display:flex;gap:8px;align-items:flex-end;padding:10px 2px 2px}
#aic-in{flex:1;background:var(--inp-bg);border:1px solid var(--gl-bdr);border-radius:14px;padding:11px 13px;font-size:15px;
font-family:inherit;color:var(--text);outline:none;resize:none;max-height:110px;line-height:1.4}
.aic-send{width:42px;height:42px;border-radius:13px;border:none;background:var(--acc);color:#fff;cursor:pointer;flex-shrink:0;
display:flex;align-items:center;justify-content:center}
.aic-send:disabled{opacity:.45}
.aic-sugg{display:flex;gap:8px;overflow-x:auto;padding:8px 2px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.aic-sugg::-webkit-scrollbar{display:none}
.aic-sugg button{flex-shrink:0;background:rgba(var(--acc-rgb),.08);border:1px solid rgba(var(--acc-rgb),.2);color:var(--acc);
font-family:inherit;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:11px;cursor:pointer;white-space:nowrap}
.aic-plan-btn{margin-top:4px;background:var(--prem-grad);color:#3a2500;border:none;border-radius:11px;padding:10px 14px;
font-family:inherit;font-size:13px;font-weight:800;cursor:pointer;align-self:flex-start}
/* ═══ COACH-HUB: ein Blatt mit fünf aufklappenden Kacheln ═══
KEIN eigenes Aussehen: Glas, Akzentfarbe (--acc-rgb) und Abstände kommen aus
denselben Bausteinen wie die .aic-*-Regeln darüber. Die Chip-Reihen der
Feinjustierung benutzen bewusst die bestehenden .pwz-chip-Regeln, die
Chat-Vorschau die bestehenden .aic-msg-Blasen — je weniger neue Optik, desto
weniger kann auseinanderlaufen.
Das Hochwertige kommt aus Bewegung, Dichte und echten Zahlen, nicht aus einer
zweiten Designsprache. */
/* Sheet mit FESTER Höhe, und nur #ch-body scrollt. Vorher wuchs das Sheet mit
dem Inhalt: "Woche" ist drei Zeilen lang, "Umfang und Meldungen" füllt zwei
Bildschirme — jeder Wechsel schob die Unterkante und die ganze Fläche sprang.
Feste Höhe + innerer Scroller = kein Sprung mehr. Mit dem Akkordeon gilt das
erst recht: eine aufklappende Kachel darf das Blatt nicht wachsen lassen. */
#ov-coach-hub .sheet{height:min(78vh,var(--sheet-cap));display:flex;flex-direction:column;
overflow:hidden;padding-bottom:0;position:relative}
/* Das Feld liegt UNTER allem im Blatt. Kopf, Griff und Inhalt bekommen dafuer
eine eigene Ebene — ohne die stuende der Canvas als letztes Kind im Fluss
ueber dem Text. */
.ch-wv{position:absolute;inset:0;z-index:0;pointer-events:none}
#ov-coach-hub .sheet>.sh-handle,#ov-coach-hub .sheet>.sh-head,
#ov-coach-hub .sheet>.px{position:relative;z-index:1}
#ov-coach-hub .sheet>.px{flex:1;min-height:0;display:flex;flex-direction:column}
/* #ch-body ist NUR der Scroller. Darin liegen zwei Ebenen übereinander
(.ch-stage): das Raster der fünf Kacheln und die Detailebene. Immer genau
eine davon ist sichtbar — deshalb kann sich beim Öffnen nichts umbauen. */
#ch-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
padding-bottom:calc(100px + var(--sab));display:flex;flex-direction:column}
.ch-stage{flex:1;display:flex;flex-direction:column}
/* Kopf trägt denselben Orb wie die Heute-Karte: der Hub soll sichtbar dasselbe
Objekt sein wie die Karte, die ihn öffnet, und kein fremdes Menü. Der Name
steht groß, darunter klein "dein Coach" — der in Task 8 vergebene Name bliebe
sonst unsichtbar, und "KI-Hub" wäre sachlich falsch: die KI-Werkzeuge wohnen
in der Blase, hier wohnt der Trainingscoach. */
.ch-head{display:flex;align-items:center;gap:9px}
.ch-head h2{margin:0}
.ch-head-t{flex:1;min-width:0}
.ch-head-t i{display:block;font-style:normal;font-size:11.5px;font-weight:650;color:var(--text2);
margin-top:1px;letter-spacing:-.1px}
/* Zurück-Pfeil. Er steht auf dem Platz des Orbs, nicht daneben: der Kopf darf
beim Wechsel zwischen Raster und Detail nicht seine Breite ändern, sonst
rutscht der Coach-Name bei jedem Tipp um 30 px. Das [hidden] braucht die
eigene Regel, weil display:grid das Attribut sonst überstimmt. */
.ch-back{flex:0 0 auto;display:grid;place-items:center;width:30px;height:30px;
padding:0;border:none;background:none;color:var(--acc);cursor:pointer;line-height:0;
transform:rotate(90deg)}
.ch-back[hidden]{display:none}
.ch-back:active{opacity:.55}
/* ── Das Raster der fünf Kacheln ─────────────────────────────────────────
VORHER: die getippte Kachel spannte über beide Spalten auf, alle anderen
rutschten dadurch in andere Spalten, und ein FLIP-Griff musste den Sprung
nachträglich weichzeichnen. Dazu sprang der Kachelkopf von Spalten- auf
Zeilenlayout (flex-direction ist nicht übergangsfähig) und 300 ms später
scrollte das Blatt nach. Drei Bewegungen übereinander — das war das
"Verdrängen".
JETZT: das Raster steht still. Es ist ein Menü, kein Akkordeon. Ein Tipp
zoomt aus der Kachel in ihre Detailebene (eine Kurve, 300 ms), der
Zurück-Pfeil im Kopf zoomt zurück. Nichts rückt nach, weil nie zwei Zustände
im selben Fluss liegen.
Aufbau der Kachel — VIER Zeilen, von oben nach unten immer leiser:
Symbol im getönten Feld, Titel im Klartext, Sinnzeile ("Frag alles zu deinem
Training"), unten die Kennzahl als Chip. Der Winkel oben rechts sagt, dass es
weitergeht.
Der Zahlenblock davor (Großbuchstaben-Label, Trennlinie, großer Wert) war
sauber, aber stumm: "GESPRÄCH / noch kein Gespräch" ist Kategorie plus
Wiederholung und verrät nicht, was ein Tipp bewirkt. Genau das war der
Befund — "viel zu schlicht, gar nicht intuitiv".
Die Akzentfarbe trägt das Symbolfeld und den Chip; der Titel bleibt in der
Textfarbe, sonst leuchtet die Kachel überall und betont nichts. */
/* Das Raster fuellt die Blatthoehe: bei nur drei Reihen lief die untere Haelfte
sonst schwarz aus und das Blatt sah unfertig aus. Die Reihen teilen sich den
Platz, unterschreiten aber nie die Mindesthoehe. */
.ch-stage{position:relative}
/* Drei Zeilen, und die erste zaehlt NICHT mit: das Gespraech ist eine liegende
Kachel und so hoch wie sein Inhalt (auto). Mit "1fr" fuer alle Zeilen bekam es
ein Drittel der Blatthoehe und stand als 330 px hoher Block ueber vier flachen
Kacheln. Die beiden Rasterzeilen darunter teilen sich den Rest. */
.ch-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:stretch;
flex:1;grid-template-rows:auto minmax(124px,1fr) minmax(124px,1fr)}
/* Gespräch steht über die volle Breite und liegend: großes Symbol, Titel,
Sinnzeile, Chip. Fünf Kacheln in zwei Spalten lassen eine allein — und das
soll die sein, die man tatsächlich benutzt, nicht die letzte, die zufällig
übrig bleibt. Es ist zugleich die einzige Fläche mit getöntem Grund: sie ist
die Hauptaktion des Blattes und darf das zeigen. */
.ch-tile.hero{grid-column:1 / -1}
.ch-tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;
min-height:124px;box-sizing:border-box;margin:0;padding:13px 13px 12px;
border-radius:18px;background:var(--gl-bg-t);border:1px solid var(--gl-bdr);
color:var(--text);font-family:inherit;text-align:left;cursor:pointer;overflow:hidden;
transition:transform .16s cubic-bezier(.22,.61,.36,1),background .16s linear,border-color .16s linear;
/* Gestaffelte Einblendung, 55 ms je Kachel: das Raster baut sich sichtbar auf
und liest sich dadurch als Menü mit fünf Wahlmöglichkeiten statt als Fläche.
Fill-mode BACKWARDS, nicht both — bei "both" bliebe der Endzustand
(transform:none) als Animationswert stehen und schluckte den Druckzustand
(:active scale) für immer. */
animation:chTileIn .42s cubic-bezier(.22,.9,.3,1) backwards;
animation-delay:calc(var(--i,0) * 55ms)}
@keyframes chTileIn{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
.ch-tile.hero{min-height:0;display:grid;grid-template-columns:auto 1fr auto;
align-items:center;column-gap:12px;padding:14px 13px;
background:linear-gradient(135deg,rgba(var(--acc-rgb),.15),rgba(var(--acc-rgb),.05));
border-color:rgba(var(--acc-rgb),.30)}
.ch-tile.hero .ch-tile-ic{grid-column:1;grid-row:1 / 4;width:44px;height:44px;border-radius:15px}
.ch-tile.hero .ch-tile-go{position:static;grid-column:3;grid-row:1 / 4}
.ch-tile.hero .ch-tile-h{grid-column:2;grid-row:1;margin-top:0;font-size:16px}
.ch-tile.hero .ch-tile-s{grid-column:2;grid-row:2}
.ch-tile.hero .ch-tile-m{grid-column:2;grid-row:3;margin-top:7px;justify-self:start}
.ch-tile:active{transform:scale(.972);background:rgba(127,127,127,.07)}
.ch-tile.hero:active{background:linear-gradient(135deg,rgba(var(--acc-rgb),.22),rgba(var(--acc-rgb),.09))}
/* Haarlinie oben — derselbe Baustein wie .ch-jrn::after und .ch-preset::after. */
.ch-tile::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent)}
/* Das Symbolfeld ist der Anker der Kachel: gleiche Größe, gleiche Position in
allen vier kleinen Kacheln, damit das Raster eine Achse hat. Beim Druck geht
es kurz zusammen — die Kachel antwortet dann sichtbar am Symbol, nicht nur
als Ganzes. */
.ch-tile-ic{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;flex-shrink:0;
color:var(--acc);background:rgba(var(--acc-rgb),.13);border:1px solid rgba(var(--acc-rgb),.22);
line-height:0;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}
.ch-tile:active .ch-tile-ic{transform:scale(.88)}
/* Der Winkel ist die Zusage "hier geht es weiter". Ohne ihn sah die Kachel aus
wie eine Anzeige und nicht wie ein Weg. */
.ch-tile-go{position:absolute;top:16px;right:12px;display:grid;place-items:center;line-height:0;
color:var(--text2);opacity:.45;transition:transform .2s ease,opacity .2s ease}
.ch-tile:active .ch-tile-go{transform:translateX(3px);opacity:.85}
.ch-tile-h{margin-top:11px;font-size:14.5px;font-weight:850;letter-spacing:-.3px;
line-height:1.2;color:var(--text)}
/* Zwei Zeilen, dann Schluss: "Frag alles zu deinem Training" passt, alles
Längere würde die Kennzahl aus der Kachel drücken. */
.ch-tile-s{margin-top:3px;font-size:11.4px;font-weight:600;line-height:1.32;color:var(--text2);
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Die Kennzahl sitzt unten und trägt die Akzentfarbe — sie ist der einzige
Wert, den man sonst nirgends an einer Stelle sieht. margin-top:auto klebt sie
an die Unterkante, damit die Chips aller Kacheln auf einer Linie liegen.
Sätze statt Zahlen ("noch kein Gespräch") sind kein Wert, sondern ein
Zustand: sie stehen grau, nicht im Akzent. */
.ch-tile-m{margin-top:auto;max-width:100%;box-sizing:border-box;
display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;
font-size:11px;font-weight:800;letter-spacing:-.1px;line-height:1.35;
color:var(--acc);background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.22);
font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ch-tile-m.lang{color:var(--text2);background:rgba(127,127,127,.10);
border-color:var(--gl-bdr);font-weight:700}
/* ── Die Detailebene ─────────────────────────────────────────────────────
Genau EIN Panel liegt im DOM. Vorher standen alle fünf Inhalte gleichzeitig
da (nur einer sichtbar), weil das Akkordeon sie im Layout brauchte; mit der
Zoom-Ebene ist das unnötig — und die Wochendiagramme entstehen ohnehin nur
für die offene Kachel. Der Titel der Kachel steht im Blattkopf, deshalb hat
das Panel keine eigene Kopfzeile mehr. */
.ch-panel{position:relative;border-radius:15px;overflow:hidden;
background:var(--gl-bg-t);border:1px solid var(--gl-bdr)}
.ch-panel::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent)}
.ch-panel>.ch-in{padding:13px 14px 14px}
.ch-panel .ch-sec:first-child{margin-top:2px}
/* ── Der Wechsel: eine Bewegung, zwei Ebenen ─────────────────────────────
Die abgehende Ebene liegt währenddessen ABSOLUT über der Bühne (.ch-lift),
sonst schöbe sie die ankommende nach unten und der Sprung wäre zurück.
Der Ursprung beider Skalierungen ist die Mitte der GETIPPTEN Kachel (JS setzt
transform-origin) — dadurch wächst das Detail sichtbar aus ihr heraus,
statt aus dem Bildmittelpunkt.
Beim Hinein fliegt das Raster nach vorn an der Kamera vorbei (.ch-zout) und
das Detail kommt von hinten (.ch-zin); beim Zurück genau umgekehrt. */
.ch-grid,.ch-pane{transform-origin:50% 32%;
transition:opacity .18s linear,transform .3s cubic-bezier(.22,.61,.36,1)}
.ch-stage[data-v="grid"] .ch-pane{display:none}
.ch-stage[data-v="det"] .ch-grid{display:none}
/* Während des Wechsels sind BEIDE Ebenen da. Gleiche Spezifität wie die beiden
Regeln darüber, steht deshalb bewusst danach. */
.ch-stage.x .ch-grid{display:grid}
.ch-stage.x .ch-pane{display:block}
.ch-stage.x .ch-lift{position:absolute;left:0;right:0;top:0;pointer-events:none}
.ch-zin{opacity:0;transform:scale(.93)}
.ch-zout{opacity:0;transform:scale(1.06)}
/* KEINE zweite Bewegung im Inneren. Eine Staffelung der Zeilen lief hier
zusaetzlich zum Zoom und sah aus, als wuerde sich beim Oeffnen "alles kurz
aktualisieren" — zwei Bewegungen auf derselben Flaeche liest niemand als
eine. Der Zoom traegt den Wechsel allein. Aus demselben Grund staffeln auch
die Kacheln des Rasters nicht mehr. */
/* Alle Übergänge auf 0 ms — der Zoom entfällt dann ganz (s. _chZoom). */
@media (prefers-reduced-motion:reduce){
.ch-grid,.ch-pane,.ch-tile{transition-duration:0s!important;transition-delay:0s!important}
/* Auch die gestaffelte Einblendung faellt weg — sonst blieben die Kacheln
waehrend ihrer Verzoegerung unsichtbar (fill-mode backwards). */
.ch-tile{animation:none!important}
}
/* ── Wochenkachel: Kennzahlen, Diagramme, Kraftziel ──────────────────────
Die Zahlenkacheln nehmen bewusst die bestehenden .aia-stat-Regeln der
KI-Analyse: dieselbe Bedienabsicht ("drei Zahlen nebeneinander") muss in der
App gleich aussehen (Gestaltungsregel 7). Neu ist hier nur die Zeile mit
Pfeil und Prozent — die gab es an der Stelle noch nicht.
Kein backdrop-filter am Diagrammkasten: die Kachel trägt ihr Glas schon, ein
zweites darüber ergäbe eine trübe Fläche (und WKWebView rendert
overflow:hidden + backdrop-filter als dunklen Block). */
.chw-d{font-size:10.5px;font-weight:800;letter-spacing:-.1px;margin-top:3px;color:var(--text2)}
.chw-d.up{color:var(--acc)}
.chw-box{position:relative;height:150px;margin:2px 0 6px}
#chw-1rm .chw-box{height:172px}
.chw-unit{flex-shrink:0;font-size:12.5px;font-weight:800;color:var(--text2)}
/* Die Übungsauswahl des Kraftziels kann lang werden — sie rollt waagerecht,
statt fünf Zeilen Chips aufzubauen. Gleiche Rollmechanik wie .aic-sugg. */
.chw-pick{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.chw-pick::-webkit-scrollbar{display:none}
.chw-pick .pwz-chip{flex-shrink:0}
/* ── Ton-Regler mit vier Rastpunkten ─────────────────────────────────────
Der Ton hat im Modul genau vier Werte. Zwei Achsen als Kreuz würden eine
Zwischenstufe suggerieren, die es nicht gibt; vier Karten untereinander
waren vier Absätze für eine einzige Entscheidung.
Bausteine: --acc für die gefüllte Strecke und den Griff, --inp-bg und
--gl-bdr für die Bahn — dieselben Token wie bei .pwz-chip und .ch-preset. */
.cts{position:relative;height:44px;margin:4px 0 2px;cursor:pointer;touch-action:none;
-webkit-tap-highlight-color:transparent}
.cts:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:12px}
.cts-track{position:absolute;left:11px;right:11px;top:50%;height:4px;margin-top:-2px;border-radius:2px;
background:var(--inp-bg);border:1px solid var(--gl-bdr);box-sizing:border-box}
.cts-fill{position:absolute;left:0;top:0;bottom:0;border-radius:2px;background:var(--acc)}
.cts-dots{position:absolute;left:11px;right:11px;top:50%;height:0}
.cts-dot{position:absolute;top:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;
background:var(--gl-bdr)}
.cts-dot.on{background:var(--acc)}
.cts-knob{position:absolute;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;
background:var(--acc);box-shadow:0 3px 10px rgba(var(--acc-rgb),.45);
transition:left .18s cubic-bezier(.22,.61,.36,1)}
.cts.drag .cts-knob{transition:none}
.cts.drag .cts-fill{transition:none}
.cts-fill{transition:width .18s cubic-bezier(.22,.61,.36,1)}
/* Die vier Namen stehen unter ihren Rastpunkten — ohne sie wäre der Regler
eine Skala ohne Einheit. */
.cts-lbls{display:flex;justify-content:space-between;margin:0 2px 8px}
.cts-lbls span{font-size:11px;font-weight:700;color:var(--text2);letter-spacing:-.1px}
.cts-lbls span.on{color:var(--acc);font-weight:800}
/* Der Beispielsatz: dieselbe Sprechblase wie die frühere Tonkarte
(.ch-preset.ch-voice span) — der Text IST gesprochene Rede. */
#ch-tone-say{display:block;margin:0 0 4px;padding:9px 12px;border-radius:12px;border-bottom-left-radius:5px;
background:var(--inp-bg);border:1px solid var(--gl-bdr);color:var(--text);
font-size:12.5px;font-weight:650;line-height:1.45}
#ch-tone-say.ghost{background:rgba(127,127,127,.06);color:var(--text2);font-weight:600}
@media (prefers-reduced-motion:reduce){
.cts-knob,.cts-fill{transition-duration:0s!important}
}
/* Abschnittstitel in der Skala der App (.row-title) statt als graues
Uppercase-Label. Acht graue Kapitälchen-Zeilen hintereinander waren der
Grund, warum der Hub wie eine generische Einstellungsliste aussah. */
.ch-sec{font-size:14px;font-weight:750;letter-spacing:-.2px;color:var(--text);margin:20px 0 9px}
.ch-sec:first-child{margin-top:4px}
.ch-sec i{display:block;font-style:normal;font-size:12px;font-weight:600;color:var(--text2);margin-top:3px;line-height:1.45}
.ch-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:2px 0 8px}
.ch-row>span{flex:1;min-width:0;font-size:13.5px;font-weight:700;line-height:1.35}
.ch-row>span i{display:block;font-style:normal;font-size:11.5px;font-weight:600;color:var(--text2);margin-top:2px;line-height:1.4}
/* 1px Lichtkante oben — derselbe Baustein wie .aic::after, keine neue Optik. */
.ch-jrn{position:relative;display:flex;align-items:flex-start;gap:10px;padding:11px 13px;margin-bottom:7px;
border-radius:13px;background:var(--gl-bg-t);border:1px solid var(--gl-bdr);overflow:hidden}
.ch-jrn::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent)}
.ch-jrn>span{flex:1;min-width:0;font-size:13.5px;font-weight:650;line-height:1.42;word-break:break-word}
.ch-jrn>span i{display:block;font-style:normal;font-size:11px;font-weight:700;color:var(--text2);margin-top:3px;line-height:1.4}
.ch-jrn.ghost{background:rgba(127,127,127,.06)}
.ch-jrn.ghost::after{display:none}
.ch-jrn.ghost>span{color:var(--text2);font-weight:600}
/* Der Löschknopf hatte 3px Polster — weit unter der Mindest-Tippfläche von
44pt. Sichtbar bleibt der kleine Kreis, die Trefferfläche wächst per ::after. */
.ch-jrn button{position:relative;display:grid;place-items:center;width:30px;height:30px;margin:-2px -4px 0 0;
background:rgba(127,127,127,.10);border:none;border-radius:50%;color:var(--text2);font-size:13px;line-height:1;
cursor:pointer;flex-shrink:0;transition:background-color .14s,color .14s}
.ch-jrn button::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:44px;transform:translate(-50%,-50%)}
.ch-jrn button:active{background:rgba(255,69,58,.16);color:#ff453a}
/* Akzent-Leiste im aktiven Zustand: der Zustand ist auf einen Blick lesbar,
ohne dass Farbe ihn allein tragen muss. */
.ch-preset{position:relative;display:block;width:100%;box-sizing:border-box;text-align:left;
margin-bottom:8px;padding:12px 14px 13px;border-radius:15px;overflow:hidden;cursor:pointer;
background:var(--inp-bg);border:1px solid var(--gl-bdr);color:var(--text);font-family:inherit;
transition:background-color .15s,border-color .15s,transform .13s}
.ch-preset::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);
opacity:0;transition:opacity .15s}
.ch-preset::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent)}
.ch-preset:active{transform:scale(.99)}
.ch-preset b{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.2px}
.ch-preset span{display:block;font-size:12.5px;font-weight:600;color:var(--text2);margin-top:4px;line-height:1.45}
/* Nur die Ton-Karten: ihr Text IST gesprochene Rede, also als Sprechblase in
den Formen der bestehenden .aic-bot-Blase — man liest "so redet sie",
nicht "hier steht eine Beschreibung". Bausteine deshalb von dort: --inp-bg
plus 1px --gl-bdr und die abgeknickte untere linke Ecke. Vorher stand hier ein
eigenes rgba(127,127,127,.10) — zwei Regelsätze für dieselbe Coach-Äußerung,
die bei jeder Token-Änderung auseinanderlaufen. Der Rahmen trägt die Trennung
von der Karte, die dieselbe Füllung hat. */
.ch-preset.ch-voice span{margin-top:8px;padding:8px 11px;border-radius:12px;border-bottom-left-radius:5px;
background:var(--inp-bg);border:1px solid var(--gl-bdr);color:var(--text);font-weight:650}
.ch-preset.on{border-color:rgba(var(--acc-rgb),.55);background:rgba(var(--acc-rgb),.09)}
.ch-preset.on::before{opacity:1}
.ch-preset.on b{color:var(--acc)}
.ch-preset.ch-voice.on span{background:rgba(var(--acc-rgb),.13)}
.ch-preset:disabled{opacity:.6;cursor:default}
/* Das zweite Beispiel (im gewählten Ton, mit Namen) war als fünfter Kasten
unter vier Sprechblasen sichtbar zu viel. Es bleibt inhaltlich, verliert aber
den Kastenrahmen und liegt als leise Bildunterschrift darunter. */
/* #cst-tone-ex ist derselbe Beispielsatz in der Einrichtung (Task 10) — dieselbe
Sache, deshalb dieselbe Regel. Eigene Id nur, weil beide Overlays gleichzeitig
im DOM stehen und ihren letzten Inhalt behalten. Prefix cst- statt cs-: die
Ids cs-title/cs-name/cs-body gehoeren dem Eigener-Split-Editor. */
#ch-tone-ex,#cst-tone-ex{background:none;border:none;padding:2px 3px 0;margin:-2px 0 4px}
#ch-tone-ex::after,#cst-tone-ex::after{display:none}
#ch-tone-ex>span,#cst-tone-ex>span{font-size:11.5px;font-weight:600;color:var(--text2)}
#ch-tone-ex>span i,#cst-tone-ex>span i{color:var(--text);font-weight:650;font-size:12px;margin-top:3px}
/* Die primäre Aktion muss ohne Scrollen erreichbar sein. Gemessen bei 390×844:
Schritt 1 ist 936 px hoch, sichtbar sind 775 px — "Weiter" endete bei 879 px,
also 35 px unter dem Rand. Sichtbar blieben Name, die vier Töne und das ✕; wer
vorwärts will, findet dann nur das ✕, und das setzt 'balanced' — genau das
Ergebnis, das diese Task verhindern soll. Klebende Fußleiste statt fester
Sheet-Höhe: das Sheet bleibt inhaltsgroß (Schritt 2 ist nur 433 px hoch und
stünde sonst in halb leerer Glasfläche), die Leiste steht in jedem Schritt und
trägt auch die Stimmenliste aus Block 2. Dasselbe Mittel wie beim klebenden
.sh-handle oben. Die 100 px Bodenpolster des Sheets entfallen hier: sie halten
Platz für die schwebende Tableiste, die unter diesem Sheet (z 1080 über z 1000)
ohnehin verdeckt ist — die Fußleiste bringt ihren Sicherheitsabstand selbst. */
#ov-coach-setup .sheet{padding-bottom:0}
#cst-nav{position:sticky;bottom:0;z-index:6;margin:0 -20px;
padding:10px 20px calc(14px + var(--sab));
background:var(--gl-bg-h);
backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat));
-webkit-backdrop-filter:blur(var(--gl-blur-lg)) saturate(var(--gl-sat));
border-top:1px solid var(--gl-bdr)}
#cst-nav .pwz-nav{margin-top:0}
#ch-body details{margin-top:20px;border-top:1px solid var(--sep);padding-top:12px}
#ch-body summary{font-size:13.5px;font-weight:800;color:var(--acc);cursor:pointer;list-style:none;padding:7px 0}
#ch-body summary::-webkit-details-marker{display:none}
/* KI-Analyse */
.aia-score-wrap{display:flex;align-items:center;gap:16px;padding:12px;
background:var(--gl-bg-t);border:1px solid var(--gl-bdr);border-radius:16px}
.aia-ring{width:86px;height:86px;flex-shrink:0;position:relative}
.aia-ring svg{transform:rotate(-90deg)}
.aia-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:800}
.aia-sec{margin-top:16px}
.aia-sec-t{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:8px}
.aia-item{display:flex;gap:10px;padding:7px 2px;font-size:14px;line-height:1.5;align-items:flex-start}
.aia-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);margin-top:7px;flex-shrink:0}
/* KI-Analyse: Daten-Kacheln + Mini-Charts (lokal berechnet, sofort sichtbar) */
.aia-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}
/* Die Zahlenkacheln bekommen denselben haarfeinen Akzent-Innenrand wie die
uebrigen Neon-Kacheln der App — kein Schein nach aussen, sonst konkurrieren
drei leuchtende Kaesten mit den Balken darunter, die den eigentlichen Wert
tragen. */
.aia-stat{background:var(--gl-bg-t);border:1px solid var(--gl-bdr);border-radius:14px;padding:10px 8px;text-align:center;
box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.14),var(--neon-edge)}
.aia-stat-v{font-size:17px;font-weight:800;letter-spacing:-.3px}
.aia-stat-v small{font-size:11px;font-weight:700;color:var(--text2)}
.aia-stat-l{font-size:10.5px;font-weight:700;color:var(--text2);margin-top:2px;line-height:1.25}
.aia-bars{display:flex;align-items:flex-end;gap:5px;height:64px;padding:4px 2px 0}
.aia-bar{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
/* Die Balken des KI-Menues (Trainingsanalyse, Workout optimieren, Fortschritt
analysieren) sprechen bis hierher eine andere Sprache als der Rest der App:
flache Flaechen neben leuchtenden Ringen, Segmentreihen und Kurven. Der
Schein kommt deshalb aus DERSELBEN zentralen Staffel (--gw-*, --gwa-*) wie
ueberall — keine eigenen Radien, keine eigenen Deckkraften, sonst laufen die
beiden Fassungen beim naechsten Feinschliff auseinander.
Die zurueckgenommenen Balken (die frueheren Wochen) bekommen KEINEN Schein.
Leuchten alle gleich, ist der Unterschied zwischen "diese Woche" und "war
mal" wieder weg — und der ist die ganze Aussage des Bildes. */
.aia-bar i{display:block;width:100%;max-width:26px;border-radius:6px 6px 3px 3px;background:rgba(var(--acc-rgb),.32);min-height:3px;
transition:height .5s cubic-bezier(.2,.8,.3,1)}
.aia-bar.hi i{background:var(--acc);
box-shadow:0 0 var(--gw-1) rgba(var(--acc-rgb),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--acc-rgb),var(--gwa-2)),
0 0 var(--gw-3) rgba(var(--acc-rgb),var(--gwa-3)),
var(--neon-edge),
inset 0 1px 3px rgba(255,255,255,var(--ng-hi))}
.aia-bar b{font-size:9px;font-weight:700;color:var(--text2);white-space:nowrap}
.aia-hrow{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:12.5px}
.aia-hrow-l{width:74px;flex-shrink:0;font-weight:700;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* position:relative trägt die Richtwert-Markierung () in _aiaBarsHTML */
.aia-hrow-bar{position:relative;flex:1;height:8px;border-radius:5px;background:var(--inp-bg);overflow:hidden}
/* Dieselbe Staffel fuer die liegenden Balken. --sig-rgb traegt die Farbe: die
Volumen-Zeilen setzen sie auf ihre Ampelfarbe, alle anderen erben den
Akzent. Ein fest auf --acc verdrahteter Schein liesse eine Warnzeile in
Akzentblau leuchten und wuerde damit dem widersprechen, was der Balken
sagt. */
.aia-hrow-fill{height:100%;border-radius:5px;background:var(--acc);
transition:width .5s cubic-bezier(.2,.8,.3,1);
box-shadow:0 0 var(--gw-1) rgba(var(--sig-rgb,var(--acc-rgb)),var(--gwa-1)),
0 0 var(--gw-2) rgba(var(--sig-rgb,var(--acc-rgb)),var(--gwa-2)),
0 0 var(--gw-3) rgba(var(--sig-rgb,var(--acc-rgb)),var(--gwa-3)),
var(--neon-edge),
inset 0 1px 3px rgba(255,255,255,var(--ng-hi))}
.aia-hrow-v{width:52px;flex-shrink:0;text-align:right;font-weight:700}
.aia-act{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:14px;margin-top:8px;
background:var(--gl-bg-t);border:1px solid var(--gl-bdr)}
.aia-act-t{font-size:14px;font-weight:700;line-height:1.35}
.aia-act-s{font-size:12px;color:var(--text2);margin-top:2px;line-height:1.4}
/* ═══ TRAININGSPLAN-WIZARD ═══ */
.pwz-dots{display:flex;justify-content:center;gap:6px;margin:2px 0 14px}
.pwz-dot{width:7px;height:7px;border-radius:50%;background:var(--inp-bg);border:1px solid var(--gl-bdr);transition:background .2s,transform .2s}
.pwz-dot.on{background:var(--acc);border-color:var(--acc);transform:scale(1.25)}
.pwz-q{font-size:19px;font-weight:800;letter-spacing:-.3px;text-align:center;margin:2px 0 4px}
.pwz-s{font-size:13px;color:var(--text2);text-align:center;line-height:1.5;margin-bottom:14px}
.pwz-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.pwz-chip{border:1.5px solid var(--gl-bdr);background:var(--inp-bg);color:var(--text);border-radius:13px;
padding:11px 16px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;transition:transform .15s,background-color .15s,background .15s,color .15s,border-color .15s,box-shadow .15s,opacity .15s}
.pwz-chip.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.10);color:var(--acc)}
.pwz-ta{width:100%;box-sizing:border-box;margin-top:10px;background:var(--inp-bg);border:1px solid var(--gl-bdr);border-radius:14px;
padding:12px 14px;font-size:15px;font-family:inherit;color:var(--text);outline:none;resize:none;min-height:64px;line-height:1.45}
.pwz-nav{display:flex;gap:10px;margin-top:18px}
/* ═══ IN-APP-KAMERA: RAHMEN-OVERLAY (Scanner + Workout-Snap) ═══ */
.gtcam-frame{position:absolute;inset:36px 26px 86px;pointer-events:none;z-index:3}
.gtcam-frame i{position:absolute;width:36px;height:36px;border:3px solid rgba(255,255,255,.92);
filter:drop-shadow(0 1px 6px rgba(0,0,0,.45))}
.gtcam-frame i:nth-child(1){top:0;left:0;border-right:none;border-bottom:none;border-top-left-radius:15px}
.gtcam-frame i:nth-child(2){top:0;right:0;border-left:none;border-bottom:none;border-top-right-radius:15px}
.gtcam-frame i:nth-child(3){bottom:0;left:0;border-right:none;border-top:none;border-bottom-left-radius:15px}
.gtcam-frame i:nth-child(4){bottom:0;right:0;border-left:none;border-top:none;border-bottom-right-radius:15px}
.gtcam-hint{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:3;white-space:nowrap;
font-size:11.5px;font-weight:800;color:#fff;background:rgba(0,0,0,.45);padding:5px 12px;border-radius:10px;
backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.scn-cam{position:relative;border-radius:20px;overflow:hidden;background:#000;aspect-ratio:3/4}
.scn-cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.scn-cam-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;justify-content:space-between;
padding:14px 20px;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
/* ═══ GERÄTE-SCANNER ═══ */
.scn-drop{border:2px dashed rgba(var(--acc-rgb),.4);border-radius:20px;padding:30px 16px;text-align:center;cursor:pointer;
background:rgba(var(--acc-rgb),.05)}
.scn-drop-t{font-size:15.5px;font-weight:800;margin-top:10px}
.scn-drop-s{font-size:12.5px;color:var(--text2);margin-top:4px;line-height:1.5}
.scn-preview{width:100%;max-height:230px;object-fit:cover;border-radius:16px;display:block}
.scn-device{display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;margin-top:12px;
background:var(--gl-bg-t);border:1px solid var(--gl-bdr)}
.scn-device-ico{width:40px;height:40px;border-radius:13px;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:rgba(var(--acc-rgb),.10);border:1px solid rgba(var(--acc-rgb),.2);color:var(--acc)}
.scn-device-t{font-size:16px;font-weight:800}
.scn-device-s{font-size:12px;color:var(--text2);margin-top:1px}
.scn-mg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.scn-mg span{font-size:11.5px;font-weight:800;color:var(--acc);background:rgba(var(--acc-rgb),.09);
border:1px solid rgba(var(--acc-rgb),.2);border-radius:9px;padding:4px 10px}
.scn-anim{position:relative;width:100%;border-radius:16px;overflow:hidden;background:#fff;margin-top:12px}
.scn-anim img{width:100%;display:block;aspect-ratio:4/3;object-fit:contain}
.scn-anim-tag{position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:800;color:#fff;
background:rgba(0,0,0,.55);border-radius:8px;padding:3px 8px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.scn-ex{padding:11px 12px;border-radius:14px;margin-top:8px;background:var(--gl-bg-t);border:1px solid var(--gl-bdr);cursor:pointer;
display:flex;align-items:center;gap:10px}
.scn-ex.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.07)}
.scn-ex-t{font-size:14.5px;font-weight:700;flex:1;min-width:0}
.scn-ex-s{font-size:12px;color:var(--text2);margin-top:1px;line-height:1.4}
.scn-step{display:flex;gap:10px;padding:6px 2px;font-size:13.5px;line-height:1.5;align-items:flex-start}
.scn-step-n{width:20px;height:20px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:rgba(var(--acc-rgb),.12);color:var(--acc);font-size:11px;font-weight:800;margin-top:1px}
/* ═══ KI-CHAT: DIKTIER-BUTTON ═══ */
.aic-mic{width:42px;height:42px;border-radius:13px;border:1px solid var(--gl-bdr);background:var(--inp-bg);color:var(--text2);
cursor:pointer;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.aic-mic.rec{border-color:#ff453a;color:#ff453a;background:rgba(255,69,58,.08);animation:micPulse 1.1s ease-in-out infinite}
@keyframes micPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,69,58,.35)}50%{box-shadow:0 0 0 7px rgba(255,69,58,0)}}
/* ═══ PROFIL-EDITOR: KOPFZEILE · MASSBAND · CHIPS ═══
Aufbau bewusst wie eine Visitenkarte: Foto links, Daten rechts. Darunter
Sektionen mit je einer Karte — keine mittigen Blöcke, keine Slider-Optik. */
.pf-sec{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin:20px 0 8px}
.pf-chips{display:flex;flex-wrap:wrap;gap:7px}
.pf-chip{border:1.5px solid var(--gl-bdr);background:var(--inp-bg);color:var(--text);border-radius:11px;
padding:8px 13px;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:transform .15s,background-color .15s,background .15s,color .15s,border-color .15s,box-shadow .15s,opacity .15s}
.pf-chip.on{border-color:var(--acc);background:rgba(var(--acc-rgb),.10);color:var(--acc)}
.pf-chip:active{transform:scale(.94)}
.pf-count{font-size:11px;color:var(--text2);text-align:right;margin-top:4px}
/* Kopfzeile: Foto links, Felder rechts */
/* Foto und Feldstapel teilen sich EINE Mittellinie — vorher hing das Foto oben
und die beiden Felder rechts standen tiefer, das wirkte schief. */
.pf-head{display:flex;gap:14px;align-items:center;margin:2px 0 4px}
.pf-photo-col{display:flex;flex-direction:column;align-items:center;flex-shrink:0}
.pf-photo{position:relative;width:104px;height:104px;flex-shrink:0;border-radius:28px;overflow:hidden;cursor:pointer;
background:rgba(var(--acc-rgb),.15);color:var(--acc);border:1px solid var(--gl-bdr);
display:flex;align-items:center;justify-content:center;font-size:35px;font-weight:800;letter-spacing:-.5px;
transition:transform .18s var(--spring)}
.pf-photo:active{transform:scale(.96)}
.pf-photo img{width:100%;height:100%;object-fit:cover;display:block}
.pf-cam{position:absolute;right:5px;bottom:5px;width:27px;height:27px;border-radius:50%;background:var(--acc);color:#fff;
display:flex;align-items:center;justify-content:center;box-shadow:0 2px 9px rgba(0,0,0,.35);pointer-events:none}
.pf-cam svg{width:14px;height:14px}
.pf-fields{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.pf-lbl{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--text2);
margin:0 0 5px 2px;line-height:1.1}
/* Beide Felder exakt gleich hoch — der Stapel bleibt dadurch ein sauberes Raster */
.pf-inp{width:100%;box-sizing:border-box;height:46px;padding:0 13px;border-radius:13px;border:1px solid var(--gl-bdr);
background:var(--inp-bg);color:var(--text);font-size:15.5px;font-weight:600;font-family:inherit;
-webkit-appearance:none;appearance:none}
.pf-inp:focus{outline:none;border-color:rgba(var(--acc-rgb),.65)}
.pf-inp[type=date]{line-height:46px;padding-right:8px}
textarea.pf-inp{height:auto;padding:12px 13px}
.pf-datewrap{display:flex;gap:8px;align-items:center}
.pf-age{display:inline-flex;align-items:center;height:46px;padding:0 13px;border-radius:13px;flex-shrink:0;
background:rgba(var(--acc-rgb),.10);color:var(--acc);font-size:13px;font-weight:800;white-space:nowrap}
.pf-photo-rm{background:none;border:none;color:#ff453a;font-family:inherit;font-size:12px;font-weight:700;
padding:8px 0 0;cursor:pointer;width:104px;text-align:center}
/* Maßband für die Trainingserfahrung — viele Striche, rastet an jedem ein */
.pf-ruler{position:relative;background:var(--gl-bg-t);border:1px solid var(--gl-bdr);border-radius:18px;padding:14px 0 8px;overflow:hidden}
.pf-ruler-val{text-align:center;font-size:20px;font-weight:800;color:var(--text);letter-spacing:-.4px}
.pf-ruler-val.bump{animation:pfValBump .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes pfValBump{0%{transform:scale(1)}45%{transform:scale(1.09)}100%{transform:scale(1)}}
.pf-ruler-sub{text-align:center;font-size:11.5px;font-weight:800;color:var(--acc);margin-top:3px;text-transform:uppercase;letter-spacing:.7px}
.pf-ruler-scroll{margin-top:12px;overflow-x:scroll;overflow-y:hidden;scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
.pf-ruler-scroll::-webkit-scrollbar{display:none}
.pf-ruler-strip{display:flex;align-items:flex-start;height:54px}
.pf-ruler-pad{flex:0 0 calc(50% - 7px)}
.pf-tick{flex:0 0 14px;height:54px;position:relative;display:flex;flex-direction:column;align-items:center;scroll-snap-align:center}
.pf-tick i{display:block;width:2px;height:13px;border-radius:1px;background:var(--text2);opacity:.26;transition:height .18s var(--ease),opacity .18s,background-color .18s}
.pf-tick.maj i{height:25px;opacity:.42}
.pf-tick.on i{background:var(--acc);opacity:.9}
.pf-tick.cur i{height:32px;opacity:1}
.pf-tick b{position:absolute;bottom:2px;font-size:9.5px;font-weight:800;color:var(--text2);letter-spacing:.2px}
.pf-tick.on b{color:var(--acc)}
.pf-ruler-needle{position:absolute;left:50%;top:64px;transform:translateX(-50%);
width:3px;height:36px;border-radius:2px;background:var(--acc);box-shadow:0 0 14px rgba(var(--acc-rgb),calc(.55 * var(--neon)));pointer-events:none}
/* Lieblingsübungen: Suchfeld + Vorschlagsliste */
.pf-exlist{margin-top:7px;border:1px solid var(--gl-bdr);border-radius:14px;overflow:hidden;background:var(--gl-bg-t)}
.pf-exrow{display:flex;align-items:center;gap:10px;padding:11px 13px;cursor:pointer;border-bottom:1px solid var(--gl-bdr2)}
.pf-exrow:last-child{border-bottom:none}
.pf-exrow:active{background:rgba(var(--acc-rgb),.08)}
.pf-exrow-n{flex:1;min-width:0;font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pf-exrow-g{font-size:11.5px;font-weight:700;color:var(--text2);flex-shrink:0}
.pf-selchip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--acc);background:rgba(var(--acc-rgb),.10);
color:var(--acc);border-radius:11px;padding:8px 10px 8px 13px;font-size:13px;font-weight:700}
.pf-selchip button{background:none;border:none;color:inherit;font-family:inherit;font-size:15px;line-height:1;cursor:pointer;padding:0 2px;opacity:.75}
/* Freundesprofil: Über-mich-Sektion */
.frp-about{background:var(--gl-bg-t);border:1px solid var(--gl-bdr);border-radius:16px;padding:12px;margin-top:8px}
.frp-exp-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.frp-exp-track{height:8px;border-radius:5px;background:var(--inp-bg);overflow:hidden;margin-top:8px}
.frp-exp-fill{height:100%;border-radius:5px;background:linear-gradient(90deg,rgba(var(--acc-rgb),.55),var(--acc));
transform-origin:left}
@media (prefers-reduced-motion:no-preference){
.frp-exp-fill{animation:frpExpGrow .8s cubic-bezier(.22,1,.36,1) both}
}
@keyframes frpExpGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.frp-bio{font-size:13.5px;line-height:1.55;margin-top:4px;white-space:pre-wrap;word-break:break-word}
/* ═══ LIVE-COACH: PULSIERENDE KI-AURA ═══
Bewusst als Opacity-Puls auf einem Pseudo-Element (Compositor-Animation) statt
animiertem box-shadow — box-shadow-Keyframes repainted jeden Frame und ruckelt
auf älteren Geräten. */
.ex-card.coach-aura{position:relative;border-color:rgba(var(--acc-rgb),.50)}
.ex-card.coach-aura::after{content:'';position:absolute;inset:0;height:auto;background:none;border-radius:inherit;pointer-events:none;z-index:0;
box-shadow:inset 0 0 0 2px rgba(var(--acc-rgb),.55),0 0 26px 5px rgba(var(--acc-rgb),.34);
opacity:calc(.25 + .2 * var(--neon))}
@media (prefers-reduced-motion:no-preference){
/* will-change haelt den weichgezeichneten Schein auf einer eigenen Ebene.
Ohne das mischt WebKit den 26-px-Schatten bei jedem Pulsschlag neu in die
Karte — und die Karte darunter traegt selbst einen backdrop-filter. Genau
eine Karte im Training hat diese Klasse, es entsteht also EINE Ebene. */
.ex-card.coach-aura::after{animation:coachAuraOp 2.2s ease-in-out infinite;will-change:opacity}
}
/* Der Dimmer greift auch hier, aber mit Untergrenze: die Aura sagt, an welcher
Uebung der Coach gerade dran ist — sie darf leiser werden, nicht verschwinden. */
@keyframes coachAuraOp{0%,100%{opacity:calc(.2 + .15 * var(--neon))}50%{opacity:calc(.4 + .6 * var(--neon))}}
.coach-ki-tag{font-size:9px;font-weight:800;letter-spacing:.6px;color:#fff;background:var(--acc);
border-radius:6px;padding:1.5px 6px;margin-left:6px;vertical-align:1px}
/* ═══════════════════ KI-COACH: LIVE-COACH IM TRAINING (Phase D) ═══════════════════ */
.wk-head-title-row{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden}
@keyframes coachPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.35)}}
/* Feste Coach-Leiste — durchgehend sichtbar im aktiven Training (Status + Live-Reaktionen) */
/* ── Coach-Leiste ──────────────────────────────────────────────────────────
Bewusst OHNE backdrop-filter: die Leiste hat overflow:hidden für Aura und
Shimmer, und genau diese Kombination (Filter + eigener Clip/Stacking-Context)
rendert WKWebView als durchgehende dunkle Fläche — derselbe Bug wie bei den
KI-Menü-Pillen und der Snap-Card. Der Farbverlauf trägt den Glas-Eindruck
allein und sieht auf jedem Untergrund gleich aus. */
.coach-bar{
position:relative;overflow:hidden;isolation:isolate;
margin:0 0 8px;padding:7px 12px;border-radius:14px;
/* Deckender Grund GANZ unten: die Leiste klebt in #wk-sticky beim Scrollen
ueber der Uebungskarte. Mit rein glasigem Hintergrund las man den
Uebungsnamen durch die Leiste hindurch — das sah nach Fehler aus. */
background:linear-gradient(135deg,rgba(var(--acc-rgb),.20),rgba(var(--acc-rgb),.07) 62%),var(--gl-bg-h),
linear-gradient(var(--card),var(--card));
border:1px solid rgba(var(--acc-rgb),.32);
box-shadow:0 4px 18px rgba(var(--acc-rgb),.13);
/* KEINE Hoehen-Animation. height, padding und margin sind Layout-Groessen:
jedes Bild einer solchen Blende bricht die Seite neu um — und diese Leiste
sitzt im Klebe-Stapel direkt ueber der Uebungsliste, also wurde 300 ms lang
in jedem Bild die GANZE Liste neu vermessen, genau waehrend der Tipp
erscheint. Die Bewegung tragen jetzt Text und Lichtstreifen (coachMsgIn,
coachSweep) — beide laufen ueber transform/opacity im Compositor, und die
Leiste nimmt ihre neue Hoehe in EINEM Umbruch ein. */
transition:opacity .22s ease,border-color .35s,box-shadow .35s;
}
/* Aus-Zustand (Coach abgeschaltet / kein Premium): eingeklappt statt display:none,
damit Ein- und Ausblenden dieselbe Kurve nehmen wie jede Hoehenaenderung.
BEWUSST ohne !important — _coachBarAnimate() setzt waehrend der Bewegung eine
Inline-Hoehe, und ein !important hier wuerde genau die ueberstimmen. */
.coach-bar.is-off{height:0;margin-bottom:0;padding-top:0;padding-bottom:0;opacity:0;border-width:0}
@media (prefers-reduced-motion:reduce){ .coach-bar{transition:border-color .35s,box-shadow .35s} }
/* Aura: langsam wanderndes Licht — signalisiert "läuft mit", ohne zu blinken. */
.coach-bar::before{
content:'';position:absolute;inset:-45% -20%;z-index:-1;pointer-events:none;
background:radial-gradient(40% 62% at 22% 50%,rgba(var(--acc-rgb),.42),transparent 72%);
}
/* Shimmer: einmaliger Lichtstreifen, wenn eine neue Coach-Nachricht eintrifft. */
.coach-bar::after{
content:'';position:absolute;top:0;bottom:0;left:0;width:42%;z-index:-1;pointer-events:none;opacity:0;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
transform:translateX(-170%);
}
.coach-bar.thinking{border-color:rgba(var(--acc-rgb),.58);box-shadow:0 6px 26px rgba(var(--acc-rgb),.26)}
@media (prefers-reduced-motion:no-preference){
/* Beide laufen ueber transform und bleiben damit im Compositor; will-change
verhindert, dass die Leiste (sie klebt und liegt ueber den Karten) bei
jedem Frame neu gemalt wird. */
.coach-bar::before{animation:coachAuraDrift 7.5s ease-in-out infinite;will-change:transform}
.coach-bar.flash::after{animation:coachSweep .95s cubic-bezier(.4,0,.2,1)}
.coach-bar-msg{animation:coachMsgIn .34s cubic-bezier(.2,.9,.3,1)}
}
@keyframes coachAuraDrift{0%,100%{transform:translateX(-12%)}50%{transform:translateX(30%)}}
@keyframes coachSweep{0%{transform:translateX(-170%);opacity:1}100%{transform:translateX(330%);opacity:0}}
@keyframes coachMsgIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
[data-glass="off"] .coach-bar{background:linear-gradient(135deg,rgba(var(--acc-rgb),.20),rgba(var(--acc-rgb),.07) 62%),var(--inp-bg),linear-gradient(var(--card),var(--card))}
.coach-bar-head{position:relative;display:flex;align-items:center;gap:8px}
/* Equalizer statt statischem Punkt: drei atmende Balken lesen sich als "hört zu",
ein Blink-Punkt eher als Statuslampe. */
.coach-bar-eq{display:flex;align-items:flex-end;gap:2.5px;height:13px;flex-shrink:0}
/* ── DER VORSCHLAG IN DER LEISTE (.coach-bar.cb-offer) ────────────────────
Er bekommt keine eigene Flaeche. Die Leiste steht ohnehin im klebenden Kopf
und ist ohnehin sichtbar — der Vorschlag uebernimmt sie, statt darunter
einen zweiten Kasten aufzumachen. Zugeklappt ist er eine Zeile hoch, kostet
also NULL zusaetzliche Sicht auf die Satzliste. Das war der Punkt: eine
Karte, egal ob in der Uebung oder am unteren Rand, nimmt im Training Platz
weg, den es dort nicht gibt.
Ein Tipp auf die Zeile klappt Begruendung und Auswahl auf; nur DANN waechst
die Leiste, und nur, weil man es angefordert hat. */
.coach-bar.cb-offer{
border-color:rgba(var(--acc-rgb),.55);
box-shadow:0 4px 20px rgba(var(--acc-rgb),.20);
}
.cb-offer-row{
display:flex;align-items:center;gap:8px;min-height:24px;
cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.cb-offer-lbl{
flex:1;min-width:0;font-size:13px;font-weight:800;color:var(--text);
/* Eine Zeile, Rest gekuerzt: bricht der Titel um, wandert die Satzliste
beim Erscheinen doch wieder nach unten. Die volle Fassung steht eine
Antippung entfernt. */
overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Gross genug fuer eine Hand, die gerade Gewichte gehalten hat. 36 px sichtbar,
die Trefferflaeche daempft das auf die 44 px auf, die Apple als Mindestmass
nennt (::after, damit die Leiste dafuer nicht hoeher wird). Bei 28 px lag
der Daumen zu leicht daneben — und danebenliegen heisst hier: aus Versehen
verworfen. */
.cb-offer-btn{
position:relative;
flex-shrink:0;width:36px;height:36px;padding:0;border-radius:50%;
display:inline-flex;align-items:center;justify-content:center;
font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;
border:1px solid transparent;-webkit-tap-highlight-color:transparent;
transition:transform .14s ease,opacity .14s ease;
}
.cb-offer-btn::after{
content:'';position:absolute;top:50%;left:50%;
width:44px;height:44px;transform:translate(-50%,-50%);
}
.cb-offer-btn:active{transform:scale(.9)}
.cb-offer-btn.ja{background:var(--acc);color:#fff}
.cb-offer-btn.ja svg{stroke:#fff}
.cb-offer-btn.nein{background:transparent;color:var(--text2);border-color:var(--gl-bdr)}
/* Aufgeklappt: Begruendung und, wenn es mehrere Wege gibt, die Auswahl.
Die Hoehe faehrt ueber grid-template-rows 0fr → 1fr. Das ist der einzige
Weg, eine UNBEKANNTE Hoehe sauber zu animieren: max-height muesste man
raten, und raet man zu hoch, haengt die Bewegung am Ende in der Luft — sie
laeuft dann noch, obwohl optisch nichts mehr passiert.
Der Inhalt liegt in einer eigenen Innenschicht mit overflow:hidden und
min-height:0; ohne beides weigert sich das Raster zu schrumpfen.
Und der Teil waechst NICHT in der Leiste, sondern klappt darunter auf.
Das ist der Unterschied zwischen fluessig und hakelig, und er hat nichts
mit der Kurve zu tun: die Leiste sitzt in #wk-sticky, an dem ein
ResizeObserver haengt (_wkSnapPadSoon). Jede Hoehenaenderung dort schreibt
den Rastabstand des Blattes neu, WebKit rechnet daraufhin die Rastpunkte
des GANZEN Blattes neu und die Fokus-Schicht misst alle Karten nach — und
das bei jedem Bild der Blende. Eine Hoehenanimation an dieser Stelle kann
gar nicht fluessig sein.
Absolut positioniert aendert sich kein Layout: es bewegen sich nur
transform und opacity, beides Sachen, die der Compositor allein macht. */
.coach-bar.cb-offer{overflow:visible}
.cb-offer-more{
position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:3;
padding:11px 13px;border-radius:14px;
background:var(--card);
border:1px solid rgba(var(--acc-rgb),.34);
box-shadow:0 14px 34px rgba(0,0,0,.38);
opacity:0;pointer-events:none;
transform:translateY(-10px) scale(.97);transform-origin:top center;
transition:opacity .18s ease,transform .26s cubic-bezier(.22,.9,.3,1);
}
.coach-bar.cb-offer.open .cb-offer-more{
opacity:1;transform:none;pointer-events:auto;
}
/* Der Text kommt einen Tick nach der Hoehe. Beides gleichzeitig liest sich
als ein Ruck; leicht versetzt wirkt es, als klappe die Leiste auf und der
Inhalt komme darin zum Vorschein. */
.cb-offer-for,.cb-offer-txt,.cb-offer-opts{
opacity:0;transition:opacity .18s ease .10s;
}
.coach-bar.cb-offer.open .cb-offer-for,
.coach-bar.cb-offer.open .cb-offer-txt,
.coach-bar.cb-offer.open .cb-offer-opts{opacity:1}
.cb-offer-txt{font-size:12.5px;line-height:1.45;color:var(--text2)}
.cb-offer-for{
font-size:11px;font-weight:800;letter-spacing:.03em;color:var(--acc);
margin-bottom:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cb-offer-opts{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.cb-offer-opt{
flex:1 1 auto;min-width:82px;padding:7px 10px;border-radius:10px;
border:1px solid rgba(var(--acc-rgb),.35);background:rgba(var(--acc-rgb),.10);
color:var(--acc);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer;
}
.cb-offer-opt:active{transform:scale(.97)}
/* Ein neuer Vorschlag laeuft einmal ein: die Zeile ruecht von oben nach,
der Rahmen leuchtet kurz auf. Danach steht sie ruhig — sie soll auffallen,
wenn sie kommt, und nicht dauernd blinken, waehrend man loggt. */
@keyframes cbNeuIn{
from{opacity:0;transform:translateY(-6px)}
to{opacity:1;transform:none}
}
@keyframes cbNeuGlow{
0%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),.45),0 4px 20px rgba(var(--acc-rgb),.20)}
60%{box-shadow:0 0 0 5px rgba(var(--acc-rgb),0),0 4px 20px rgba(var(--acc-rgb),.20)}
100%{box-shadow:0 0 0 0 rgba(var(--acc-rgb),0),0 4px 20px rgba(var(--acc-rgb),.20)}
}
.coach-bar.cb-neu{animation:cbNeuGlow .9s ease-out}
.coach-bar.cb-neu .cb-offer-row{animation:cbNeuIn .3s cubic-bezier(.22,.9,.3,1)}
/* Bestaetigung: derselbe Ort, gruen, und sie verschwindet von selbst. */
.coach-bar.cb-done{border-color:rgba(76,209,55,.55)}
.cb-offer-ok{display:inline-flex;flex-shrink:0;color:#4cd137}
.cb-offer-ok svg{stroke:#4cd137}
@media (prefers-reduced-motion:reduce){
.cb-offer-more,.cb-offer-txt,.cb-offer-opts{transition:none}
.coach-bar.cb-neu,.coach-bar.cb-neu .cb-offer-row{animation:none}
}
/* Die Balken stehen auf VOLLER Hoehe und werden gestaucht — nicht umgekehrt.
Vorher liefen die Keyframes ueber 'height': das ist eine Layout-Eigenschaft,
also rechnete die WebView 60-mal je Sekunde das Layout der Leiste neu, und
zwar durchgehend vom ersten bis zum letzten Satz des Trainings. Ueber
transform laeuft dieselbe Bewegung allein im Compositor. */
.coach-bar-eq i{width:2.5px;height:13px;border-radius:2px;background:var(--acc);display:block;
transform-origin:50% 100%;transform:scaleY(.31);opacity:.5}
@media (prefers-reduced-motion:no-preference){
.coach-bar-eq i{animation:coachEq 1.7s ease-in-out infinite}
.coach-bar-eq i:nth-child(2){animation-delay:.24s}
.coach-bar-eq i:nth-child(3){animation-delay:.48s}
.coach-bar.thinking .coach-bar-eq i{animation-duration:.6s}
}
@keyframes coachEq{0%,100%{transform:scaleY(.31);opacity:.5}45%{transform:scaleY(1);opacity:1}}
.coach-bar-lbl{font-size:12px;font-weight:800;color:var(--acc);letter-spacing:.3px}
/* Rueckgaengig sitzt rechts im Kopf der Leiste: sichtbar, aber nicht vor der
Nachricht. Zehn Sekunden lang, danach nimmt _coachBarRender es wieder raus. */
.cb-undo{margin-left:auto;padding:4px 10px;border-radius:9px;font-family:inherit;font-size:11.5px;font-weight:800;
color:var(--acc);background:rgba(var(--acc-rgb),.12);border:1px solid rgba(var(--acc-rgb),.34);cursor:pointer}
.cb-undo:active{background:rgba(var(--acc-rgb),.22)}
.coach-bar-msg{font-size:13.5px;color:var(--text);margin-top:5px;line-height:1.42;font-weight:600}
/* Kein Sprech-Knopf in der Leiste: Fragen an den Coach laufen ueber den
KI-Chat (Knopf unten rechts), nicht ueber ein zweites Mikrofon im Training.
Die Leiste ist reine ANZEIGE — Reaktion auf den Satz, Pausenhinweis,
Satz-Rueckfrage. Sie hat bewusst kein Bedienelement. */
/* Stimmenliste der Einrichtung: hoechstens acht Eintraege, deshalb Umbruch statt
Scrollbahn — eine waagerechte Bahn versteckt die Haelfte der Wahl. */
.ch-voices{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.ch-vopt{padding:8px 12px;border-radius:11px;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;
background:var(--inp-bg);border:1px solid var(--gl-bdr);color:var(--text)}
.ch-vopt.on{background:rgba(var(--acc-rgb),.14);border-color:rgba(var(--acc-rgb),.45);color:var(--acc)}
/* Bilanz im Post-Workout-Check-in. Bewusst NUR eine Textzeile: die Coach-Leiste
gehoert ins Training, hier ist das Training vorbei. */
.ci-coach{font-size:13.5px;color:var(--text);line-height:1.42;font-weight:600;
background:var(--card2,rgba(127,127,127,.10));border-radius:12px;padding:10px 12px;margin:0 0 16px}
/* Die Satz-Rueckfrage (.cb-ask3) ist entfallen: der Coach leitet die
Einschaetzung aus Soll und Ist ab (_rpeDerive), statt nach jedem Satz zu
fragen. Damit gibt es in der Leiste wieder GENAU eine Sorte Inhalt — Kopf
und Nachricht. */
/* Die Karte faehrt AUF: Hoehe, Deckkraft und ein kurzer Weg von oben in einem
Zug. Vorher stand sie schlagartig da und schob den ganzen Satzblock nach
unten — zusammen mit dem Scroll-Anker (s. _lcAnker) ist der Sprung damit weg.
KEIN fill-mode: nach dem Lauf gilt wieder die natuerliche Hoehe, sonst
schnitte die max-height eine laengere Karte ab. 420 px ist nur die Obergrenze
der Blende, keine Begrenzung des Inhalts. */
.coach-card{position:relative;display:flex;border-radius:14px;overflow:hidden;margin-bottom:10px;
background:rgba(var(--acc-rgb),.07);border:1px solid rgba(var(--acc-rgb),.2);
animation:coachCardIn .38s cubic-bezier(.22,.9,.3,1)}
@keyframes coachCardIn{
from{max-height:0;opacity:0;transform:translateY(-6px);margin-bottom:0;
padding-top:0;padding-bottom:0;border-top-width:0;border-bottom-width:0}
60%{opacity:1}
to{max-height:420px;opacity:1;transform:none;margin-bottom:10px}}
@media (prefers-reduced-motion:reduce){.coach-card{animation:none}}
.coach-card-bar{width:4px;flex-shrink:0;background:var(--acc)}
.coach-card-body{flex:1;min-width:0;padding:10px 12px}
.coach-card-head{display:flex;align-items:center;gap:7px;color:var(--acc)}
.coach-card-title{font-size:13.5px;font-weight:800;color:var(--text)}
.coach-card-text{font-size:13px;color:var(--text2);line-height:1.45;margin-top:3px}
.coach-card-btns{display:flex;gap:8px;margin-top:9px}
.coach-card-btn{flex:1;border:none;border-radius:10px;padding:8px 10px;font-family:inherit;font-size:12.5px;font-weight:700;cursor:pointer}
.coach-card-btn.accept{background:var(--acc);color:#fff}
.coach-card-btn.dismiss{background:var(--inp-bg);color:var(--text2);border:1px solid var(--gl-bdr)}
.coach-card-applied{display:flex;align-items:center;gap:8px;color:var(--acc);font-size:13px;font-weight:700}
.coach-card-opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}
.coach-card-opt{flex:1 1 auto;min-width:84px;border:1px solid rgba(var(--acc-rgb),.3);border-radius:10px;
padding:8px 10px;font-family:inherit;font-size:12.5px;font-weight:700;color:var(--acc);
background:rgba(var(--acc-rgb),.08);cursor:pointer}
.coach-card-skip{display:block;margin:7px auto 0;background:none;border:none;font-family:inherit;
font-size:11.5px;color:var(--text2);cursor:pointer;padding:2px}
/* ── KI-TAGESBRIEFING auf der Startseite (.aic) ───────────────────────────
Hochwertig statt laut: getönte Glasfläche, eine langsam wandernde Aurora,
ein einziger Lichtstreifen beim Erscheinen (danach nur alle 9 s dezent),
gestaffelt einlaufende Zeilen und ein Erholungsring, der sich aufbaut.
KEIN backdrop-filter: die Karte braucht overflow:hidden für Aurora/Sheen,
und genau diese Kombination rendert WKWebView als dunkle Fläche (gleicher
Bug wie bei Coach-Leiste und Snap-Card). Der Verlauf trägt das Glas allein. */
.aic{position:relative;overflow:hidden;isolation:isolate;border-radius:20px;margin:0 0 12px;
background:linear-gradient(152deg,rgba(var(--acc-rgb),.20),rgba(var(--acc-rgb),.055) 58%,rgba(var(--acc-rgb),.02)),var(--gl-bg-h);
border:1px solid rgba(var(--acc-rgb),.30);
box-shadow:0 12px 30px rgba(var(--acc-rgb),.15),inset 0 1px 0 rgba(255,255,255,.10);
/* transform kürzer als opacity: das Ein-/Ausblenden bleibt bei .24s, der
Druck unter dem Finger muss sofort kommen — 240 ms fühlten sich wie eine
Verzögerung an, nicht wie eine Reaktion. */
transition:opacity .24s ease,transform .13s ease}
/* WICHTIG: Ruhezustand ist SICHTBAR. Ein-/Ausblenden läuft über Keyframes ohne
fill-mode — so bleibt die Karte auch dann lesbar, wenn eine Engine die
Animation gar nicht startet (Paint-Throttling, Snapshot-Renderer, reduzierte
Bewegung). Vorher lag die Karte auf opacity:0 und wartete auf .in — genau das
kann eine leere Fläche hinterlassen. */
.aic.out{opacity:0;transform:translateY(-6px) scale(.985)}
[data-glass="off"] .aic{background:linear-gradient(152deg,rgba(var(--acc-rgb),.20),rgba(var(--acc-rgb),.055) 58%,transparent),var(--inp-bg)}
/* Auf dunklen Themes traegt das Wellenfeld das Licht. Der flaechige Akzent-Verlauf
der Karte legte sich als gleichmaessiger Schleier darueber und nahm dem Raster
genau den Unterschied zwischen hell und dunkel, von dem die Vorlage lebt. */
[data-theme="dark"] .aic{background:linear-gradient(152deg,rgba(var(--acc-rgb),.10),rgba(var(--acc-rgb),.02) 58%,transparent),var(--gl-bg-h)}
/* ── DIE KARTE AUF DEN HELLEN THEMES ─────────────────────────────────────
Im Dunkeln lebt die Karte davon, dass WEISS Licht ist: die Kaemme des
Wellenfelds, das Gegenlicht der Aurora, die Haarlinie oben und der Rim sind
alle weiss, und alle vier stehen auf einer fast schwarzen Flaeche. Auf
light/rosa/blau/gruen liegt dieselbe Karte auf weissem Glas — dort ist jedes
dieser vier Signale weg. Uebrig blieb, was auf den Vergleichsbildern zu sehen
war: eine flaechig getoente Pastellkarte mit einem gleichmaessigen
Punktteppich darauf, ohne Wellen, ohne Kante, ohne Tiefe.
Der Ausweg ist NICHT mehr Farbe (rosa war schon zu satt), sondern ein zweiter
Pol: --acc-ink, die dunkle Fassung des Akzents. Damit bekommt die Karte
dieselbe Hell-Dunkel-Spanne wie im Dark Mode, nur andersherum — Licht bleibt
weiss, aber die Tiefe kommt jetzt aus der Tinte statt aus dem Grund.
Die Grundtoenung faellt dafuer auf rund die Haelfte: sie war der Schleier,
der die Flaeche flach gemacht hat. */
[data-theme="light"] .aic,[data-theme="rosa"] .aic,
[data-theme="blau"] .aic,[data-theme="grün"] .aic{
background:linear-gradient(152deg,rgba(var(--acc-rgb),.11),rgba(var(--acc-rgb),.035) 54%,rgba(255,255,255,.10)),var(--gl-bg-h);
border-color:rgba(var(--acc-ink),.17);
box-shadow:0 10px 26px rgba(var(--acc-ink),.11),
inset 0 1px 0 rgba(255,255,255,.75),
inset 0 -1px 0 rgba(var(--acc-ink),.06)}
/* Glas aus: kein Durchblick, also traegt die Karte die Toenung selbst — sonst
stuende die halbtransparente Fassung von oben auf dem nackten Grund. */
[data-glass="off"][data-theme="light"] .aic,[data-glass="off"][data-theme="rosa"] .aic,
[data-glass="off"][data-theme="blau"] .aic,[data-glass="off"][data-theme="grün"] .aic{
background:linear-gradient(152deg,rgba(var(--acc-rgb),.13),rgba(var(--acc-rgb),.04) 54%,transparent),var(--card)}
/* Aurora hell: die erste Lage stellt nur noch die Farbe (deutlich schwaecher,
sie war der Schleier), die zweite bringt das, was im Dunkeln der Grund liefert
— einen hellen und einen dunklen Pool, die gegeneinander driften. Ohne den
dunklen Pool bewegt sich Weiss auf Weiss und man sieht die Bewegung nicht. */
[data-theme="light"] .aic-aur,[data-theme="rosa"] .aic-aur,
[data-theme="blau"] .aic-aur,[data-theme="grün"] .aic-aur{
background:radial-gradient(38% 55% at 20% 42%,rgba(var(--acc-rgb),.16),transparent 70%),
radial-gradient(30% 46% at 82% 66%,rgba(var(--acc-rgb),.10),transparent 72%),
radial-gradient(26% 40% at 52% 88%,rgba(var(--acc-rgb),.09),transparent 74%)}
[data-theme="light"] .aic-aur::after,[data-theme="rosa"] .aic-aur::after,
[data-theme="blau"] .aic-aur::after,[data-theme="grün"] .aic-aur::after{
background:radial-gradient(22% 32% at 70% 26%,rgba(255,255,255,.60),transparent 72%),
radial-gradient(30% 44% at 72% 24%,rgba(var(--acc-rgb),.16),transparent 70%),
radial-gradient(18% 26% at 16% 74%,rgba(var(--acc-ink),.13),transparent 74%),
radial-gradient(24% 36% at 14% 78%,rgba(var(--acc-rgb),.14),transparent 72%)}
/* Lichtstreif kraeftiger: auf getoentem Glas ist ein 20-%-Weiss nicht mehr als
ein Hauch, im Dunkeln war es der klar sichtbare Wisch. */
[data-theme="light"] .aic-sheen,[data-theme="rosa"] .aic-sheen,
[data-theme="blau"] .aic-sheen,[data-theme="grün"] .aic-sheen{
background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent)}
/* Haarlinie oben: das Weiss traegt hier die Kante, der Akzent bleibt der
wandernde Teil — aber beide brauchen mehr Deckkraft als auf Schwarz. */
[data-theme="light"] .aic::after,[data-theme="rosa"] .aic::after,
[data-theme="blau"] .aic::after,[data-theme="grün"] .aic::after{
background:linear-gradient(90deg,transparent,rgba(255,255,255,.90),rgba(var(--acc-rgb),.70),transparent);
background-size:230% 100%}
/* ── Wellenfeld hinter der Karte (Halbton-Raster) ────────────────────────
Vorlage: ein Punktraster, durch das langsam helle Wellen wandern. Gebaut in
zwei Lagen und OHNE Maske — mask + backdrop-filter zerlegt WKWebView (an der
Snap-Karte schon einmal passiert):
unten .aic-aur driftende Lichtfelder + eine Welle, die nach aussen laeuft
darauf .aic-scr ein SIEB: Flaeche in Kartenfarbe mit winzigen Loechern
Licht ist damit nur in den Loechern sichtbar — also als Punkte, und die
Wellen wandern als Helligkeit durch das Raster.
Aurora: drei weiche Lichtfelder, die gegeneinander driften → "denkt mit".
Die Farbe wandert dabei langsam um den Akzent herum (aicHue, ±36°): ein
fester Ton wirkte wie ein Standbild, ein voller Regenbogen wie ein fremdes
Produkt. */
.aic-aur{position:absolute;inset:-60% -25%;z-index:-2;pointer-events:none;
background:radial-gradient(38% 55% at 20% 42%,rgba(var(--acc-rgb),.30),transparent 70%),
radial-gradient(30% 46% at 82% 66%,rgba(var(--acc-rgb),.20),transparent 72%),
radial-gradient(26% 40% at 52% 88%,rgba(var(--acc-rgb),.18),transparent 74%)}
/* Zweite Lage Licht, die GEGEN die erste laeuft. Zwei gleichlaufende Felder
sehen aus wie ein verschobenes Bild; erst der Gegenlauf ergibt Wellen, die
sich treffen und wieder auseinandergehen. */
.aic-aur::after{content:'';position:absolute;inset:0;
background:radial-gradient(22% 32% at 70% 26%,rgba(255,255,255,.16),transparent 72%),
radial-gradient(30% 44% at 72% 24%,rgba(var(--acc-rgb),.42),transparent 70%),
radial-gradient(18% 26% at 16% 74%,rgba(255,255,255,.10),transparent 74%),
radial-gradient(24% 36% at 14% 78%,rgba(var(--acc-rgb),.30),transparent 72%)}
/* Der Lichtring, der alle 14 s aus der Mitte nach aussen lief, ist ENTFERNT.
Er war als Welle unter dem Punktsieb gedacht; seit das Feld aus dem Canvas
kommt, lag er offen auf der Karte und war genau der Puls, der auffiel. */
/* inset:-14px, weil die Flaeche sich BEWEGT: sie zieht in einer weichen Schleife
ueber die Karte, und ohne Ueberstand liefe an den Raendern kurz die nackte
Kartenflaeche durch. Bewegt wird per transform (Compositor), nicht ueber
background-position — das waere ein Neuzeichnen des Rasters in jedem Bild. */
/* Das Wellenfeld selbst. Ein statisches Raster kann nicht wogen — die Punkte
muessen EINZELN wandern, und dafuer gibt es in CSS kein Mittel. Also Canvas:
ein Punktgitter mit Perspektive, durch das Sinuswellen rollen (_aicWave).
Es liegt UNTER dem Inhalt (z-index -1) und ueber der Aurora (-2), die weiter
die Farbe stellt. */
.aic-wv{position:absolute;inset:0;z-index:-1;pointer-events:none;display:block;
width:100%;height:100%}
/* Lichtstreifen: einmal beim Erscheinen, danach als seltener Puls */
.aic-sheen{position:absolute;top:0;bottom:0;left:0;width:38%;z-index:-1;pointer-events:none;opacity:0;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.20),transparent);transform:translateX(-180%)}
/* Haarlinie oben: wandernder Farbverlauf statt statischer Kante */
.aic::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;z-index:2;pointer-events:none;
background:linear-gradient(90deg,transparent,rgba(255,255,255,.42),rgba(var(--acc-rgb),.95),transparent);
background-size:230% 100%}
@media (prefers-reduced-motion:no-preference){
/* Drei Zeiten, die sich NICHT teilen (13 / 19 / 9 / 26 s): gemeinsame Vielfache
ergaeben einen sichtbaren Takt, und ein Takt macht aus dem Feld eine
Schleife. So trifft sich das Bild praktisch nie zweimal gleich. */
.aic-aur{animation:aicAur 13s ease-in-out infinite,aicHue 29s ease-in-out infinite}
.aic-aur::after{animation:aicAur2 19s ease-in-out infinite}
.aic.in .aic-sheen{animation:aicSheen 9s cubic-bezier(.4,0,.2,1) .35s infinite}
.aic::after{animation:aicLine 7s linear infinite}
.aic.in{animation:aicIn .5s cubic-bezier(.2,.9,.3,1)}
.aic.in .aic-main{animation:aicRow .5s cubic-bezier(.2,.9,.3,1) .06s}
.aic.in .aic-chips{animation:aicRow .5s cubic-bezier(.2,.9,.3,1) .12s}
.aic.in .aic-btns{animation:aicRow .5s cubic-bezier(.2,.9,.3,1) .18s}
/* Alle drei Ring-Ebenen ziehen gemeinsam auf. Nur den scharfen Bogen zu
animieren hiesse: das Licht steht schon fertig da, waehrend die Linie erst
hinterherkommt. */
.aic.in .aic-r-fg,.aic.in .aic-r-halo,.aic.in .aic-r-glow{animation:aicRing 1.05s cubic-bezier(.3,.9,.3,1) .12s}
/* Der Orb ATMET, statt nur einen Reifen abzuwerfen: der Kern geht mit dem
Licht mit (aicOrbKern), darüber laufen ZWEI Ringe versetzt nach aussen
(aicOrbWelle, zweiter mit 1,15 s Versatz). Ein einzelner Ring mit
ease-in-out sah aus, als würde er ruckeln — er war am Umkehrpunkt am
langsamsten und genau dort am sichtbarsten. Die Welle laeuft jetzt schnell
los und verliert sich weich (cubic-bezier), so wie ein Puls. */
/* Im Orb steht das Zeichen der App. Es pocht nicht mit, sondern WIEGT sich:
eine Hantel, die kippt, ist eine Bewegung aus dem Training — ein Symbol,
das im Takt groesser und kleiner wird, ist ein Ladebalken. */
.aic-orb svg{animation:aicOrbHantel 4.4s cubic-bezier(.45,0,.35,1) infinite}
.aic-live i{animation:aicDot 2.1s ease-in-out infinite}
}
@keyframes aicIn{from{opacity:0;transform:translateY(8px) scale(.985)}to{opacity:1;transform:none}}
@keyframes aicAur{0%,100%{transform:translate3d(-6%,0,0) scale(1)}50%{transform:translate3d(10%,3%,0) scale(1.08)}}
/* Gegenlauf: andere Richtung, andere Weite, andere Dauer. */
@keyframes aicAur2{0%,100%{transform:translate3d(8%,2%,0) scale(1.06)}50%{transform:translate3d(-9%,-4%,0) scale(.94)}}
/* Farbwanderung um den Akzent herum — nie weiter als 36°, sonst ist es nicht
mehr die Farbe der App. */
/* Die Farbe wandert langsam um den Akzent (+-14 Grad) und bekommt EINMAL je
Runde einen kurzen Tupfer mehr Saettigung — der "kleine Farbimpuls". Beides in
EINER Animation, weil zwei Animationen auf derselben filter-Eigenschaft
einander ueberschreiben statt sich zu addieren. */
@keyframes aicHue{
0%,100%{filter:hue-rotate(-14deg) saturate(1)}
38%{filter:hue-rotate(12deg) saturate(1)}
62%{filter:hue-rotate(14deg) saturate(1)}
72%{filter:hue-rotate(30deg) saturate(1.55)}
82%{filter:hue-rotate(4deg) saturate(1)}}
@keyframes aicSheen{0%{transform:translateX(-180%);opacity:0}4%{opacity:1}26%{transform:translateX(320%);opacity:0}100%{transform:translateX(320%);opacity:0}}
@keyframes aicLine{0%{background-position:130% 0}100%{background-position:-130% 0}}
@keyframes aicRow{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes aicRing{from{stroke-dashoffset:163.4}to{stroke-dashoffset:var(--aic-off)}}
/* Die Hantel kippt langsam von der einen auf die andere Seite und haelt oben
kurz inne (die Pausen bei 0/48/100 % sind die Umkehrpunkte). 11 Grad reichen:
mehr sieht bei 14 px nach Zeiger aus, weniger sieht man nicht. */
@keyframes aicOrbHantel{
0%,100%{transform:rotate(-11deg)}
8%{transform:rotate(-11deg)}
48%{transform:rotate(11deg)}
56%{transform:rotate(11deg)}}
@keyframes aicDot{0%,100%{opacity:.35;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
/* Kompakter als zuvor (13/15/14 → 11/13/12): die Karte ist der Einstieg in
den Coach, nicht der halbe Heute-Tab. */
.aic-in{position:relative;z-index:1;padding:10px 12px 11px}
.aic-top{display:flex;align-items:center;gap:8px}
/* Der Kern ist keine flache Scheibe mehr: ueber dem Akzent liegt ein heller
Fleck, der nicht in der Mitte sitzt. Dreht sich der Kreis, wandert dieser
Fleck — bei einem Kreis ist die Drehung sonst unsichtbar, und genau deshalb
funktioniert der Trick ohne dass sich der Umriss bewegt. */
/* Das App-Zeichen, nicht mehr ein leuchtender Punkt: schwarzes Feld mit weisser
Hantel — dasselbe Bild wie das Symbol auf dem Homescreen. Der pulsierende
blaue Kreis davor war ein Gestaltungselement ohne Bedeutung; das Zeichen der
App sagt an dieser Stelle, WER spricht. Quadrat mit stark gerundeten Ecken
(Squircle-Naeherung) statt Kreis, sonst ist es nicht das App-Symbol. */
.aic-orb{position:relative;display:grid;place-items:center;width:26px;height:26px;
border-radius:8px;flex-shrink:0;overflow:hidden;
color:#fff;background:linear-gradient(160deg,#15171d,#07080c);
border:1px solid rgba(255,255,255,.14);
box-shadow:0 2px 8px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.10)}
/* Kein Lichtstreifen mehr ueber dem Zeichen: der Puls, der alle paar Sekunden
durchs Bild lief, war die eine Bewegung, die im Blatt auffiel. Uebrig bleibt
die kippende Hantel. */
.aic-orb::before,.aic-orb::after{display:none}
.aic-orb svg{position:relative;z-index:1}
/* Nur noch EIN Pseudo-Element, und es ist kein Reifen mehr, sondern der
Lichtstreifen (s. unten). */
.aic-orb::before,.aic-orb::after{content:'';position:absolute;inset:0;pointer-events:none}
/* Der Name MUSS schrumpfen duerfen. Ohne min-width:0 steht ein Flex-Kind auf
seiner Inhaltsbreite (min-width:auto) — ein langer Coach-Name plus Chip plus
Winkel war breiter als die Karte, und weil .aic overflow:hidden traegt, war
der Name rechts einfach abgeschnitten statt mit Auslassungspunkten gekuerzt.
Grossbuchstaben und 0,9 px Sperrung machen jeden Namen zusaetzlich breit. */
.aic-lbl{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:11.5px;font-weight:900;letter-spacing:.9px;text-transform:uppercase;color:var(--acc)}
/* Der Karte ansehen, dass sie eine TÜR ist: ohne Signal las sie sich als
Anzeige, und der einzige Zugang zum Coach blieb unentdeckt. Der Pfeil sitzt
am rechten Ende der Namenszeile und ist rein dekorativ — die Vorlesehilfe
bekommt ihre Auskunft über das aria-label auf .aic-top. */
.aic-go-hint{margin-left:auto;display:grid;place-items:center;flex-shrink:0;color:var(--acc);opacity:.75;
transition:transform .16s cubic-bezier(.22,.61,.36,1)}
.aic.press .aic-go-hint{transform:translateX(2px)}
/* Druckzustand der ganzen Karte. Gesetzt wird er in _aicCardTap() und NICHT
über :active — sonst schrumpfte die Karte auch beim Tipp auf "Training
starten", den derselbe closest("button, a")-Wächter ausnimmt. */
.aic.press{transform:scale(.985)}
/* Der Chip darf ebenfalls schrumpfen (min-width:0) und bleibt bei 46 % der
Zeile gedeckelt — er ist die Beifuegung, der Name die Ueberschrift. Die
Auslassungspunkte greifen hier NICHT (Flex-Container, der Text ist ein
anonymes Flex-Kind); die Deckelung haelt ihn kurz genug, dass es nicht
auffaellt. */
.aic-live{display:flex;align-items:center;gap:5px;margin-left:auto;flex:0 1 auto;min-width:0;
font-size:10.5px;font-weight:800;
color:var(--text2);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.aic-live i{width:5px;height:5px;border-radius:50%;background:var(--acc);flex-shrink:0;
box-shadow:0 0 8px rgba(var(--acc-rgb),.9)}
.aic-x{background:none;border:none;color:var(--text2);font-size:13px;line-height:1;padding:4px;margin:-4px -5px -4px 0;
cursor:pointer;opacity:.55;flex-shrink:0}
.aic-main{display:flex;align-items:center;gap:10px;margin-top:8px}
/* Linke Zone: der Ring und darunter der Name der Muskelgruppe, deren Erholung
er zeigt. Ohne den Namen wäre die Zahl ein Wert ohne Bezug. */
.aic-left{display:flex;flex-direction:column;align-items:center;gap:5px;flex-shrink:0}
.aic-r-lbl{max-width:76px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;
font-size:10.5px;font-weight:800;color:var(--text2);letter-spacing:-.1px}
/* Der Satz vom Coach: dieselbe Sprechblase wie im Hub (abgeknickte untere
linke Ecke), getönt statt neutral, weil er auf der Akzentfläche der Karte
liegt. Keine neue Farbe — --acc-rgb wie die Karte selbst. */
.aic-say{font-size:11.8px;line-height:1.38;color:var(--text);font-weight:650;margin-top:8px;
padding:7px 10px;border-radius:12px;border-bottom-left-radius:5px;
background:rgba(var(--acc-rgb),.10);border:1px solid rgba(var(--acc-rgb),.20)}
/* Hell: die getoente Blase auf getoenter Karte war zweimal dieselbe Farbe
uebereinander — die Blase verschwand. Sie wird deshalb HELLER als die Karte
statt farbiger, und der Rand kommt aus der Tinte. Genau die Rollenverteilung
wie im Dunkeln, nur mit umgekehrtem Vorzeichen. */
[data-theme="light"] .aic-say,[data-theme="rosa"] .aic-say,
[data-theme="blau"] .aic-say,[data-theme="grün"] .aic-say{
background:rgba(255,255,255,.52);border-color:rgba(var(--acc-ink),.11)}
/* --text2 ist fuer den neutralen Kartengrund gebaut; auf der getoenten
Coach-Flaeche kam die Zeile in rosa nur noch auf 3,54:1 und riss damit die
4,5:1 fuer 12-px-Text. Etwas satter, Farbe bleibt dieselbe. */
[data-theme="light"] .aic .aic-sub,[data-theme="rosa"] .aic .aic-sub,
[data-theme="blau"] .aic .aic-sub,[data-theme="grün"] .aic .aic-sub{
color:rgba(45,45,58,.82)}
/* 62 px ist KEIN Zierwert: das SVG im Ring traegt feste Maße und skaliert nicht
mit der Box. Kleiner gesetzt, ragt der Ring heraus und legt sich ueber den
Text (gemessen bei 44 px: 'Legs' verschwand unter dem Bogen). Die Karte wird
ueber Abstaende und Schriftgrade kleiner, nicht ueber diese Zahl. */
.aic-ringbox{position:relative;width:62px;height:62px;flex-shrink:0;overflow:visible}
.aic-ringbox svg{overflow:visible}
/* Coach-Ring — exakt dieselbe Dreiteilung wie bei den Wochenziel-Ringen
(siehe .tracker-ring-glow): weite Wolke, sattes Glimmen an der Linie,
scharfer Bogen mit hellem Verlauf. Ohne Bewegung, wie die Vorlage. */
/* Weite des Scheins ueber gestapelte drop-shadows statt ueber einen breiten
Blur — Begruendung bei .tracker-ring-glow. */
/* Kein CSS-filter: der Schein kommt aus dem SVG-Filter im Markup, weil die
Filterregion sonst bei zehn Prozent abschneidet — ausfuehrlich begruendet
bei .tracker-ring-glow. */
/* Deckkraft wie bei den Wochenziel-Ringen aus dem zentralen Dimmer — sonst
leuchtet die Coach-Karte staerker als alles daneben. */
.aic-r-glow{
fill:none;stroke-width:4;stroke-linecap:round;
transform:rotate(-90deg);transform-origin:50% 50%;
opacity:var(--neon);
}
.aic-r-halo{
fill:none;stroke-width:5;stroke-linecap:round;
transform:rotate(-90deg);transform-origin:50% 50%;
filter:blur(2px);opacity:calc(.55 + .45 * var(--neon));
}
/* Die Spur fast unsichtbar — in der Vorlage steht der Bogen frei auf der
dunklen Flaeche; eine getoente Spur legt sich als matte Linie daneben. */
.aic-r-bg{fill:none;stroke:var(--ng-well-bdr);stroke-width:4.5}
.aic-r-fg{fill:none;stroke-width:5;stroke-linecap:round;transform:rotate(-90deg);transform-origin:32px 32px}
.aic-r-val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
white-space:nowrap;font-size:15px;font-weight:900;letter-spacing:-.3px}
.aic-r-val span{font-size:9px;font-weight:800;opacity:.75;margin-left:1px}
.aic-txt{flex:1;min-width:0}
.aic-head{font-size:14.5px;font-weight:900;line-height:1.18;color:var(--text);letter-spacing:-.35px}
.aic-sub{font-size:12.2px;line-height:1.4;color:var(--text2);margin-top:3px;font-weight:600}
.aic-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.aic-chip{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.2px;
padding:4px 9px;border-radius:999px;color:var(--acc);
background:rgba(var(--acc-rgb),.13);border:1px solid rgba(var(--acc-rgb),.26)}
.aic-chip.ghost{color:var(--text2);background:rgba(127,127,127,.10);border-color:var(--gl-bdr)}
.aic-btns{display:flex;gap:8px;margin-top:10px}
.aic-go{flex:1;border:none;border-radius:13px;padding:11px 12px;font-family:inherit;font-size:13.5px;font-weight:800;
color:#fff;cursor:pointer;background:linear-gradient(135deg,var(--acc),rgba(var(--acc-rgb),.74));
box-shadow:0 7px 20px rgba(var(--acc-rgb),.34);transition:transform .12s ease,box-shadow .12s ease}
.aic-go:active{transform:scale(.975);box-shadow:0 4px 12px rgba(var(--acc-rgb),.28)}
.aic-later{border:1px solid var(--gl-bdr);border-radius:13px;padding:11px 14px;font-family:inherit;
font-size:13px;font-weight:700;color:var(--text2);background:rgba(127,127,127,.08);cursor:pointer}
/* ── NEON: Splits im Training-Tab ───────────────────────────────────
Aktiv, solange gesetzt ist — das setzt beim Start
_applyNeonSplits(), und zwar per Default AN; nur setNeonSplits(false)
(localStorage 'gt_neon' = '0') schaltet es ab. Bis 01.08.2026 hing das
Attribut allein am Demo-Seed, im Store-Build fehlte das Neon deshalb.
Ganz raus = diesen Block loeschen plus setNeonSplits()/_applyNeonSplits()
in js/app-plans.js und den Aufruf in js/app-boot.js.
Der Schein zieht seine Farbe aus --sc, der Split-Farbe der Karte. */
/* Wochen-Rail bewusst schwaecher als die Split-Karten unten: die Tageskarten stehen
dicht nebeneinander, da summiert sich der volle Schein zu einem Farbteppich. */
html[data-neon="1"] .wk-cell.assigned{
border-color:var(--sc,var(--acc));
box-shadow:0 0 6px -3px var(--sc,var(--acc)), inset 0 0 10px -7px var(--sc,var(--acc));
}
/* Der Heute-Ring lag als box-shadow auf .wk-cell.today (Z. 824) und wurde von
der Regel darueber ueberschrieben, sobald an dem Tag ein Split steht — also
genau dann, wenn man ihn braucht. Hier kommt er zurueck, zusammen mit dem
Schein statt an seiner Stelle. */
html[data-neon="1"] .wk-cell.assigned.today{
box-shadow:0 0 0 1.5px rgba(var(--acc-rgb),.55),
0 0 6px -3px var(--sc,var(--acc)), inset 0 0 10px -7px var(--sc,var(--acc));
}
html[data-neon="1"] .wk-cell.assigned .wk-cell-l{ text-shadow:0 0 4px rgba(0,0,0,.35) }
html[data-neon="1"] .split-card{
border-color:var(--sc,var(--acc));
box-shadow:0 0 8px -4px var(--sc,var(--acc));
}
html[data-neon="1"] .split-card::before{ box-shadow:0 0 6px 0 var(--sc,var(--acc)) }
/* ── Derselbe Schein auf hellem Grund ────────────────────────────────────
Gemessen war der Hof hier nicht schwach, sondern VERKEHRT: 20 px ueber der
Kante stieg der Blaukanal auf Dunkel um +66 % (Licht kommt dazu), auf Hell
fiel er um 11 % — ein grauer Schmutzrand um die Karte. Ein Hof kann auf
Weiss nichts aufhellen, er kann nur truebem.
Also dieselbe Loesung wie ueberall sonst in der App: Kontaktkante
(--neon-edge) statt Hof, und der verbleibende enge Schein nimmt die
geklemmte Farbe (--sc-ink), damit er als Farbe liest und nicht als Grau.
Der dunkle Textschatten faellt weg — er sass auf hellem Grund als Schmutz
unter der Schrift. */
html[data-neon="1"][data-theme="light"] .wk-cell.assigned,html[data-neon="1"][data-theme="rosa"] .wk-cell.assigned,
html[data-neon="1"][data-theme="blau"] .wk-cell.assigned,html[data-neon="1"][data-theme="grün"] .wk-cell.assigned{
border-color:var(--sc-ink,var(--sc,var(--acc)));
box-shadow:var(--neon-edge), 0 0 10px -6px var(--sc-ink,var(--sc,var(--acc)));
}
html[data-neon="1"][data-theme="light"] .wk-cell.assigned.today,html[data-neon="1"][data-theme="rosa"] .wk-cell.assigned.today,
html[data-neon="1"][data-theme="blau"] .wk-cell.assigned.today,html[data-neon="1"][data-theme="grün"] .wk-cell.assigned.today{
box-shadow:0 0 0 1.5px rgba(var(--acc-rgb),.55), var(--neon-edge),
0 0 10px -6px var(--sc-ink,var(--sc,var(--acc)));
}
html[data-neon="1"][data-theme="light"] .wk-cell.assigned .wk-cell-l,html[data-neon="1"][data-theme="rosa"] .wk-cell.assigned .wk-cell-l,
html[data-neon="1"][data-theme="blau"] .wk-cell.assigned .wk-cell-l,html[data-neon="1"][data-theme="grün"] .wk-cell.assigned .wk-cell-l{
text-shadow:none}
html[data-neon="1"][data-theme="light"] .split-card,html[data-neon="1"][data-theme="rosa"] .split-card,
html[data-neon="1"][data-theme="blau"] .split-card,html[data-neon="1"][data-theme="grün"] .split-card{
box-shadow:var(--neon-edge), 0 0 10px -6px var(--sc,var(--acc));
}
/* Luft fuer den Pluspol, der per right:-5px ausserhalb der Huelle sitzt. */
.rec-row .rec-batt{ margin-right:7px }
/* Die Strichreihe bekommt eine eigene abgerundete Maske: was darueber
hinausgeht (auch der Glow), wird beschnitten, der Rahmen bleibt frei.
Radius = Innenrundung der Huelle (7px aussen minus 2px Rahmen) minus dem
2px-Inset, sonst stossen die Ecken der Randstriche in den Bogen. */
.rec-batt .segbar.segbar-batt{ overflow:hidden;border-radius:3px;inset:2px }