Kategorie

Hero

Der erste Bildschirm — Leseschleier, Hintergrund-Muster, Glow, Eyebrows, Trust und Headline-Effekte. „Fotos" sind durchgehend als CSS-Verlauf angedeutet (kein externes Bild). Akzentfarbe über --akzent in einer Zeile anpassbar.

Foto-Hero mit Leseschleier — 3 Varianten

Pol 2 · Klarheit Anlass: Startseiten-Hero über Foto

Drei Wege, dunklen Text über einem Foto lesbar zu halten: A Gradient-Veil (Verlauf von einer Seite, Vorbild: Bernstein), B flacher rgba-Schleier (gleichmäßig, Vorbild: Hauszeit), C Masken-Fade (Foto blendet nach unten in die Fläche aus, kantenloser Übergang, Vorbild: NDS). Foto hier als CSS-Verlauf.

Küchenmontage

Sauber geplant, termintreu montiert.

A · Gradient-Veil

Küchenmontage

Sauber geplant, termintreu montiert.

B · Flach-Veil (rgba)

Küchenmontage

Sauber geplant, termintreu montiert.

C · Masken-Fade unten

<!-- A: Gradient-Veil · B: Flach-Veil · C: Masken-Fade (Klasse tauschen) -->
<div class="fx-hero fx-hero--grad">
  <div class="fx-hero-photo" aria-hidden="true"></div>
  <div class="fx-hero-in">
    <h4>Küchenmontage</h4>
    <p>Sauber geplant, termintreu montiert.</p>
  </div>
</div>

<style>
.fx-hero{position:relative;max-width:460px;min-height:230px;border-radius:14px;overflow:hidden;
  display:flex;align-items:flex-end;border:1px solid #26262c}
/* „Foto" als CSS-Verlauf angedeutet (im Projekt durch background:url(...) ersetzen) */
.fx-hero-photo{position:absolute;inset:0;z-index:0;
  background:radial-gradient(120% 90% at 78% 18%,#3a3a52 0%,#272736 42%,#16161a 100%)}
.fx-hero-in{position:relative;z-index:2;padding:1.4rem 1.6rem;color:#f4f4f5}
.fx-hero-in h4{margin:0 0 .35rem;font-size:1.25rem}
.fx-hero-in p{margin:0;font-size:.86rem;color:#e9e9ee}

/* A — Gradient-Veil: Verlauf aus zwei Richtungen */
.fx-hero--grad .fx-hero-photo::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(15,15,18,.10) 0%,rgba(15,15,18,0) 30%,rgba(15,15,18,.62) 82%,#0f0f12 100%),
    linear-gradient(90deg,rgba(15,15,18,.92) 0%,rgba(15,15,18,.55) 40%,rgba(15,15,18,0) 78%)}

/* B — Flach-Veil: gleichmäßiger rgba-Schleier */
.fx-hero--flat .fx-hero-photo::after{content:"";position:absolute;inset:0;background:rgba(15,15,18,.55)}

/* C — Masken-Fade: Foto blendet nach unten aus */
.fx-hero--mask{background:#16161a}
.fx-hero--mask .fx-hero-photo{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.4) 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 64%,rgba(0,0,0,.4) 88%,transparent 100%)}
.fx-hero--mask .fx-hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,15,18,.55) 0%,rgba(15,15,18,.12) 60%,rgba(15,15,18,0) 100%)}
</style>

Hintergrund-Muster mit Radial-Maske

Pol 2 · Klarheit Anlass: ruhiger Hero-Hintergrund

Punkt-Raster (Vorbild: Bernstein) und Linien-Raster (Vorbild: Silver). Eine mask-image dünnt das Muster zu den Rändern aus, damit es nie flächig „tapeziert" wirkt. Rein CSS, kein Bild.

Punkt-Raster

Linien-Raster

<div class="fx-pat fx-pat-dots"><div class="fx-pat-layer" aria-hidden="true"></div><span>Punkt-Raster</span></div>
<div class="fx-pat fx-pat-lines"><div class="fx-pat-layer" aria-hidden="true"></div><span>Linien-Raster</span></div>

<style>
.fx-pat{position:relative;max-width:460px;min-height:200px;border-radius:14px;overflow:hidden;
  border:1px solid #26262c;background:#101014;display:grid;place-items:center}
.fx-pat-layer{position:absolute;inset:0}
/* Punkt-Raster */
.fx-pat-dots .fx-pat-layer{
  background-image:radial-gradient(circle,rgba(124,135,255,.55) 1.1px,transparent 1.6px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(125% 130% at 80% 18%,#000 0%,#000 16%,transparent 60%);
  mask-image:radial-gradient(125% 130% at 80% 18%,#000 0%,#000 16%,transparent 60%)}
/* Linien-Raster */
.fx-pat-lines .fx-pat-layer{
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:42px 42px;
  -webkit-mask-image:radial-gradient(ellipse 70% 62% at 50% 42%,#000 28%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 62% at 50% 42%,#000 28%,transparent 100%)}
.fx-pat span{position:relative;z-index:1;font-size:.86rem;color:#e9e9ee}
</style>

Animierte Glow-Blobs

Pol 1 · Craft Anlass: lebendiger Dark-Hero

Zwei weich geblurrte Kreise driften langsam per @keyframes — gibt einem dunklen Hero Tiefe ohne Foto. Optionaler, dezenter Maus-Parallax per JS (Bewegung halbiert, sanft gedämpft). Vorbild: Silver. Bei prefers-reduced-motion stehen die Blobs still.

Energie, die man sieht.

<div class="fx-glow" data-glow>
  <span class="fx-glow-blob fx-glow-1" aria-hidden="true"></span>
  <span class="fx-glow-blob fx-glow-2" aria-hidden="true"></span>
  <span class="fx-glow-txt">Energie, die man sieht.</span>
</div>

<style>
.fx-glow{position:relative;max-width:460px;min-height:230px;border-radius:14px;overflow:hidden;
  border:1px solid #26262c;background:#101014;display:grid;place-items:center}
.fx-glow-blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.6;
  animation:fx-glow-float 16s ease-in-out infinite alternate;will-change:transform}
.fx-glow-1{width:240px;height:240px;top:-70px;left:-50px;
  background:radial-gradient(circle,var(--akzent, #7c87ff) 0%,transparent 70%)}
.fx-glow-2{width:280px;height:280px;bottom:-100px;right:-70px;animation-delay:-5s;opacity:.4;
  background:radial-gradient(circle,var(--akzent, #7c87ff) 0%,transparent 70%)}
@keyframes fx-glow-float{0%{transform:translate(0,0) scale(1)}100%{transform:translate(34px,-26px) scale(1.1)}}
@media (prefers-reduced-motion:reduce){.fx-glow-blob{animation:none}}
</style>

<script>
/* Optionaler, dezenter Maus-Parallax — nur wenn Bewegung erlaubt ist */
if(!matchMedia('(prefers-reduced-motion: reduce)').matches){
  document.querySelectorAll('[data-glow]').forEach(function(box){
    box.addEventListener('mousemove',function(e){
      var r=box.getBoundingClientRect();
      var x=(e.clientX-r.left)/r.width-.5, y=(e.clientY-r.top)/r.height-.5;
      box.querySelectorAll('.fx-glow-blob').forEach(function(b,i){
        var f=(i+1)*14;
        b.style.transform='translate('+(x*f)+'px,'+(y*f)+'px)';
      });
    });
    box.addEventListener('mouseleave',function(){
      box.querySelectorAll('.fx-glow-blob').forEach(function(b){b.style.transform='';});
    });
  });
}
</script>

Eyebrow-Label mit Akzent-Strich

Pol 2 · Klarheit Anlass: Kennzeichnung über der H1

Kurzes Uppercase-Label mit kleinem Strich davor (::before) — ordnet den Hero-Titel ein, ohne ihm die Show zu stehlen. Vorbild: Bernstein.

Montageservice

<p class="fx-eyebrow">Montageservice</p>

<style>
.fx-eyebrow{display:inline-flex;align-items:center;gap:.6em;font-size:.74rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--akzent, #7c87ff)}
.fx-eyebrow::before{content:"";width:26px;height:1px;background:var(--akzent, #7c87ff)}
</style>

Glas-Eyebrow-Badge mit Glow-Dot

Pol 1 · Craft Anlass: „Live"/Status-Pill im Hero

Pille mit backdrop-filter (Milchglas) und pulsierendem Akzent-Punkt — signalisiert Aktivität/Frische. Vorbild: NDS. Puls hält bei prefers-reduced-motion an.

Jetzt Termine frei

<span class="fx-badge"><span class="dot" aria-hidden="true"></span>Jetzt Termine frei</span>

<style>
.fx-badge{display:inline-flex;align-items:center;gap:.6em;padding:.5rem 1rem;border-radius:100px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);
  font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#f4f4f5;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.fx-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--akzent, #7c87ff);
  animation:fx-badge-pulse 2.2s ease-in-out infinite}
@keyframes fx-badge-pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(124,135,255,.6)}
  50%{box-shadow:0 0 0 6px rgba(124,135,255,0)}}
@media (prefers-reduced-motion:reduce){.fx-badge .dot{animation:none}}
</style>

Trust-Reihe — 3 Varianten

Pol 2 · Klarheit Anlass: Vertrauen unter dem Hero-CTA

Drei Sozialbeweise: überlappende Avatare (Vorbild: Bernstein), Initialen-Avatare ohne Foto (Vorbild: Nördlicht) und Icon-Häkchen-Badges (Vorbild: Hauszeit). Avatare hier als Verlauf, im Projekt durch echte Fotos/Icons ersetzen.

120+ zufriedene Kunden

Ihr Team vor Ort

Meisterbetrieb
Festpreis-Garantie
5 Jahre Gewährleistung

<!-- A: überlappende Avatare -->
<div class="fx-trust">
  <span class="fx-avatars" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
  <span>120+ zufriedene Kunden</span>
</div>
<!-- B: Initialen-Avatare -->
<div class="fx-inits">
  <i aria-hidden="true">AM</i><i aria-hidden="true">TK</i><i aria-hidden="true">LF</i>
  <span>Ihr Team vor Ort</span>
</div>
<!-- C: Icon-Häkchen-Badges -->
<ul class="fx-checks">
  <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>Meisterbetrieb</li>
  <li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M5 13l4 4L19 7"/></svg>Festpreis-Garantie</li>
</ul>

<style>
/* A */
.fx-trust{display:inline-flex;align-items:center;gap:.9rem;color:#e9e9ee;font-size:.88rem}
.fx-avatars{display:flex}
.fx-avatars i{width:34px;height:34px;border-radius:50%;border:2px solid #16161a;margin-left:-10px;display:block}
.fx-avatars i:first-child{margin-left:0}
.fx-avatars i:nth-child(1){background:linear-gradient(135deg,#5b62c9,#383d86)}
.fx-avatars i:nth-child(2){background:linear-gradient(135deg,#7c87ff,#5b62c9)}
.fx-avatars i:nth-child(3){background:linear-gradient(135deg,#42466e,#6e6e8a)}
.fx-avatars i:nth-child(4){background:linear-gradient(135deg,#9aa2ff,#7c87ff)}
/* B */
.fx-inits{display:inline-flex;align-items:center;gap:.6rem}
.fx-inits i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:.78rem;
  font-weight:800;font-style:normal;color:#fff;background:linear-gradient(135deg,var(--akzent, #7c87ff),#42466e)}
.fx-inits span{font-size:.88rem;color:#e9e9ee}
/* C */
.fx-checks{display:flex;flex-wrap:wrap;gap:.7rem 1.4rem;list-style:none;padding:0;margin:0}
.fx-checks li{display:flex;align-items:center;gap:.55rem;font-size:.85rem;font-weight:600;color:#e9e9ee}
.fx-checks svg{width:20px;height:20px;color:#fff;flex:0 0 auto;padding:3px;box-sizing:content-box;
  background:var(--akzent, #7c87ff);border-radius:50%}
</style>

Letter-Burst-Headline

Pol 1 · Craft Anlass: aufmerksamkeitsstarker H1

JS zerlegt die H1 in <span> je Buchstabe (wortweise gruppiert, bricht nie mitten im Wort um) und schaltet sie gestaffelt von Blur+klein auf scharf mit leichtem Scale-Overshoot. Vorbilder: Nördlicht + Silver. Knopf spielt die Animation erneut ab. Ohne JS / bei prefers-reduced-motion steht der volle Text sofort.

Handwerk, auf das Sie sich verlassen können

<h1 class="fx-burst" data-burst>Handwerk, auf das Sie sich verlassen können</h1>

<style>
.fx-burst{font-size:clamp(1.6rem,5vw,2.4rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;
  color:#f4f4f5;text-align:center;margin:0;max-width:18ch}
.fx-burst .word{display:inline-block;white-space:nowrap}      /* hält Wörter zusammen */
.fx-burst .letter{display:inline-block;opacity:0;transform:translateY(16px) scale(.7);filter:blur(4px)}
.fx-burst .letter.show{opacity:1;transform:translateY(0) scale(1);filter:blur(0);
  transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1),filter .35s ease}
.fx-burst .sp{display:inline-block;width:.3em}
@media (prefers-reduced-motion:reduce){.fx-burst .letter{opacity:1;transform:none;filter:none;transition:none}}
</style>

<script>
function fxBurst(el){
  if(el.dataset.split){                       /* schon zerlegt: nur neu starten */
    el.querySelectorAll('.letter').forEach(function(l){l.classList.remove('show')});
  }else{
    var text=el.textContent; el.textContent=''; el.dataset.split='1';
    var reduce=matchMedia('(prefers-reduced-motion: reduce)').matches;
    text.split(' ').forEach(function(word,wi,arr){
      var w=document.createElement('span'); w.className='word';
      word.split('').forEach(function(c){
        var s=document.createElement('span'); s.className='letter'; s.textContent=c;
        if(reduce)s.classList.add('show'); w.appendChild(s);
      });
      el.appendChild(w);
      if(wi<arr.length-1){var sp=document.createElement('span');sp.className='sp';el.appendChild(sp);}
    });
    if(reduce)return;
  }
  var letters=el.querySelectorAll('.letter');
  letters.forEach(function(l,i){setTimeout(function(){l.classList.add('show')},i*36);});
}
document.querySelectorAll('[data-burst]').forEach(fxBurst);
</script>

Subpage-Hero (slim)

Pol 2 · Klarheit Anlass: Unterseiten-Kopf

Schlanker Hero für Unterseiten: Icon-Kachel + Breadcrumb + Titel, kein Vollbild. Hält Unterseiten ruhig und konsistent. Vorbild: Bernstein.

Küchenmontage

Von der Aufmaß-Planung bis zur fertig montierten Küche.

<div class="fx-sub">
  <div class="fx-sub-icon" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 9l9-6 9 6v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><path d="M9 21V12h6v9"/></svg>
  </div>
  <nav class="fx-crumb" aria-label="Brotkrumen">
    <a href="#">Start</a><span class="sep">/</span><a href="#">Leistungen</a><span class="sep">/</span><span>Küchenmontage</span>
  </nav>
  <h4>Küchenmontage</h4>
  <p>Von der Aufmaß-Planung bis zur fertig montierten Küche.</p>
</div>

<style>
.fx-sub{max-width:460px;border:1px solid #26262c;border-radius:14px;padding:1.6rem 1.75rem;
  background:radial-gradient(140% 120% at 0% 0%,#1c1c26 0%,#15151b 60%)}
.fx-sub-icon{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;margin-bottom:1rem;
  background:var(--akzent, #7c87ff)}
.fx-sub-icon svg{width:28px;height:28px;color:#fff;display:block}
.fx-crumb{display:flex;gap:.45rem;align-items:center;font-size:.8rem;color:#a1a1aa;margin-bottom:.7rem}
.fx-crumb a{color:#a1a1aa;transition:color .2s ease}
.fx-crumb a:hover,.fx-crumb a:focus-visible{color:#f4f4f5;text-decoration:underline}
.fx-crumb .sep{opacity:.5}
.fx-sub h4{margin:0 0 .35rem;font-size:1.4rem;letter-spacing:-.01em;color:#f4f4f5}
.fx-sub p{margin:0;font-size:.86rem;color:#a1a1aa}
</style>

Überlappende Stat-/Glas-Leiste am Hero-Übergang

Pol 1 · Craft Anlass: Kennzahlen am Hero-Fuß

Glas-Kachel mit drei Kennzahlen, per negativem margin-top in den Hero hochgezogen — verbindet Hero und Folge-Sektion. Vorbilder: Nördlicht + NDS.

15+Jahre Erfahrung

800+Projekte

4,9★Bewertung

<div class="fx-statwrap">
  <div class="fx-stat-hero" aria-hidden="true"></div>
  <div class="fx-statbar">
    <div class="fx-stat"><b>15<span class="a">+</span></b><small>Jahre Erfahrung</small></div>
    <div class="fx-stat"><b>800<span class="a">+</span></b><small>Projekte</small></div>
    <div class="fx-stat"><b>4,9<span class="a">★</span></b><small>Bewertung</small></div>
  </div>
</div>

<style>
.fx-statwrap{max-width:460px}
.fx-stat-hero{height:120px;border-radius:14px 14px 0 0;
  background:radial-gradient(120% 130% at 70% 10%,#3a3a52,#16161a 75%)}   /* „Foto" als Verlauf */
.fx-statbar{position:relative;margin-top:-46px;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 30px rgba(0,0,0,.35);overflow:hidden}
.fx-stat{text-align:center;padding:1.2rem .6rem;position:relative}
.fx-stat + .fx-stat::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;
  background:rgba(255,255,255,.12)}
.fx-stat b{display:block;font-size:1.7rem;font-weight:800;color:#f4f4f5;line-height:1}
.fx-stat b .a{color:var(--akzent, #7c87ff)}
.fx-stat small{display:block;margin-top:.4rem;font-size:.66rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#a1a1aa}
</style>

VS-/Duell-Hero

Pol 1 · Craft Anlass: Vergleichs-/Wettbewerbs-Seite

Titel im Format „A · VS · B" mit gerahmtem VS-Wort in der Mitte — für Vergleichs- oder Duell-Seiten. Nische. Vorbild: Silver. Bricht am Handy in die Spalte um.

Variante AVSVariante B

<h2 class="fx-vs">
  <span>Variante A</span>
  <span class="fx-vs-word">VS</span>
  <span>Variante B</span>
</h2>

<style>
.fx-vs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:clamp(.8rem,3vw,2rem);
  font-size:clamp(1.6rem,6vw,2.6rem);font-weight:800;line-height:1;color:#f4f4f5;text-align:center;margin:0}
.fx-vs-word{display:inline-block;font-size:clamp(.7rem,1.5vw,.95rem);font-weight:700;letter-spacing:.4em;
  color:var(--akzent, #7c87ff);padding:.4rem .8rem;
  border-top:1px solid rgba(124,135,255,.4);border-bottom:1px solid rgba(124,135,255,.4)}
</style>

Geteilter Hero — Text | Bild-Platzhalter

Pol 2 · Klarheit Anlass: klassischer Startseiten-Hero

Zwei-Spalten-Hero: links Eyebrow, Titel, Fließtext und CTA, rechts eine Bild-Fläche (hier CSS-Verlauf, im Projekt durch <img> oder background:url(...) ersetzen). Ein weicher Verlauf über der Bildkante lässt Text und Bild ineinander übergehen. Bricht am Handy sauber untereinander.

Montageservice

Ihre Küche, termintreu montiert

Von der Aufmaß-Planung bis zur fertig aufgebauten Küche — ein fester Ansprechpartner, ein klarer Festpreis.

Termin anfragen

<div class="fx-split">
  <div class="fx-split-txt">
    <span class="fx-split-eye">Montageservice</span>
    <h4>Ihre Küche, termintreu montiert</h4>
    <p>Von der Aufmaß-Planung bis zur fertig aufgebauten Küche — ein fester Ansprechpartner, ein klarer Festpreis.</p>
    <a href="#" class="fx-split-cta">Termin anfragen <span aria-hidden="true">→</span></a>
  </div>
  <div class="fx-split-img" aria-hidden="true"></div>
</div>

<style>
.fx-split{display:grid;grid-template-columns:1fr;gap:1.4rem;
  border:1px solid #26262c;border-radius:16px;overflow:hidden;background:#15151b}
@media(min-width:720px){.fx-split{grid-template-columns:1.05fr .95fr;gap:0}}
.fx-split-txt{padding:1.8rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:.9rem}
.fx-split-eye{display:inline-flex;align-items:center;gap:.55em;font-size:.72rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--akzent, #7c87ff)}
.fx-split-eye::before{content:"";width:22px;height:1px;background:var(--akzent, #7c87ff)}
.fx-split-txt h4{margin:0;font-size:clamp(1.4rem,3.4vw,1.9rem);line-height:1.1;letter-spacing:-.02em;color:#f4f4f5}
.fx-split-txt p{margin:0;font-size:.9rem;line-height:1.55;color:#a1a1aa;max-width:34ch}
.fx-split-cta{display:inline-flex;align-items:center;gap:.5rem;margin-top:.3rem;padding:.7rem 1.35rem;border-radius:10px;
  background:var(--akzent, #7c87ff);color:#fff;font-weight:600;font-size:.9rem;text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease}
.fx-split-cta span{transition:transform .25s cubic-bezier(.4,0,.2,1)}
.fx-split-cta:hover,.fx-split-cta:focus-visible{transform:translateY(-2px);box-shadow:0 10px 26px -10px var(--akzent, #7c87ff)}
.fx-split-cta:hover span,.fx-split-cta:focus-visible span{transform:translateX(4px)}
/* „Bild"-Seite als CSS-Verlauf (im Projekt durch background:url(...) ersetzen) */
.fx-split-img{position:relative;min-height:200px;overflow:hidden;
  background:radial-gradient(130% 110% at 82% 12%,#3a3a52 0%,#252534 40%,#161620 100%)}
.fx-split-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#15151b 0%,rgba(21,21,27,0) 34%)}
@media(min-width:720px){.fx-split-img{border-left:1px solid #26262c}}
@media (prefers-reduced-motion:reduce){
  .fx-split-cta,.fx-split-cta span{transition:none}
  .fx-split-cta:hover,.fx-split-cta:focus-visible{transform:none}
  .fx-split-cta:hover span,.fx-split-cta:focus-visible span{transform:none}}
</style>

Gradient-Mesh-Hintergrund

Pol 2 · Klarheit Anlass: ruhiger, farbiger Hero-Grund

Mehrere weich verlaufende Farbflecken (Akzent + neutrale Töne) überlagern sich zu einem organischen „Mesh" — statisch, kein Bild, keine Animation. Ein feines Raster-Korn dämpft die Flächen, damit sie nicht flach wirken; eine mask blendet zu den Rändern aus. Unterschied zu den animierten Glow-Blobs: ruhig und still, für seriöse Marken.

Handwerk mit Anspruch

Ein farbiger, ruhiger Hintergrund ganz ohne Foto.

<div class="fx-mesh">
  <div class="fx-mesh-in">
    <h4>Handwerk mit Anspruch</h4>
    <p>Ein farbiger, ruhiger Hintergrund ganz ohne Foto.</p>
  </div>
</div>

<style>
.fx-mesh{position:relative;min-height:240px;border-radius:16px;overflow:hidden;
  border:1px solid #26262c;background:#101014;display:grid;place-items:center;isolation:isolate}
/* vier weiche Farbflecken bilden das Mesh */
.fx-mesh::before{content:"";position:absolute;inset:0;z-index:-2;filter:blur(14px);
  background:
    radial-gradient(42% 55% at 14% 20%,color-mix(in srgb,var(--akzent, #7c87ff) 60%,transparent) 0%,transparent 60%),
    radial-gradient(46% 50% at 88% 16%,rgba(233,233,238,.14) 0%,transparent 62%),
    radial-gradient(55% 60% at 78% 92%,color-mix(in srgb,var(--akzent, #7c87ff) 42%,transparent) 0%,transparent 64%),
    radial-gradient(50% 55% at 24% 96%,rgba(66,70,110,.55) 0%,transparent 60%)}
/* feines Raster-Korn, zu den Rändern ausgeblendet */
.fx-mesh::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 100%);
  mask-image:radial-gradient(80% 80% at 50% 45%,#000 30%,transparent 100%)}
.fx-mesh-in{position:relative;text-align:center;padding:1.6rem;max-width:30ch}
.fx-mesh-in h4{margin:0 0 .5rem;font-size:clamp(1.3rem,3.6vw,1.8rem);line-height:1.12;letter-spacing:-.02em;color:#f4f4f5}
.fx-mesh-in p{margin:0;font-size:.88rem;line-height:1.5;color:#e9e9ee}
</style>

Wort-Wechsel-Headline (rotierender Begriff)

Pol 1 · Craft Anlass: H1 mit einem wechselnden Schlagwort

Ein einzelnes Wort im Titel tauscht sich in Schleife aus — das alte Wort gleitet nach oben weg, das neue von unten nach (Akzentfarbe). Die Wortliste steht im Markup, JS blendet nur um. Der Slot ist so breit wie das längste Wort, damit der Rest der Zeile nicht springt. Ohne JS / bei prefers-reduced-motion steht das erste Wort still. Unterschied zur Letter-Burst-Headline: dort animiert der ganze Titel einmalig buchstabenweise, hier rotiert dauerhaft ein Begriff.

Wir bauen Ihre KücheBadWerkstatt

<p class="fx-rot">Wir bauen Ihre
  <span class="fx-rot-slot" data-rot aria-label="Küche, Bad, Werkstatt">
    <span class="w" data-on>Küche</span><span class="w">Bad</span><span class="w">Werkstatt</span>
  </span>
</p>

<style>
.fx-rot{font-size:clamp(1.5rem,4.6vw,2.3rem);font-weight:800;line-height:1.12;letter-spacing:-.02em;
  color:#f4f4f5;text-align:center;margin:0}
/* alle Wörter liegen im selben Grid-Feld übereinander → Slot ist so breit wie das längste Wort */
.fx-rot-slot{display:inline-grid;vertical-align:bottom;text-align:left;overflow:hidden}
.fx-rot-slot .w{grid-area:1/1;color:var(--akzent, #7c87ff);white-space:nowrap;
  opacity:0;transform:translateY(0.6em);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.4,.64,1)}
.fx-rot-slot .w[data-on]{opacity:1;transform:translateY(0)}                 /* aktuelles Wort */
.fx-rot-slot .w[data-off]{opacity:0;transform:translateY(-0.6em);transition:opacity .35s ease,transform .4s ease} /* geht nach oben weg */
@media (prefers-reduced-motion:reduce){.fx-rot-slot .w{transition:none}}
</style>

<script>
document.querySelectorAll('[data-rot]').forEach(function(slot){
  var words=slot.querySelectorAll('.w');
  if(words.length<2) return;
  if(matchMedia('(prefers-reduced-motion: reduce)').matches) return; /* still: erstes Wort bleibt */
  var i=0;
  setInterval(function(){
    var cur=words[i], nxt=words[(i+1)%words.length];
    cur.removeAttribute('data-on'); cur.setAttribute('data-off','');
    nxt.setAttribute('data-on','');
    setTimeout(function(){cur.removeAttribute('data-off');},450);
    i=(i+1)%words.length;
  },2200);
});
</script>