/* AUREON Geldstapel — 05.09.2026 Mert: "Da, wo Du schreibst dreissig Prozent, fuenfundvierzig Prozent, sechzig Prozent, macht da so eine Animation rein daneben, dass so Geld angezeigt wird. Bei dreissig Prozent nicht so viel Geld, bei fuenfundvierzig mehr, bei sechzig noch mehr. Aber so von null auf hundert Animationen. Und passend, das darf nicht unprofessionell aussehen." WARUM SO UND NICHT ANDERS Muenzstapel statt Muenz-Emoji, Geldsack oder Dollarzeichen: In Merts 21st.dev-Lesezeichen steht durchgehend dieselbe Sprache — "Stats Bento", "Conversion Funnel Area Chart", "Circular Progress", "Slot Text". Alles flaechige, geometrische Datengrafik mit ruhiger Bewegung, nichts Gezeichnetes und nichts Verspieltes. Drei Stapel aus flachen Scheiben treffen diese Sprache und sind trotzdem auf den ersten Blick Geld. Die Scheibe ist bewusst flach (5 px) und nur leicht angehoben: ein Innenlicht oben, ein weicher Schatten unten. Keine Ellipsen, keine Verlaeufe ueber mehrere Farben, kein Gold auf einer lila Seite — die Farbe kommt aus `--geld-farbe` und ist damit immer die Akzentfarbe der jeweiligen Seite (Regel: 2-3 Hauptfarben plus EINE Akzentfarbe). Die Stapel zeigen, wie viel AUREON uebernimmt — nicht, was jemand verdient. Direkt darunter steht weiterhin "Normaler / Hoeherer / Voller Betreuungsaufwand". Ein Verdienstversprechen waere weder erlaubt noch gewollt (siehe Vertrag). MERTS REGEL "Animationen nur, wenn jemand hinsieht" (23.08.2026) ist eingebaut: der Lauf startet erst im Bild und laeuft genau einmal. */ .geld{ /* Alle Masse als Stellschrauben, damit jede Seite den Stapel auf ihren Platz einstellen kann, ohne die Regeln zu kopieren. In der schmalen Modellkarte (178 px Inhalt) waere die Grundgroesse zu breit gewesen - der Stapel wurde vom `overflow:hidden` der Karte abgeschnitten. */ --geld-breite:22px; --geld-hoehe:5px; --geld-luft:3px; --geld-spalt:6px; display:inline-flex; align-items:flex-end; gap:var(--geld-spalt); flex:0 1 auto; line-height:0; /* keine Zeilenluft unter den Stapeln */ } .geld__saeule{ display:flex; flex-direction:column-reverse; gap:var(--geld-luft); /* Eine feine Standlinie unter jeder Saeule. Ohne Bezug wirken drei Stapel verschiedener Hoehe erstaunlich gleich - die Linie gibt dem Auge die Null, gegen die es misst. Sie liegt hinter den Muenzen und traegt nur ein Achtel Deckkraft, damit sie nicht mitzaehlt. */ position:relative; } .geld__saeule::after{ content:''; position:absolute; left:-1px; right:-1px; bottom:-3px; height:1px; background:var(--geld-farbe, currentColor); opacity:.28; border-radius:1px; } /* Ein einziges Eurozeichen macht aus drei Balken sofort Geld - ohne Muenzbild, ohne Emoji, ohne Geldsack. Es steht unten an der Grundlinie der Stapel und tritt als Erstes auf. */ .geld__euro{ align-self:flex-end; margin-right:1px; line-height:1; font:800 13px/1 'Bricolage Grotesque','Manrope',system-ui,sans-serif; color:var(--geld-farbe, currentColor); opacity:.9; } .geld--klein .geld__euro{ font-size:11px } .geld__muenze{ display:block; width:var(--geld-breite); height:var(--geld-hoehe); border-radius:3px; background:var(--geld-farbe, currentColor); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.32); /* 05.09.2026 - der Stapel wird nach oben kraeftiger. Drei gleich helle Balken sind drei Balken. Ein Stapel, der unten ruhig traegt und oben aufhellt, liest sich als Pegel - man sieht die Menge, nicht nur die Hoehe. `--anteil` kommt fertig aus dem Skript (0 unten, 1 oben) und ist unabhaengig davon, wie hoch die Saeule ist. */ opacity:calc(.68 + .32 * var(--anteil, 1)); } /* Die oberste Muenze jeder Saeule bekommt eine feine Lichtkante - der Abschluss, an dem das Auge die Hoehe abliest. */ .geld__muenze[data-oben="1"]{ box-shadow:inset 0 1px 0 rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.4); } /* Der Ausgangszustand wird erst gesetzt, wenn die Stapel wirklich gebaut sind. Bricht das Skript vorher ab, steht der Stapel einfach da - er verschwindet nie. */ .geld[data-bereit="1"] .geld__muenze, .geld[data-bereit="1"] .geld__euro{ opacity:0; transform:translateY(7px) scaleY(.35); transform-origin:bottom; } .geld[data-bereit="1"] .geld__euro{ transform:translateY(5px) scale(.7) } .geld[data-bereit="1"][data-an="1"] .geld__muenze, .geld[data-bereit="1"][data-an="1"] .geld__euro{ opacity:1; transform:none; /* Der Takt ist nicht mehr fest: das Skript setzt `--geld-takt` nach der Zahl der Muenzen. Der kleine Stapel ist schnell durch, der grosse braucht spuerbar laenger - "mehr" wird damit auch zu Zeit, nicht nur zu Hoehe. */ transition:opacity .34s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * var(--geld-takt, 32ms)), transform .42s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * var(--geld-takt, 32ms)); } .geld[data-bereit="1"][data-an="1"] .geld__euro{ opacity:.9 } /* 06.09.2026 - Mert: "Die Animation soll die ganze Zeit passieren, wenn man mit dem Auge draufschaut ... wenn man hin scrollt, soll es nochmal animieren." Der Ruecklauf zwischen zwei Durchgaengen: Ohne eigene Regel faellt der Stapel in den Grundzustand zurueck, und der hat keine Uebergangszeit - die Muenzen waeren schlagartig weg. Hier sinkt der Stapel in EINEM Zug zusammen, nicht Muenze fuer Muenze: der Rueckweg ist kein zweiter Auftritt, er soll nur schnell aus dem Weg. */ .geld[data-bereit="1"][data-an="aus"] .geld__muenze, .geld[data-bereit="1"][data-an="aus"] .geld__euro{ transition:opacity .2s ease, transform .3s cubic-bezier(.4,0,1,1); } /* Kleine Fassung fuer Fliesstext und Listenzeilen. */ .geld--klein{ --geld-breite:15px; --geld-hoehe:4px; --geld-luft:2px; --geld-spalt:4px; } .geld--klein .geld__muenze{ border-radius:2px; } @media (prefers-reduced-motion:reduce){ .geld[data-bereit="1"] .geld__muenze, .geld[data-bereit="1"] .geld__euro{ opacity:1; transform:none } .geld[data-bereit="1"][data-an="1"] .geld__muenze, .geld[data-bereit="1"][data-an="1"] .geld__euro{ transition:none } } @media print{ .geld{ display:none !important } }