Ein Hero-Gerüst nach dem Header-Prinzip: fünf Inhalts-Positionen von oben nach unten
(Über-Überschrift als Label-Fläche/Strich-Label/Glas-Badge · Titel mit
wählbarem Effekt · Text · 1–2 Buttons mit frei eingebbarer Beschriftung
und wählbarer Form · Trust-Zeile als Kennzahlen/Kunden-Avatare/Team-Initialen) plus
Optik-Achsen (Anordnung inkl. gespiegelt, Medien Foto/ohne, Bild- und Button-Form, Hintergrund, Höhe).
Erst das Effekt-Ziel wählen (letztes Wort oder ganzer Satz) — die Effekt-Liste bietet dann
nur an, was dazu lesbar bleibt: in Schleife rotieren oder 3D-kippen gibt es nur fürs letzte Wort. Effekte
laufen einmal beim Laden (Rotierend in Schleife); bei prefers-reduced-motion steht der Titel
still, Screenreader lesen immer den vollen Satz. Wechsel-Begriffe für „Rotierend" stehen in
data-worte. Alle Texte sind im Panel frei eingebbar (Über-Überschrift, Titel,
Rotier-Wörter, Text, Buttons, Trust-Zeile) — der Kopier-Code übernimmt sie fertig; Felder nicht aktiver
Varianten blenden sich aus. „Foto" ist als CSS-Verlauf angedeutet — im Projekt background:url(...)
auf .site-hero__bild setzen. Nicht genutzte Eyebrow-/Trust-Varianten können im Markup gelöscht werden.
Ihr Betrieb für die ganze Region
Meisterbetrieb
Jetzt Termine frei
Küchen, die millimetergenau sitzen.
Sauber geplant, termintreu montiert — vom Aufmaß bis zur letzten Blende.
15+ Jahre Erfahrung
800+ Projekte
4,9★ Bewertung
120+ zufriedene Kunden
Ihr Team vor Ort
Inhalte
Über-Überschrift
Über-Überschrift — Text
Titel
Effekt auf
Titel-Effekt
Rotier-Wörter (mit Komma)
Text
Buttons
Button 1 — Text
Button 2 — Text
Trust-Zeile
Kennzahl 1
Kennzahl 2
Kennzahl 3
Kunden-Zeile
Team-Initialen (mit Komma)
Team-Zeile
Optik
Anordnung
Medien
Bildform
Hintergrund
Höhe
Button-Form
Bild (mobil)
Buttons (mobil)
<!-- Achsen am section-Element (.site-hero):
data-layout = links | rechts | zentriert (Anordnung: Text links · Text rechts/gespiegelt · zentriert ohne Medienspalte)
data-medien = foto | ohne (Medienhälfte: Foto-Platzhalter · keine)
data-bildform = eckig | abgerundet (Form des Fotos; wirkt nur bei Medien "foto")
data-bg = schlicht | muster | blobs | mesh (Hintergrund der ganzen Sektion)
data-hoehe = kompakt | standard | voll (voll = ganze Bildschirmhöhe, 100svh)
data-eyebrow = aus | label | strich | badge (Über-Überschrift: farbige Label-Fläche · Strich-Label · Glas-Badge mit Glow-Dot)
data-ziel = wort | satz (Effekt aufs letzte Wort oder den ganzen Titel)
data-headline = statisch | rotierend | schreibmaschine | ausbruch | sprung | rollen (Titel-Effekt, einmal beim Laden;
rotierend läuft in Schleife und nur aufs letzte Wort; fürs Satz-Ziel sinnvoll: schreibmaschine · ausbruch · sprung)
data-worte = "Wort1, Wort2, …" (nur rotierend: die Wechsel-Begriffe, erstes = Startwort)
data-titel = "…" (optional: neuer Titel-Satz — überschreibt den h1-Text, Effekte bauen neu)
data-buttons = eins | zwei (nur Haupt-Button oder + zweiter, ruhiger Button)
data-btnform = eckig | abgerundet | pill (Form beider Buttons)
data-trust = aus | kennzahlen | kunden | team (Vertrauenszeile unter den Buttons)
data-mbild = oben | unten (Handy: Bild über oder unter dem Text)
data-mbtn = gestapelt | reihe (Handy: Buttons untereinander oder nebeneinander)
Nicht genutzte Eyebrow-/Trust-Varianten kannst du im Markup löschen — die Achsen blenden sie ohnehin aus. -->
<section class="site-hero" data-layout="links" data-medien="foto" data-bildform="abgerundet" data-bg="schlicht" data-hoehe="standard" data-eyebrow="strich" data-ziel="wort" data-headline="statisch" data-worte="sitzen., passen., überzeugen." data-buttons="zwei" data-btnform="abgerundet" data-trust="kunden" data-mbild="oben" data-mbtn="gestapelt">
<div class="site-hero__bg" aria-hidden="true"></div>
<div class="site-hero__in">
<div class="site-hero__txt">
<p class="site-hero__eye site-hero__eye--label">Ihr Betrieb für die ganze Region</p>
<p class="site-hero__eye site-hero__eye--strich">Meisterbetrieb</p>
<p class="site-hero__eye site-hero__eye--badge"><span class="site-hero__dot" aria-hidden="true"></span>Jetzt Termine frei</p>
<h1 class="site-hero__titel">Küchen, die millimetergenau sitzen.</h1>
<p class="site-hero__text">Sauber geplant, termintreu montiert — vom Aufmaß bis zur letzten Blende.</p>
<div class="site-hero__ctas">
<a href="#" class="site-hero__cta">Termin anfragen <span class="site-hero__pfeil" aria-hidden="true">→</span></a>
<a href="#" class="site-hero__cta site-hero__cta--zweit">Mehr erfahren</a>
</div>
<div class="site-hero__trust site-hero__trust--zahlen">
<span><b>15<i>+</i></b> Jahre Erfahrung</span>
<span><b>800<i>+</i></b> Projekte</span>
<span><b>4,9<i>★</i></b> Bewertung</span>
</div>
<div class="site-hero__trust site-hero__trust--kunden">
<span class="site-hero__avatare" aria-hidden="true"><i></i><i></i><i></i><i></i></span>
<span>120+ zufriedene Kunden</span>
</div>
<div class="site-hero__trust site-hero__trust--team">
<span class="site-hero__inits" aria-hidden="true"><i>AM</i><i>TK</i><i>LF</i></span>
<span>Ihr Team vor Ort</span>
</div>
</div>
<div class="site-hero__media" aria-hidden="true">
<div class="site-hero__bild"></div>
</div>
</div>
</section>
<style>
.site-hero{position:relative;display:grid;width:100%;overflow:hidden;isolation:isolate;
background:#0f0f12;color:#f4f4f5}
.site-hero__bg{position:absolute;inset:0;z-index:0;pointer-events:none}
.site-hero__in{position:relative;z-index:1;width:100%;max-width:1120px;margin:0 auto;
padding:clamp(2.2rem,6vw,4.5rem) clamp(1.2rem,4vw,2.5rem);
display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,4vw,3.2rem);align-items:center}
.site-hero__txt{display:flex;flex-direction:column;align-items:flex-start;gap:1.05rem;min-width:0}
/* Position 1 · Über-Überschrift — pro Achse ist genau EINE Variante sichtbar */
.site-hero__eye{display:none;margin:0;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.site-hero[data-eyebrow="label"] .site-hero__eye--label{display:inline-block;padding:.45rem .9rem;
background:var(--akzent,#7c87ff);color:#0d0d10;border-radius:4px;font-weight:800}
.site-hero[data-eyebrow="strich"] .site-hero__eye--strich{display:inline-flex;align-items:center;gap:.6em;
color:var(--akzent,#7c87ff)}
.site-hero__eye--strich::before{content:"";width:26px;height:1px;background:var(--akzent,#7c87ff)}
.site-hero[data-eyebrow="badge"] .site-hero__eye--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);
color:#f4f4f5;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.site-hero__dot{width:8px;height:8px;border-radius:50%;background:var(--akzent,#7c87ff);
animation:shero-puls 2.2s ease-in-out infinite}
@keyframes shero-puls{
0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--akzent,#7c87ff) 60%,transparent)}
50%{box-shadow:0 0 0 6px transparent}}
/* Position 2 · Titel (+ Effekt-Spans, die das JS setzt) */
.site-hero__titel{margin:0;font-size:clamp(1.9rem,4.4vw,3.3rem);line-height:1.08;letter-spacing:-.02em;font-weight:800}
.site-hero__zielwort{color:var(--akzent,#7c87ff)}
.site-hero__titel .shw{display:inline-block;white-space:nowrap}
.site-hero__titel .shl{display:inline-block}
.site-hero[data-headline="ausbruch"] .shl{opacity:0;transform:translateY(16px) scale(.6);filter:blur(5px)}
.site-hero[data-headline="ausbruch"] .shl.an{opacity:1;transform:none;filter:none;
transition:opacity .35s ease,transform .5s cubic-bezier(.34,1.56,.64,1),filter .35s ease}
.site-hero[data-headline="sprung"] .shw{opacity:0;transform:translateY(1.1em)}
.site-hero[data-headline="sprung"] .shw.an{opacity:1;transform:none;
transition:opacity .3s ease,transform .55s cubic-bezier(.3,1.6,.45,1)}
.site-hero[data-headline="rollen"] .shw{perspective:700px}
.site-hero[data-headline="rollen"] .shl{opacity:0;transform:rotateX(-92deg);transform-origin:50% 100%}
.site-hero[data-headline="rollen"] .shl.an{opacity:1;transform:none;
transition:opacity .3s ease,transform .5s cubic-bezier(.34,1.3,.5,1)}
.site-hero__tw{display:inline-grid}
.site-hero__tw>span{grid-area:1/1}
.site-hero__tw-ghost{visibility:hidden}
.site-hero__caret{display:inline-block;width:2px;height:.9em;margin-left:2px;vertical-align:-.06em;
background:var(--akzent,#7c87ff);animation:shero-caret 1s steps(2) infinite}
@keyframes shero-caret{50%{opacity:0}}
.site-hero__rot{display:inline-grid;text-align:left;vertical-align:bottom;overflow:hidden}
.site-hero__rot .w{grid-area:1/1;color:var(--akzent,#7c87ff);white-space:nowrap;
opacity:0;transform:translateY(.6em);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.4,.64,1)}
.site-hero__rot .w.an{opacity:1;transform:none}
.site-hero__rot .w.ab{opacity:0;transform:translateY(-.6em);transition:opacity .35s ease,transform .4s ease}
/* Position 3 · Text */
.site-hero__text{margin:0;font-size:clamp(.95rem,1.3vw,1.08rem);line-height:1.6;color:#c9c9d2;max-width:46ch}
/* Position 4 · Call-to-Action (eins/zwei, Texte frei, Form über data-btnform) */
.site-hero__ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.site-hero__cta{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.5rem;
background:var(--akzent,#7c87ff);color:#0d0d10;font-weight:700;font-size:.95rem;text-decoration:none;
transition:transform .2s ease,box-shadow .2s ease}
.site-hero[data-btnform="eckig"] .site-hero__cta{border-radius:0}
.site-hero[data-btnform="abgerundet"] .site-hero__cta{border-radius:12px}
.site-hero[data-btnform="pill"] .site-hero__cta{border-radius:999px}
.site-hero__pfeil{transition:transform .25s cubic-bezier(.4,0,.2,1)}
.site-hero__cta:hover,.site-hero__cta:focus-visible{transform:translateY(-2px);
box-shadow:0 10px 26px -10px var(--akzent,#7c87ff)}
.site-hero__cta:focus-visible{outline:2px solid var(--akzent,#7c87ff);outline-offset:2px}
.site-hero__cta:hover .site-hero__pfeil,.site-hero__cta:focus-visible .site-hero__pfeil{transform:translateX(4px)}
.site-hero__cta--zweit{background:transparent;color:#e9e9ee;border:1px solid #34343e}
.site-hero__cta--zweit:hover,.site-hero__cta--zweit:focus-visible{box-shadow:none;border-color:#4a4a56;
background:rgba(255,255,255,.05)}
.site-hero[data-buttons="eins"] .site-hero__cta--zweit{display:none}
/* Position 5 · Trust-Zeile — pro Achse ist genau EINE Variante sichtbar */
.site-hero__trust{display:none;margin-top:.55rem;font-size:.88rem;color:#e9e9ee}
.site-hero[data-trust="kennzahlen"] .site-hero__trust--zahlen{display:flex;flex-wrap:wrap;gap:.5rem 1.5rem}
.site-hero__trust--zahlen span{display:inline-flex;align-items:baseline;gap:.4rem;color:#a1a1aa;font-size:.8rem}
.site-hero__trust--zahlen b{font-size:1.06rem;font-weight:800;color:#f4f4f5}
.site-hero__trust--zahlen b i{font-style:normal;color:var(--akzent,#7c87ff)}
.site-hero[data-trust="kunden"] .site-hero__trust--kunden{display:inline-flex;align-items:center;gap:.9rem}
.site-hero__avatare{display:flex}
.site-hero__avatare i{width:34px;height:34px;border-radius:50%;border:2px solid #0f0f12;margin-left:-10px;display:block}
.site-hero__avatare i:first-child{margin-left:0}
.site-hero__avatare i:nth-child(1){background:linear-gradient(135deg,#5b62c9,#383d86)}
.site-hero__avatare i:nth-child(2){background:linear-gradient(135deg,var(--akzent,#7c87ff),#5b62c9)}
.site-hero__avatare i:nth-child(3){background:linear-gradient(135deg,#42466e,#6e6e8a)}
.site-hero__avatare i:nth-child(4){background:linear-gradient(135deg,#9aa2ff,var(--akzent,#7c87ff))}
.site-hero[data-trust="team"] .site-hero__trust--team{display:inline-flex;align-items:center;gap:.9rem}
.site-hero__inits{display:inline-flex;gap:.55rem}
.site-hero__inits i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
font-size:.74rem;font-weight:800;font-style:normal;color:#fff;
background:linear-gradient(135deg,var(--akzent,#7c87ff),#42466e)}
/* Medienhälfte: Foto-Platzhalter, Form über data-bildform */
.site-hero__media{position:relative;align-self:stretch;display:grid;min-height:300px}
.site-hero__bild{width:100%;height:100%;min-height:300px;border:1px solid #2a2a34;
background:radial-gradient(130% 110% at 78% 14%,#3a3a52 0%,#252534 42%,#161620 100%)}
.site-hero[data-bildform="eckig"] .site-hero__bild{border-radius:0}
.site-hero[data-bildform="abgerundet"] .site-hero__bild{border-radius:18px}
/* Achse Anordnung (data-layout): Text links · Text rechts (gespiegelt) · zentriert (ohne Medienspalte) */
.site-hero[data-layout="rechts"] .site-hero__txt{order:2}
.site-hero[data-layout="rechts"] .site-hero__media{order:1}
.site-hero[data-layout="zentriert"] .site-hero__in{grid-template-columns:1fr;justify-items:center}
.site-hero[data-layout="zentriert"] .site-hero__txt{align-items:center;text-align:center}
.site-hero[data-layout="zentriert"] .site-hero__text{margin-left:auto;margin-right:auto}
.site-hero[data-layout="zentriert"] .site-hero__media{display:none}
.site-hero[data-medien="ohne"] .site-hero__media{display:none}
.site-hero[data-medien="ohne"] .site-hero__in{grid-template-columns:1fr}
.site-hero[data-medien="ohne"] .site-hero__txt{max-width:640px}
/* Achse Hintergrund (data-bg) — wirkt auf .site-hero__bg */
.site-hero[data-bg="schlicht"] .site-hero__bg{
background:radial-gradient(140% 120% at 0% 0%,#1c1c26 0%,#15151b 60%,#0f0f12 100%)}
.site-hero[data-bg="muster"] .site-hero__bg{background:#101014;
background-image:radial-gradient(circle,rgba(124,135,255,.5) 1.1px,transparent 1.6px);background-size:22px 22px;
-webkit-mask-image:radial-gradient(125% 130% at 82% 10%,#000 0%,#000 12%,transparent 56%);
mask-image:radial-gradient(125% 130% at 82% 10%,#000 0%,#000 12%,transparent 56%)}
.site-hero[data-bg="blobs"] .site-hero__bg{background:#101014}
.site-hero[data-bg="blobs"] .site-hero__bg::before,
.site-hero[data-bg="blobs"] .site-hero__bg::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);
background:radial-gradient(circle,var(--akzent,#7c87ff) 0%,transparent 70%);
animation:shero-float 16s ease-in-out infinite alternate;will-change:transform}
.site-hero[data-bg="blobs"] .site-hero__bg::before{width:230px;height:230px;top:-70px;left:-46px;opacity:.5}
.site-hero[data-bg="blobs"] .site-hero__bg::after{width:270px;height:270px;bottom:-96px;right:-64px;opacity:.38;animation-delay:-5s}
@keyframes shero-float{0%{transform:translate(0,0) scale(1)}100%{transform:translate(34px,-26px) scale(1.1)}}
.site-hero[data-bg="mesh"] .site-hero__bg{background:#101014}
.site-hero[data-bg="mesh"] .site-hero__bg::before{content:"";position:absolute;inset:0;filter:blur(14px);
background:
radial-gradient(42% 55% at 14% 20%,color-mix(in srgb,var(--akzent,#7c87ff) 58%,transparent) 0%,transparent 60%),
radial-gradient(46% 50% at 88% 16%,rgba(233,233,238,.13) 0%,transparent 62%),
radial-gradient(55% 60% at 78% 92%,color-mix(in srgb,var(--akzent,#7c87ff) 40%,transparent) 0%,transparent 64%),
radial-gradient(50% 55% at 24% 96%,rgba(66,70,110,.5) 0%,transparent 60%)}
/* Achse Höhe: kompakt = schlanker Block · standard = präsenter Startbildschirm · voll = ganze Bildschirmhöhe */
.site-hero[data-hoehe="kompakt"] .site-hero__in{padding-block:clamp(1.8rem,4vw,2.8rem)}
.site-hero[data-hoehe="standard"]{min-height:min(680px,86svh)}
.site-hero[data-hoehe="voll"]{min-height:100svh}
/* Handy: eine Spalte; Achsen data-mbild (Bild oben/unten) + data-mbtn (Buttons gestapelt/Reihe) */
@media (max-width:760px){
.site-hero__in{grid-template-columns:1fr;gap:1.5rem}
.site-hero__media,.site-hero__bild{min-height:210px}
.site-hero[data-mbild="oben"] .site-hero__media{order:-1}
.site-hero[data-mbild="unten"] .site-hero__media{order:2}
.site-hero[data-mbtn="gestapelt"] .site-hero__ctas{flex-direction:column;align-items:stretch;align-self:stretch}
.site-hero[data-mbtn="gestapelt"] .site-hero__cta{justify-content:center}
}
@media (prefers-reduced-motion:reduce){
.site-hero__dot,.site-hero[data-bg="blobs"] .site-hero__bg::before,
.site-hero[data-bg="blobs"] .site-hero__bg::after,.site-hero__caret{animation:none}
.site-hero__cta,.site-hero__pfeil,.site-hero__rot .w{transition:none}
.site-hero__cta:hover,.site-hero__cta:focus-visible{transform:none}
.site-hero__cta:hover .site-hero__pfeil,.site-hero__cta:focus-visible .site-hero__pfeil{transform:none}
.site-hero .shl,.site-hero .shw{opacity:1;transform:none;filter:none;transition:none}
}
</style>
<script>
/* Flexibler Split-Hero — Titel-Effekte. Liest data-headline/data-ziel/data-worte an .site-hero,
läuft einmal beim Laden und reagiert auf Attribut-Änderungen (MutationObserver).
Der Titel-Text steht im <h1>; über data-titel an .site-hero lässt er sich nachträglich ändern
(die Effekte bauen dann mit dem neuen Satz neu — so ändert auch das Dossier-Panel den Titel).
Screenreader lesen immer den vollen Satz (aria-label); bei prefers-reduced-motion bleibt der Titel statisch. */
(function(){
var REDUCE=matchMedia('(prefers-reduced-motion: reduce)').matches;
document.querySelectorAll('.site-hero').forEach(function(hero){
var h=hero.querySelector('.site-hero__titel'); if(!h) return;
var orig=(hero.getAttribute('data-titel')||h.textContent).trim();
var timer=[];
function stop(){ timer.forEach(clearTimeout); timer=[]; if(h._rot){clearInterval(h._rot);h._rot=null;} }
function T(fn,ms){ timer.push(setTimeout(fn,ms)); }
function el(tag,cls,txt){ var e=document.createElement(tag); if(cls)e.className=cls; if(txt!=null)e.textContent=txt; return e; }
/* Text in Wort-Gruppen (.shw) mit Buchstaben (.shl) zerlegen; nur der Ziel-Teil wird animiert.
Abstände bleiben echte Leerzeichen (Textknoten) — der Titel liest sich auch ohne CSS korrekt. */
function zerlege(ziel,buchstaben){
h.textContent='';
var worte=orig.split(' ');
var start=(ziel==='satz')?0:worte.length-1;
var spans=[];
worte.forEach(function(wort,i){
if(i<start){ h.appendChild(document.createTextNode(wort)); }
else{
var w=el('span','shw'+(ziel==='wort'?' site-hero__zielwort':''));
if(buchstaben){ wort.split('').forEach(function(c){ w.appendChild(el('span','shl',c)); }); }
else{ w.textContent=wort; }
h.appendChild(w); spans.push(w);
}
if(i<worte.length-1) h.appendChild(document.createTextNode(' '));
});
return spans;
}
function baue(){
stop();
var eff=hero.getAttribute('data-headline')||'statisch';
var ziel=hero.getAttribute('data-ziel')||'wort';
if(eff==='rotierend') ziel='wort'; /* Schleife nur aufs letzte Wort — ein rotierender Satz wäre nicht lesbar */
if(REDUCE&&eff!=='statisch') eff='statisch';
if(eff==='statisch'){ h.textContent=orig; h.removeAttribute('aria-label'); return; }
h.setAttribute('aria-label',orig);
var worte=orig.split(' ');
if(eff==='rotierend'){
var liste=(hero.getAttribute('data-worte')||worte[worte.length-1]).split(',').map(function(s){return s.trim()}).filter(Boolean);
h.textContent='';
h.appendChild(document.createTextNode(worte.slice(0,-1).join(' ')+' '));
var slot=el('span','site-hero__rot');
liste.forEach(function(wtxt,i){ var w=el('span','w'+(i===0?' an':''),wtxt); slot.appendChild(w); });
h.appendChild(slot);
if(liste.length<2) return;
var ws=slot.querySelectorAll('.w'), i=0;
h._rot=setInterval(function(){
var cur=ws[i], nxt=ws[(i+1)%ws.length];
cur.classList.remove('an'); cur.classList.add('ab');
nxt.classList.add('an');
setTimeout(function(){cur.classList.remove('ab');},450);
i=(i+1)%ws.length;
},2200);
}
else if(eff==='schreibmaschine'){
h.textContent='';
var start=(ziel==='satz')?'':worte.slice(0,-1).join(' ')+' ';
var zieltext=(ziel==='satz')?orig:worte[worte.length-1];
if(start) h.appendChild(document.createTextNode(start));
var tw=el('span','site-hero__tw'+(ziel==='wort'?' site-hero__zielwort':''));
var ghost=el('span','site-hero__tw-ghost',zieltext); ghost.setAttribute('aria-hidden','true');
var typ=el('span','site-hero__tw-typ'); typ.setAttribute('aria-hidden','true');
var caret=el('span','site-hero__caret');
typ.appendChild(document.createTextNode('')); typ.appendChild(caret);
tw.appendChild(ghost); tw.appendChild(typ); h.appendChild(tw);
var n=0;
(function tippe(){
if(n<=zieltext.length){
typ.firstChild.nodeValue=zieltext.slice(0,n); n++;
T(tippe,55);
}else{
T(function(){caret.remove();},1600);
}
})();
}
else{
var buchstaben=(eff==='ausbruch'||eff==='rollen');
var spans=zerlege(ziel,buchstaben);
var teile=buchstaben?h.querySelectorAll('.shl'):spans;
var takt=(eff==='sprung')?90:34;
teile.forEach(function(t,i){ T(function(){t.classList.add('an');},120+i*takt); });
}
}
baue();
new MutationObserver(function(muts){
var relevant=muts.some(function(m){
return ['data-headline','data-ziel','data-worte','data-titel'].indexOf(m.attributeName)>-1;
});
if(relevant){ orig=(hero.getAttribute('data-titel')||orig).trim(); baue(); }
}).observe(hero,{attributes:true});
});
})();
</script>