Bausteine zum Gliedern und Aufladen ganzer Sektionen — Handlungsaufruf-Bänder,
leuchtende Schnitte, weiche Farbübergänge, zählende Kennzahlen und Vertrauens-Elemente.
Akzentfarbe über --akzent in einer Zeile anpassbar.
CTA-Band (dunkel / invertiert)
Pol 1 · CraftAnlass: Primary-CTA am Seitenende
Dunkles, vom Rest der Seite abgesetztes Band mit Aussage links und Knopf rechts; per Flexbox bricht es am Handy sauber untereinander. Vorbild: Bernstein.
Bereit für Ihr Projekt?
Unverbindliche Beratung — Antwort meist am selben Werktag.
<div class="fx-ctaband">
<div class="fx-ctaband__txt">
<h3>Bereit für Ihr Projekt?</h3>
<p>Unverbindliche Beratung — Antwort meist am selben Werktag.</p>
</div>
<a href="#" class="fx-ctaband__btn">Termin anfragen</a>
</div>
<style>
.fx-ctaband{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
width:100%;max-width:560px;padding:32px 36px;border-radius:14px;color:#f4f4f5;
background:linear-gradient(135deg,#17171b,#0d0d10);border:1px solid #26262c;
box-shadow:0 18px 40px rgba(0,0,0,.35)}
.fx-ctaband__txt h3{margin:0 0 .25rem;font-size:1.3rem;letter-spacing:-.01em}
.fx-ctaband__txt p{margin:0;color:#a1a1aa;font-size:.92rem;max-width:340px}
.fx-ctaband__btn{flex:0 0 auto;padding:.7rem 1.3rem;border-radius:99px;font-size:.9rem;font-weight:600;
color:#0d0d10;background:var(--akzent, #7c87ff);border:0;cursor:pointer;text-decoration:none;
transition:transform .25s cubic-bezier(.4,0,.2,1),box-shadow .25s ease}
.fx-ctaband__btn:hover,.fx-ctaband__btn:focus-visible{transform:translateY(-2px);box-shadow:0 8px 22px rgba(124,135,255,.4)}
@media (prefers-reduced-motion:reduce){.fx-ctaband__btn{transition:none}.fx-ctaband__btn:hover{transform:none}}
</style>
Akzent-Trennlinie mit Glow + Sektions-Top-Strich
Pol 2 · KlarheitAnlass: Sektions-Schnitt / dezenter Auftakt
Zwei Schnitt-Varianten: eine leuchtende Vollbreit-Linie als harter Trenner und ein mittiger, beidseitig auslaufender Strich als leiser Sektions-Beginn. Vorbild: Hauszeit, Silver Mountain.
Pol 2 · KlarheitAnlass: Übergang zwischen zwei Flächen
Die Hintergrundfarbe der oberen Sektion blendet über rund 140 px weich in die Farbe der nächsten — kein harter Kanten-Sprung. Reiner linear-gradient, ohne Extra-Element. Vorbild: Hauszeit, Nördlicht.
Voll konfigurierbare Zähl-Zahl: zählt mit Ease-Out hoch, sobald sie ins Bild scrollt (IntersectionObserver), startet bei erneutem Eintritt neu. Optionen je Wert über data-Attribute: data-count (Ziel), data-from (Startwert ≠ 0), data-decimals (Nachkommastellen), data-sep/data-thousand (Dezimal-/Tausender-Trenner — Standard deutsch: 1.300 · 4,9), data-pad (führende Nullen), data-prefix/data-suffix, data-delay (ms Verzögerung). Bei reduzierter Bewegung sofort der Endwert. Vorbild: animate-ui CountingNumber; Silver Mountain, NDS.
0
Projekte
0
Weiterempfehlung
0
Bewertung
<div class="fx-stats">
<div class="fx-stat">
<div class="fx-stat__num" data-count="1300">0</div>
<div class="fx-stat__lbl">Projekte</div>
</div>
<div class="fx-stat">
<div class="fx-stat__num" data-count="98" data-suffix="%">0</div>
<div class="fx-stat__lbl">Weiterempfehlung</div>
</div>
<div class="fx-stat">
<div class="fx-stat__num" data-count="4.9" data-from="3" data-decimals="1">0</div>
<div class="fx-stat__lbl">Bewertung</div>
</div>
</div>
<style>
.fx-stats{display:flex;gap:48px;flex-wrap:wrap;justify-content:center}
.fx-stat{text-align:center}
.fx-stat__num{font-size:clamp(2.2rem,5vw,3rem);font-weight:700;line-height:1;
color:var(--akzent, #7c87ff);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fx-stat__lbl{margin-top:.5rem;font-size:.72rem;font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:#a1a1aa}
</style>
<script>
(function(){
var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;
var easeOut=function(t){return 1-Math.pow(1-t,4);};
function fmt(v,o){
var neg=v<0;v=Math.abs(v);
var parts=v.toFixed(o.dec).split('.');var ip=parts[0];
if(o.pad)while(ip.length<o.pad)ip='0'+ip;
ip=ip.replace(/\B(?=(\d{3})+(?!\d))/g,o.th);
return (neg?'-':'')+ip+(o.dec>0?o.sep+parts[1]:'');
}
function run(el){
var d=el.dataset,target=parseFloat(d.count),from=parseFloat(d.from||'0');
var o={dec:parseInt(d.decimals||'0',10),sep:d.sep||',',th:(d.thousand!==undefined?d.thousand:'.'),pad:parseInt(d.pad||'0',10)};
var pre=d.prefix||'',suf=d.suffix||'',delay=parseInt(d.delay||'0',10);
var token={};el._anim=token;el.textContent=pre+fmt(from,o)+suf;
if(reduce){el.textContent=pre+fmt(target,o)+suf;return;}
setTimeout(function(){
if(el._anim!==token)return;
var t0=performance.now(),dur=1800;
(function tick(now){
if(el._anim!==token)return;
var p=Math.min((now-t0)/dur,1);
el.textContent=pre+fmt(from+(target-from)*easeOut(p),o)+suf;
if(p<1)requestAnimationFrame(tick);else el.textContent=pre+fmt(target,o)+suf;
})(performance.now());
},delay);
}
var nums=document.querySelectorAll('.fx-stat__num');
if('IntersectionObserver'in window){
var io=new IntersectionObserver(function(es){es.forEach(function(e){if(e.isIntersecting)run(e.target);});},{threshold:.5});
nums.forEach(function(n){io.observe(n);});
}else{nums.forEach(run);}
})();
</script>
Process-Stepper
Pol 2 · KlarheitAnlass: Ablauf / „So läuft es ab"
Nummerierte Schritte mit durchgehender Verbindungslinie zwischen den Kreisen (per ::before, exakt zwischen den Punkten beschnitten). Kreis hebt sich bei Hover und Tastatur-Fokus leicht an. Vorbild: NDS.
1
Anfrage
Kurz das Anliegen schildern.
2
Termin
Vor-Ort-Aufnahme planen.
3
Angebot
Festpreis transparent.
4
Umsetzung
Saubere Ausführung.
<div class="fx-stepper">
<div class="fx-step" tabindex="0">
<div class="fx-step__dot">1</div>
<h4>Anfrage</h4><p>Kurz das Anliegen schildern.</p>
</div>
<div class="fx-step" tabindex="0">
<div class="fx-step__dot">2</div>
<h4>Termin</h4><p>Vor-Ort-Aufnahme planen.</p>
</div>
<div class="fx-step" tabindex="0">
<div class="fx-step__dot">3</div>
<h4>Angebot</h4><p>Festpreis transparent.</p>
</div>
<div class="fx-step" tabindex="0">
<div class="fx-step__dot">4</div>
<h4>Umsetzung</h4><p>Saubere Ausführung.</p>
</div>
</div>
<style>
.fx-stepper{display:flex;width:100%;max-width:520px;justify-content:space-between;position:relative}
.fx-step{flex:1;text-align:center;position:relative;padding:0 6px}
/* durchgehende Linie nur ZWISCHEN den Kreisen, mit Abstand zu beiden */
.fx-step + .fx-step::before{content:"";position:absolute;top:23px;height:2px;
left:calc(-50% + 30px);right:calc(50% + 30px);background:#26262c}
.fx-step__dot{width:46px;height:46px;margin:0 auto 14px;border-radius:50%;
display:grid;place-items:center;position:relative;z-index:1;font-weight:700;font-size:.95rem;
color:var(--akzent, #7c87ff);background:#16161a;border:1px solid #2a2a33;
transition:transform .25s ease,border-color .25s ease}
.fx-step:hover .fx-step__dot,.fx-step:focus-within .fx-step__dot{transform:translateY(-3px);border-color:var(--akzent, #7c87ff)}
.fx-step h4{margin:0 0 .25rem;font-size:.9rem;color:#e9e9ee}
.fx-step p{margin:0;font-size:.76rem;color:#a1a1aa;line-height:1.5}
@media (prefers-reduced-motion:reduce){.fx-step__dot{transition:none}.fx-step:hover .fx-step__dot{transform:none}}
</style>
Motto- / Quote-Block
Pol 1 · CraftAnlass: Leitsatz / Kundenzitat
Zentriertes Zitat in Serif-Italic mit großem dekorativem Anführungszeichen als ::before dahinter. Setzt eine ruhige, emotionale Atempause zwischen zwei Sektionen. Vorbild: Nördlicht.
Gut gemacht ist besser als schnell versprochen.
Unser Leitsatz
<figure class="fx-quote">
<p>Gut gemacht ist besser als schnell versprochen.</p>
<cite>Unser Leitsatz</cite>
</figure>
<style>
.fx-quote{position:relative;max-width:480px;padding:40px 24px 18px;text-align:center}
.fx-quote::before{content:"\201C";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
font-family:Georgia,"Times New Roman",serif;font-size:120px;line-height:1;font-weight:700;
color:var(--akzent, #7c87ff);opacity:.22}
.fx-quote p{position:relative;z-index:1;margin:0;font-family:Georgia,"Times New Roman",serif;
font-style:italic;font-size:clamp(1.2rem,3vw,1.6rem);font-weight:500;color:#f4f4f5;line-height:1.4}
.fx-quote cite{display:block;margin-top:14px;font-style:normal;font-size:.72rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--akzent, #7c87ff)}
</style>
Trust-Leiste (kompakt)
Pol 2 · KlarheitAnlass: Vertrauens-Band unter Hero
Schmales Band aus Icon-Text-Paaren mit Linie oben und unten — vermittelt in einer Zeile die wichtigsten Vertrauens-Signale. Vorbild: NDS.
Pol 2 · KlarheitAnlass: hervorgehobene Kernaussage
Aussage-Block, der sich durch eine leichte Akzent-Tönung im Verlauf und eine farbige linke Kante vom Fließtext abhebt — ohne laut zu sein. Vorbild: Nördlicht.
Unser Versprechen
Klarheit von Anfang an
Feste Preise, ein fester Ansprechpartner und ein verbindlicher Termin —
damit Sie jederzeit wissen, woran Sie sind.
<div class="fx-claim">
<span class="fx-claim__ey">Unser Versprechen</span>
<h3>Klarheit von Anfang an</h3>
<p>Feste Preise, ein fester Ansprechpartner und ein <strong>verbindlicher Termin</strong> —
damit Sie jederzeit wissen, woran Sie sind.</p>
</div>
<style>
.fx-claim{position:relative;width:100%;max-width:480px;padding:28px 30px;border-radius:12px;
border-left:3px solid var(--akzent, #7c87ff);
background:linear-gradient(135deg,rgba(124,135,255,.10),rgba(124,135,255,.02))}
.fx-claim__ey{display:inline-block;margin-bottom:8px;font-size:.7rem;font-weight:700;
letter-spacing:.12em;text-transform:uppercase;color:var(--akzent, #7c87ff)}
.fx-claim h3{margin:0 0 .5rem;font-size:1.25rem;color:#f4f4f5}
.fx-claim p{margin:0;color:#a1a1aa;font-size:.9rem;line-height:1.7}
.fx-claim strong{color:#e9e9ee}
</style>
Logo-Watermark hinter Sektion
Pol 1 · CraftAnlass: Über-uns / Marken-Tiefe
Großes, weichgezeichnetes Marken-SVG mit niedriger Opazität als ::after hinter dem Inhalt — gibt der Fläche Tiefe, ohne den Text zu stören. Hier als generisches Inline-SVG (Berg-Marke) angedeutet. Vorbild: Silver Mountain.
Über uns
Ein Familienbetrieb mit Anspruch — die Marke schwebt als ruhiger Schatten im Hintergrund.
<div class="fx-mark">
<div class="fx-mark__inner">
<h4>Über uns</h4>
<p>Ein Familienbetrieb mit Anspruch — die Marke schwebt als ruhiger Schatten im Hintergrund.</p>
</div>
</div>
<style>
.fx-mark{position:relative;width:100%;max-width:460px;padding:46px 30px;border-radius:12px;
overflow:hidden;border:1px solid #26262c;background:#16161a}
/* großes, weiches Marken-SVG als Tiefe – im Projekt eigenes Logo einsetzen */
.fx-mark::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.10;filter:blur(3px);
background-repeat:no-repeat;background-position:center;background-size:clamp(280px,70%,460px);
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M10 78 L38 26 L52 54 L64 34 L90 78 Z' fill='none' stroke='%237c87ff' stroke-width='5' stroke-linejoin='round'/></svg>")}
.fx-mark__inner{position:relative;z-index:1}
.fx-mark h4{margin:0 0 .4rem;font-size:1.05rem;color:#f4f4f5}
.fx-mark p{margin:0;color:#a1a1aa;font-size:.86rem;line-height:1.7;max-width:340px}
</style>
Feature-Zeile mit Icon (alternierend)
Pol 1 · CraftAnlass: Leistungen einzeln aufzählen
Gestapelte Feature-Zeilen mit Icon-Kachel; jede zweite Zeile spiegelt sich (Icon rechts, Text rechtsbündig) für ein ruhiges Zickzack. Beim Hover und Tastatur-Fokus wandert die Zeile leicht zur Icon-Seite.
Pol 2 · KlarheitAnlass: „Inklusive" / Leistungsumfang
Abgesetzter Kasten mit Eyebrow und einer Häkchen-Liste — bündelt den Leistungsumfang oder „Das ist dabei" ruhig und scanbar. Jedes Häkchen ist ein Inline-SVG in der Akzentfarbe.
Pol 2 · KlarheitAnlass: Kennzahlen in einer Leiste
Ein einzelnes umrandetes Band, in gleich breite Zellen geteilt, mit dünnen Trennlinien nur zwischen den Zellen. Statischer Gegenpol zur zählenden Statistik — bricht am Handy sauber um.
Pol 2 · KlarheitAnlass: beschrifteter Abschnitts-Wechsel
Horizontaler Trenner mit zentriertem Text-Label und leuchtendem Akzent-Punkt; die Linien laufen zu beiden Seiten sanft aus. Gliedert einen langen Inhalt in benannte Abschnitte. Anders als der auslaufende Top-Strich trägt dieser ein Wort in der Mitte.
Und so geht es weiter
<div class="fx-divlabel"><span class="fx-divlabel__dot"></span>Und so geht es weiter</div>
<style>
.fx-divlabel{display:flex;align-items:center;gap:16px;width:100%;max-width:460px;
color:#a1a1aa;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.fx-divlabel::before,.fx-divlabel::after{content:"";flex:1;height:1px;
background:linear-gradient(90deg,transparent,#26262c)}
.fx-divlabel::after{background:linear-gradient(90deg,#26262c,transparent)}
.fx-divlabel__dot{width:6px;height:6px;border-radius:50%;background:var(--akzent, #7c87ff);
box-shadow:0 0 10px 1px rgba(124,135,255,.6)}
</style>