Vom ruhigen Leistungs-Teaser bis zur auffälligen Glas- oder Eck-Glow-Karte.
Jeder Baustein ist in sich abgeschlossen (eigenes scoped CSS), nutzt
var(--akzent, #7c87ff) als überschreibbare Akzentfarbe und ist direkt einsetzbar.
Service-Karte · Akzentkante wächst (scaleY)
Pol 2 · KlarheitAnlass: Leistungskarten
Ruhige Karte mit Lift; die linke Akzentleiste wächst per scaleY von oben ein. Vorbild: Nördlicht (Service-/Value-Cards). Reagiert auch auf Tastatur-Fokus (:focus-within).
Küchenmontage
Anschluss von Spüle, Geräten und Arbeitsplatte – fachgerecht.
Wie die vorige, aber die Leiste fährt deutlich langsamer (0,85 s, weiche Kurve) ein – wirkt edler, weniger „schnappig". Vorbild: Hauszeit (.service-card).
Möbelmontage
Schrank, Bett, Regal – sauber und stabil aufgebaut.
Icon-Kachel oben; beim Hover hebt die Karte an, der Rand wechselt zur Akzentfarbe und die Kachel füllt sich. Vorbild: Bernstein-Montageservice (.karte).
Bild zoomt beim Hover sanft (scale(1.04)), die ganze Karte hebt an, ein schwebendes Glas-Badge sitzt oben links. Mit .static ohne Hover (z. B. nicht klickbar). Vorbild: Hauszeit / NDS. Bild hier als Verlauf statt <img> – DSGVO/offline-sicher.
Ein radialer Akzent-Blob in der oberen Ecke blendet beim Hover ein und skaliert leicht – gibt der Karte Tiefe ohne Bild. Vorbild: Silver Mountain (.offer-card + .offer-glow).
01
Komplett-Paket
Planung, Material und Montage aus einer Hand – zum Festpreis.
Beim Hover vergrößert sich die Karte (scale(1.10)) und „poppt" über ihre Nachbarn – der z-index wird mit Delay zurückgesetzt, damit die Karte beim Wegfahren noch oben bleibt, bis sie geschrumpft ist. Vorbild: Silver Mountain (.continent-card). Auf Touch ohne Hover; dort besser ein einfaches Raster.
Nische, kompakt. Karte mit Shine-Streifen über die Fläche beim Hover und einer farbcodierten Record-Leiste unten (W/D/L in Grün/Gelb/Rot). Vorbild: Silver Mountain (.roster-card + .roster-record). Hier ohne Foto-Block dargestellt.
Nische, kompakt. Flyer-Look mit Eyebrow-Tag, großem Titel und vier Countdown-Zellen. Vorbild: Silver Mountain (.event-card + Countdown-Grid). Die Zahlen sind hier statisch – ein kleiner Live-Countdown ist im Code unten optional ergänzt.
Demnächst
Tag der offenen Tür
01. September · 18:00 Uhr · vor Ort
12Tage
06Std
42Min
08Sek
<div class="fx-event" data-deadline="2026-09-01T18:00:00">
<span class="fx-event-tag">Demnächst</span>
<h3>Tag der <em>offenen Tür</em></h3>
<p class="fx-event-meta">01. September · 18:00 Uhr · vor Ort</p>
<div class="fx-event-cd">
<div class="fx-event-cell"><b data-cd="days">12</b><small>Tage</small></div>
<div class="fx-event-cell"><b data-cd="hours">06</b><small>Std</small></div>
<div class="fx-event-cell"><b data-cd="mins">42</b><small>Min</small></div>
<div class="fx-event-cell"><b data-cd="secs">08</b><small>Sek</small></div>
</div>
</div>
<style>
.fx-event{position:relative;width:290px;text-align:center;border-radius:20px;padding:1.8rem 1.5rem 1.4rem;color:#f4f4f5;
background:radial-gradient(600px 400px at 80% -10%,rgba(124,135,255,.12),transparent 55%),
linear-gradient(180deg,#16161a 0%,#0a0a0d 100%);
border:1px solid rgba(255,255,255,.08);
box-shadow:0 20px 50px rgba(0,0,0,.45),0 0 0 1px rgba(124,135,255,.18);
transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.fx-event:hover,.fx-event:focus-within{transform:translateY(-3px);border-color:rgba(124,135,255,.32);
box-shadow:0 24px 60px rgba(124,135,255,.18),0 0 0 1px rgba(124,135,255,.32)}
.fx-event-tag{display:inline-block;font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;
color:var(--akzent,#7c87ff);border:1px solid #3a3a72;background:#7c87ff14;
padding:.4rem 1rem;border-radius:99px;margin-bottom:1rem}
.fx-event h3{margin:0 0 .3rem;font-size:1.5rem;text-transform:uppercase;letter-spacing:.02em;line-height:1}
.fx-event h3 em{font-style:normal;color:var(--akzent,#7c87ff)}
.fx-event-meta{margin:0 0 1.2rem;font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#a1a1aa}
.fx-event-cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 0 .4rem}
.fx-event-cell{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);border-radius:12px;
padding:.7rem .2rem;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.fx-event-cell b{font-size:1.5rem;line-height:1;font-variant-numeric:tabular-nums}
.fx-event-cell small{font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:#71717a}
@media (prefers-reduced-motion:reduce){.fx-event{transition:none}}
</style>
<!-- Optionaler Live-Countdown -->
<script>
document.querySelectorAll('.fx-event[data-deadline]').forEach(function(card){
var end = new Date(card.dataset.deadline).getTime();
var pad = function(n){ return String(n).padStart(2,'0'); };
function tick(){
var d = Math.max(0, end - Date.now()), s = Math.floor(d/1000);
var set = function(k,v){ var el = card.querySelector('[data-cd="'+k+'"]'); if(el) el.textContent = pad(v); };
set('days', Math.floor(s/86400)); set('hours', Math.floor(s%86400/3600));
set('mins', Math.floor(s%3600/60)); set('secs', s%60);
}
tick(); setInterval(tick, 1000);
});
</script>
Avatar-Gruppe mit Hover-Tooltip
Pol 1 · CraftAnlass: Team / Social Proof
Überlappende Initialen-Avatare (kein Bild-Asset); beim Hover oder Tastatur-Fokus kommt der Avatar nach vorn, hebt leicht an und zeigt einen Tooltip mit Namen. Vorbild: animate-ui „Avatar Group". Avatare sind echte <button>, Tooltip via :hover UND :focus-visible.
Pol 1 · CraftAnlass: Team-Karte / Feature mit Rückseite
Karte dreht sich beim Hover oder Tastatur-Fokus um die Y-Achse und zeigt die Rückseite (Kontakt). preserve-3d + backface-visibility:hidden. Vorbild: animate-ui „Flip Card". Bei prefers-reduced-motion wird nicht gedreht, sondern die Rückseite per Opacity eingeblendet.
MR
Max Reuter
Projektleitung
Max Reuter
Ansprechpartner für Planung und Termine. Erreichbar Mo–Fr.
Pol 1 · CraftAnlass: Feature-Highlight, Hero-Kachel
Die Karte neigt sich sanft zur Mausposition; Titel und Badge stehen per translateZ leicht erhaben, ein Licht-Spot folgt dem Zeiger. JS setzt nur vier CSS-Variablen (--rx/--ry für die Neigung, --mx/--my für den Spot), den Rest macht CSS. Auf Touch/ohne Zeiger und bei prefers-reduced-motion bleibt sie flach.
Neu
Digitale Planung
Aufmaß, Angebot und Termin in einem Ablauf – transparent und papierlos.
Pol 1 · CraftAnlass: Preis-/Feature-Raster, Dark-UI
Beim Überfahren leuchtet ein weicher Lichtkegel unter dem Zeiger auf, zusätzlich zeichnet ein per mask lokal begrenzter Akzent-Rand nur den Bereich um die Maus nach. JS setzt zwei Variablen (--sx/--sy). Tastatur-Fokus zeigt den Effekt zentriert; bei reduzierter Bewegung nur der ruhige Rahmen.
02
Wartungsvertrag
Jährliche Prüfung und Vorrang bei Terminen – zum festen Monatsbeitrag.
<div class="fx-spot" tabindex="0" role="group" aria-label="Leistungs-Karte">
<span class="fx-spot-num">02</span>
<h3>Wartungsvertrag</h3>
<p>Jährliche Prüfung und Vorrang bei Terminen – zum festen Monatsbeitrag.</p>
</div>
<style>
.fx-spot{position:relative;width:100%;max-width:270px;margin:0 auto;overflow:hidden;
background:#16161a;border:1px solid #26262c;border-radius:16px;padding:1.5rem 1.5rem 1.4rem;
color:#e9e9ee;cursor:pointer;transition:border-color .3s ease,box-shadow .3s ease}
.fx-spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s ease;
background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),
color-mix(in srgb,var(--akzent,#7c87ff) 22%,transparent),transparent 60%)}
.fx-spot::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;
transition:opacity .3s ease;
-webkit-mask:radial-gradient(180px circle at var(--sx,50%) var(--sy,50%),#000,transparent 70%);
mask:radial-gradient(180px circle at var(--sx,50%) var(--sy,50%),#000,transparent 70%);
box-shadow:inset 0 0 0 1px var(--akzent,#7c87ff)}
.fx-spot:hover,.fx-spot:focus-within{border-color:#3a3a45;box-shadow:0 18px 44px -26px rgba(0,0,0,.8)}
.fx-spot:hover::before,.fx-spot:focus-within::before,
.fx-spot:hover::after,.fx-spot:focus-within::after{opacity:1}
.fx-spot-num{position:relative;display:block;font-size:1.5rem;font-weight:700;line-height:1;
color:var(--akzent,#7c87ff);margin-bottom:.6rem}
.fx-spot h3{position:relative;margin:0 0 .35rem;font-size:1.05rem}
.fx-spot p{position:relative;margin:0;font-size:.88rem;color:#a1a1aa;line-height:1.5}
@media (prefers-reduced-motion:reduce){.fx-spot,.fx-spot::before,.fx-spot::after{transition:none}}
</style>
<script>
document.querySelectorAll('.fx-spot').forEach(function(card){
card.addEventListener('pointermove',function(e){
var r = card.getBoundingClientRect();
card.style.setProperty('--sx', (e.clientX - r.left) + 'px');
card.style.setProperty('--sy', (e.clientY - r.top) + 'px');
});
});
</script>
Aufklappende Detail-Karte (Akkordeon)
Pol 2 · KlarheitAnlass: FAQ, Leistungsdetails
Kopfzeile mit Icon und Chevron; ein Klick klappt den Detailtext ruckelfrei auf. Die Höhen-Animation läuft über grid-template-rows: 0fr → 1fr (kein max-height-Raten). Als natives <details>/<summary> gebaut – funktioniert auch ohne JS, per Tastatur bedienbar. Bei reduzierter Bewegung springt es ohne Übergang.
Was kostet ein Aufmaß?
Antwort einblenden
Das erste Aufmaß vor Ort ist kostenlos und unverbindlich. Erst nach Ihrer Freigabe des Angebots entstehen Kosten.
Baustein für Bento-Raster: gleich hohe Zellen, eine kann per .wide die volle Zeile überspannen, eine per .accent als Blickfang hervortreten. Beim Hover hebt die Zelle an und ein Akzent-Blob glimmt in der Ecke auf. Rein per CSS-Grid, ohne Bild.