Nordwerk Steuerberatung

Unsere Leistungen

Vorschau der sechs animierten Icons. Fahre mit der Maus über eine Karte oder springe mit der Tabulatortaste durch.

Finanzbuchhaltung

Laufende Buchführung, Belege und Auswertungen jeden Monat.

Lohnabrechnung

Gehälter, Meldungen an Krankenkassen und Lohnsteuer pünktlich.

Jahresabschluss

Bilanz, GuV und Anhang, fertig zur Offenlegung.

Steuererklärung

Betriebliche und private Erklärungen aus einer Hand.

Unternehmensberatung

Rechtsform, Nachfolge und Investitionen gemeinsam durchrechnen.

Digitale Belegablage

Belege per App hochladen, wir kümmern uns um den Rest.

Code zum Kopieren

Jedes Icon einzeln als Inline-SVG. Die Farbe kommt über currentColor, das CSS und das kleine Skript unten gelten für alle sechs.

Finanzbuchhaltung 
<svg class="ficon" viewBox="0 0 48 48" width="48" height="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><g class="mo-binder"><rect x="12" y="6" width="22" height="36" rx="2" pathLength="1"/><path d="M18 6v36" pathLength="1"/><rect x="22" y="14" width="8" height="10" rx="1" pathLength="1"/><circle cx="26" cy="33" r="2.5" pathLength="1"/></g><path d="M38 12v30" pathLength="1"/></svg>
Lohnabrechnung 
<svg class="ficon" viewBox="0 0 48 48" width="48" height="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="4" y="16" width="30" height="18" rx="2" pathLength="1"/><circle cx="19" cy="25" r="4" pathLength="1"/><path d="M8 20h3M27 30h3" pathLength="1"/><g class="mo-coin"><circle cx="38" cy="14" r="7" pathLength="1"/><path d="M38 10.5v7" pathLength="1"/></g></svg>
Jahresabschluss 
<svg class="ficon" viewBox="0 0 48 48" width="48" height="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="6" y="10" width="36" height="32" rx="3" pathLength="1"/><path d="M6 18h36M15 5v9M33 5v9" pathLength="1"/><path class="mo-check" d="M16 30l5 5l11-11" pathLength="1"/></svg>
Steuererklärung 
<svg class="ficon" viewBox="0 0 48 48" width="48" height="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M10 6h20l8 8v28h-28z" pathLength="1"/><path d="M30 6v8h8" pathLength="1"/><path d="M16 22h14M16 28h10" pathLength="1"/><g class="mo-pen"><path d="M24 40l2-6l12-12l4 4l-12 12z" pathLength="1"/><path d="M35 25l4 4" pathLength="1"/></g></svg>
Unternehmensberatung 
<svg class="ficon" viewBox="0 0 48 48" width="48" height="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><g class="mo-gear"><path d="M24 8l3 0l1 4.5l3.5 1.5l4-2.5l2.2 2.2l-2.5 4l1.5 3.5l4.5 1v3l-4.5 1l-1.5 3.5l2.5 4l-2.2 2.2l-4-2.5l-3.5 1.5l-1 4.5h-3l-1-4.5l-3.5-1.5l-4 2.5l-2.2-2.2l2.5-4l-1.5-3.5l-4.5-1v-3l4.5-1l1.5-3.5l-2.5-4l2.2-2.2l4 2.5l3.5-1.5l1-4.5z" pathLength="1"/><circle cx="25.5" cy="25.5" r="5" pathLength="1"/></g></svg>
Digitale Belegablage 
<svg class="ficon" viewBox="0 0 48 48" width="48" height="48" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><rect x="6" y="14" width="36" height="24" rx="2" pathLength="1"/><path class="mo-flap" d="M6 15l18 13l18-13" pathLength="1"/></svg>
Gemeinsames CSS 
/* Animierte Leistungs-Icons: nur transform, opacity und stroke-dashoffset */
.ficon{color:var(--icon-color,#1f6b4a);overflow:visible}
.ficon *{stroke-dasharray:1;stroke-dashoffset:1;
  transition:stroke-dashoffset 800ms cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * 100ms)}
.is-visible .ficon *{stroke-dashoffset:0}
.ficon g,.ficon .mo-check,.ficon .mo-flap{transform-box:fill-box;transform-origin:center}
.ficon g{transition:transform 400ms cubic-bezier(.34,1.56,.64,1)}
.ficon .mo-check,.ficon .mo-flap{transition:stroke-dashoffset 800ms cubic-bezier(.16,1,.3,1) calc(var(--i,0) * 100ms),
  transform 400ms cubic-bezier(.34,1.56,.64,1)}
.ficon .mo-flap{transform-origin:50% 0}
.ficon .mo-binder{transform-origin:50% 100%}
.fcard{transition:transform 400ms cubic-bezier(.34,1.56,.64,1)}
.fcard:hover,.fcard:focus-visible{transform:translateY(-2px)}
.fcard:hover .mo-gear,.fcard:focus-visible .mo-gear{transform:rotate(30deg)}
.fcard:hover .mo-binder,.fcard:focus-visible .mo-binder{transform:rotate(-10deg)}
.fcard:hover .mo-coin,.fcard:focus-visible .mo-coin{transform:translateY(-5px)}
.fcard:hover .mo-check,.fcard:focus-visible .mo-check{transform:scale(1.18)}
.fcard:hover .mo-pen,.fcard:focus-visible .mo-pen{transform:translate(-4px,3px)}
.fcard:hover .mo-flap,.fcard:focus-visible .mo-flap{transform:scaleY(-1)}
@media (prefers-reduced-motion: reduce){
  .ficon *{stroke-dashoffset:0;transition:none}
  .ficon g,.ficon .mo-check,.ficon .mo-flap,.fcard{transition:none}
  .fcard:hover,.fcard:focus-visible,
  .fcard:hover .ficon *,.fcard:focus-visible .ficon *{transform:none}
}
IntersectionObserver (JavaScript) 
// Der eine IntersectionObserver: startet das Nachzeichnen, sobald 30 % des Rasters sichtbar sind
(function(){
  const grid=document.querySelector(".fgrid");
  if(!("IntersectionObserver" in window)){grid.classList.add("is-visible");return;}
  const io=new IntersectionObserver(es=>{es.forEach(e=>{if(e.isIntersecting){grid.classList.add("is-visible");io.disconnect();}});},{threshold:0.3});
  io.observe(grid);
})();