Mehr Energie.Mehr Belastbarkeit.Mehr Du.
Hell, ruhig, präzise. Kupfer als feiner metallischer Akzent. Effekte, die knallen, ohne laut zu sein.
Belastbarkeit
Du
Kupfer als Folie
Auf hell wirkt Kupfer am edelsten, wenn es sparsam und metallisch bleibt. Großflächig kippt es ins Plastik-Gold. Deshalb: viel Weiß, wenig Kupfer, immer mit Glanz statt flacher Füllung.
Kupfer — nur für Akzente
Helle Welt
Leicht, mit elegantem Akzent
Hierarchie über Größe und Luft, nicht über Fettdruck. Hanken Grotesk 300 bis 500. Für besondere Worte ein dünner Serif-Kursiv in Kupfer.
Knöpfe mit feinem Glanz
Drei Stufen Lautstärke. Der Primär-Button hat einen Shimmer, der alle 5 Sekunden einmal durchläuft, plus Hover-Lift. Premium heißt: man spürt es, ohne dass es schreit.
.btn-primary{ color:#fff; background:var(--grad-soft); position:relative; overflow:hidden;
box-shadow:0 14px 34px -18px rgba(181,100,46,.7); }
.btn-primary::before{ content:""; position:absolute; inset:0; z-index:-1;
background:linear-gradient(120deg,transparent 38%,rgba(255,255,255,.5) 50%,transparent 62%);
transform:translateX(-130%) skewX(-18deg); animation:autoshim 5.5s ease-in-out infinite; }
@keyframes autoshim{ 0%,62%{ transform:translateX(-130%) skewX(-18deg); }
82%,100%{ transform:translateX(130%) skewX(-18deg); } }
.btn-primary:hover{ transform:translateY(-2px); }Effekte, die knallen
Sieben Bewegungen, sparsam eingesetzt. Niedrige Deckkraft, langsames Tempo, ein Akzentton. Genau das macht den Premium-Eindruck. Fahr mit der Maus über die Kacheln.
= PremiumRestraint
/* Spotlight — Kupfer-Schein folgt dem Cursor (der Wow-Effekt) */
.spot::after{ content:""; position:absolute; inset:0; opacity:0; pointer-events:none;
transition:opacity .45s; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),
rgba(208,138,78,.18), transparent 62%); }
.spot:hover::after{ opacity:1; }
// JS: el.style.setProperty('--mx', x+'px'); '--my', y+'px' bei mousemove
/* Laufender Metallrand — dünn, langsam, edel */
.gbox::before{ content:""; position:absolute; inset:0; border-radius:inherit; padding:1.5px;
background:var(--grad-metal); background-size:240% 100%;
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; animation:sheenmove 4.5s linear infinite; }
/* Sheen-Text — Glanz wandert langsam durch das Kupferwort */
.sheen{ background:var(--grad-metal); background-size:240% 100%;
-webkit-background-clip:text; color:transparent; animation:sheenmove 7s linear infinite; }
@keyframes sheenmove{ 0%{ background-position:0 0; } 100%{ background-position:240% 0; } }
/* Draw-Line — die Signatur zieht beim Sichtbarwerden auf */
.draw{ transform:scaleX(0); transform-origin:left; transition:transform 1s var(--ease); }
.draw.in{ transform:scaleX(1); } /* .in per IntersectionObserver setzen */Bausteine im Einsatz
Service-Karten mit Lift, Spotlight und aufziehender Kupferlinie. Leistungsbalken und Zahlen, die beim Scrollen hochzählen. So sieht das System auf der echten Seite aus.
Stoffwechsel Restart
Für Menschen, die sich endlich wohlfühlen wollen. 6 Wochen, die dein Leben verändern.
zu deinem Restart →Personal Training
Für Unternehmer, Führungskräfte und alle mit wenig Zeit und großer Verantwortung.
mehr erfahren →Leistungsdiagnostik
Für ambitionierte Sportler, die hoch hinaus wollen. Dein nächstes Level beginnt hier.
besser werden →Leistungs-Balken · scroll-reveal
Fabien überzeugt mit Fachwissen, Motivation und einem individuell angepassten Konzept. Man merkt sofort, dass echtes Know-how auf Leidenschaft trifft.
Kunde
Fabien Mpouma
Sportwissenschaftler, Coach, Wahlsiegburger und Familienvater. Seit über 15 Jahren Unternehmer.
Preise — Flip-Box: vorn der Preis, hinten dein Ergebnis
Restart
6-Wochen-Programm für Stoffwechsel und Energie.
- Stoffwechsel wieder in Gang
- Tiefer, erholsamer Schlaf
- Mehr Leichtigkeit im Alltag
1:1 Coaching
Persönliches Training, individuell getaktet.
- Training, das in dein Leben passt
- Sichtbar mehr Kraft und Form
- Ein Coach, der dranbleibt
Diagnostik
Messen, verstehen, gezielt besser werden.
- Deine echten Leistungswerte
- Klare Trainingszonen
- Fortschritt schwarz auf weiß
Bild-Effekte
Sechs Wege, wie Fotos beim Drueberfahren leben. Standard fuer alle Bilder ist der sanfte Zoom. Such aus, was zu welcher Stelle passt — mit der Maus drueber (am Handy: tippen wirkt nur bei den drehbaren Karten, Bild-Effekte sind fuers Desktop-Hover gedacht).
/* Wrapper um jedes Bild, dann eine Effekt-Klasse dazu */
.imgfx{ position:relative; overflow:hidden; border-radius:14px; }
.imgfx-img{ position:absolute; inset:0; background-size:cover;
transition:transform .65s ease, filter .65s ease; }
/* Zoom — Standard fuer alle Bilder */
.fx-zoom:hover .imgfx-img{ transform:scale(1.07); }
/* Kupfer-Duotone, wird bei Hover farbig */
.fx-duo .imgfx-img{ filter:grayscale(1) contrast(1.04); }
.fx-duo::before{ content:""; position:absolute; inset:0; background:var(--cu-core);
mix-blend-mode:soft-light; opacity:.55; transition:opacity .6s; }
.fx-duo:hover .imgfx-img{ filter:none; }
.fx-duo:hover::before{ opacity:0; }
/* Glanz-Sweep — Lichtstreifen laeuft bei Hover durch */
.fx-shine::after{ content:""; position:absolute; top:-40%; left:-65%;
width:45%; height:180%; transform:skewX(-18deg); transition:left .85s ease;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); }
.fx-shine:hover::after{ left:130%; }Token-Block zum Mitnehmen
Einmal oben ins Stylesheet pasten, dann nur noch diese Variablen nutzen. Nie Hex-Werte direkt eintippen.
:root{
/* Kupfer — nur fuer Akzente */
--cu-sheen:#E8C49A; --cu-bright:#D08A4E; --cu-core:#B5642E; --cu-deep:#8A4218;
/* Helle Welt */
--bg:#F8F6F2; --paper:#FFFFFF; --panel:#FAF8F3;
--ink:#211C17; --ink-2:#4A423A; --mut:#837868; --line:#E7E1D8;
/* Verlaeufe */
--grad-metal:linear-gradient(120deg,#8A4218,#B5642E,#D08A4E,#E8C49A,#D08A4E,#B5642E,#8A4218);
--grad-soft:linear-gradient(120deg,#B5642E 0%,#D08A4E 60%,#E8C49A 100%);
--grad-btn:linear-gradient(135deg,#9E4F20 0%,#793810 100%); /* Buttons + Text: bleibt lesbar */
}
/* Schriften — Gewichte 300 bis 500, nie schwerer */
Display: Hanken Grotesk 300/400/500
Akzent: Instrument Serif italic (Kupfer, sparsam)
Daten: JetBrains Mono 500 · uppercase
/* Font: family=Hanken+Grotesk:wght@300;400;500;600
&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500 */Goldene Regeln
Wer das beachtet, bleibt automatisch im Premium-Look.
