MitarbeiterPulsDashboard/anforderungen/logodesign.txt

Ja. Hier ist eine präzise, umsetzbare Beschreibung, damit eine KI oder ein Entwickler das Logo in **HTML/CSS responsiv nachbauen** kann.

## Gesamtwirkung

Das Logo besteht aus einer einzigen Wortmarke:

**„mitarbeiterpuls“**

Es ist ein **modernes, weiches, minimalistisches Sans-Serif-Logo** in **fett / extra-fett**, komplett in **Kleinbuchstaben** gesetzt. Die Schrift wirkt freundlich, digital, klar und leicht technisch. Besonders auffällig ist:

* sehr **runde Buchstabenformen**
* **gleichmäßige Strichstärke**
* **enge, aber nicht gedrängte Laufweite**
* weißer Text
* deutlicher **weicher Schatten**
* ein **orange leuchtender Punkt** über dem **i** am Anfang statt eines normalen weißen i-Punkts

## Aufbau des Logos

### 1. Wortmarke

Textinhalt:

`mitarbeiterpuls`

Alles kleingeschrieben.

### 2. Schriftcharakter

Die Schrift ähnelt einer sehr runden, fetten Grotesk. Stilistisch in Richtung:

* **Avenir Next Rounded Bold / Heavy**
* **Nunito ExtraBold**
* **M PLUS Rounded 1c ExtraBold**
* **Gotham Rounded Bold**
* **Arial Rounded** ist zu kindlich, also eher nicht ideal

Die Buchstaben sollen:

* kräftig und voluminös wirken
* breite Rundungen haben
* keine scharfen Ecken besitzen
* sehr gut lesbar sein
* eher **geometrisch** als handschriftlich aussehen

### 3. Farbe

Die Wortmarke selbst ist:

* **reinweiß bis leicht warmweiß**
* ungefähr: `#F5F5F3` bis `#FFFFFF`

Empfehlung:

* Textfarbe: `#F4F4F2`

## Typografische Details

### Schriftgewicht

Sehr fett:

* `font-weight: 800` bis `900`

### Laufweite

* neutral bis minimal negativ
* ungefähr: `letter-spacing: -0.01em` bis `-0.03em`

### Zeilenhöhe

* `line-height: 1`

### Verhältnis Höhe/Breite

Das Logo ist sehr breit und flach.

Grobe Proportionen:

* Gesamtbreite ca. **5,5 bis 6,5 mal** so groß wie die Texthöhe
* Das Wort nimmt fast die ganze Breite ein

## Der besondere Punkt über dem ersten „i“

Das wichtigste Markenelement ist der **orange Punkt** über dem ersten Buchstaben **i**.

### Eigenschaften

* nicht rein flach, sondern mit **Glow / Leuchteffekt**
* kreisrund
* kräftiges Orange

### Farbe

Kernfarbe ungefähr:

* `#FF7A1A`
* alternativ leicht heller: `#FF8124`

### Glow

Um den Punkt liegt ein **weicher, diffuser, orangefarbener Schein**.

Glow-Eindruck:

* innen kräftig orange
* außen weich auslaufend
* sichtbar deutlich größer als der eigentliche Punkt

### Größenverhältnis

* Punktdurchmesser ungefähr **4–5 % der gesamten Logobreite**
* bzw. ungefähr **35–45 % der x-Höhe** eines Buchstabens
* der Glow ist etwa **2 bis 2,8x** so groß wie der Punkt selbst

### Position

Der Punkt sitzt:

* exakt über dem ersten **i** in „mitarbeiterpuls“
* leicht oberhalb der normalen i-Punkt-Position
* optisch sauber mittig über dem i-Stamm
* nicht zu hoch, aber mit genug Luft, damit der Glow wirken kann

Wichtig:
Der **normale weiße i-Punkt** existiert dort nicht. Er wird durch den **orange leuchtenden Punkt** ersetzt.

## Schatten der Wortmarke

Die gesamte weiße Wortmarke hat einen **weichen, nach unten rechts fallenden Schlagschatten**.

### Schattencharakter

* weich
* diffus
* mittelstark
* elegant, nicht hart
* eher wie leichter 3D-/Floating-Effekt

### Richtung

* nach unten
* leicht nach rechts

### Empfehlung

In CSS als Kombination mehrerer Schatten:

* kleiner Schatten für Kontur/Tiefe
* größerer Schatten für weiche Fläche

Beispielwirkung:

* `0.02em 0.05em 0.06em rgba(0,0,0,0.18)`
* `0.04em 0.10em 0.18em rgba(0,0,0,0.16)`
* `0.06em 0.18em 0.30em rgba(0,0,0,0.10)`

Der Schatten soll im unteren Bereich der Buchstaben deutlicher sichtbar sein.

## Buchstabencharakter im Detail

Damit der Nachbau näher ans Original kommt:

### m

* sehr breit
* runde Übergänge
* dicke Stämme
* kompakt, weich

### i

* schmaler Stamm
* Punkt beim ersten i orange
* spätere i-Punkte normal weiß und rund

### t

* relativ kurzer Querbalken
* rundes Ende
* kräftiger Stamm

### a

* einstöckiges „a“ wirkt wahrscheinlich am passendsten
* rund, geschlossen, kompakt

### r

* kurzer Schulteransatz
* weich gerundet

### b / p / u / s

* sehr runde, freundliche Formen
* keine eckigen Innenräume
* besonders das `puls` wirkt weich und ausgewogen

## Hintergrund im Beispielbild

Das Bild zeigt nur die Wortmarke auf transparentem Hintergrund, aber im Screenshot ist ein Arbeitsraster zu sehen. Das Raster gehört **nicht** zum Logo.

Also:

* der eigentliche Logohintergrund ist **transparent**
* nur die weiße Wortmarke plus orange Glow gehören zum Design

## Responsive Umsetzung

Für responsive HTML/CSS sollte das Logo so gebaut werden:

### Prinzip

* ein Wrapper mit `position: relative`
* der eigentliche Text als ein Element
* der orange Punkt als separates, absolut positioniertes Element
* Skalierung über `font-size` mit `clamp()`
* Position des Punkts relativ zur Schriftgröße, nicht in fixen Pixeln

### Empfohlene Skalierungslogik

* Textgröße z. B. mit `clamp(2rem, 8vw, 8rem)`
* Punktgröße in `em`
* Glow ebenfalls in `em`
* Textschatten in `em`, damit alles mit der Schrift mitskaliert

## Präzise Stilbeschreibung für eine KI

Du kannst einer KI diesen Block direkt geben:

> Erzeuge ein responsives HTML/CSS-Logo für das Wort „mitarbeiterpuls“.
> Die Wortmarke ist komplett kleingeschrieben, in einer sehr fetten, runden Sans-Serif-Schrift mit freundlichem, modernem, geometrischem Charakter. Die Schrift ist weiß bis leicht warmweiß, mit einem weichen, diffusen Schatten nach unten rechts, sodass die Buchstaben leicht schwebend wirken.
> Der erste Buchstabe „i“ hat keinen normalen weißen Punkt. Stattdessen sitzt darüber ein runder orangefarbener Punkt mit kräftigem, weichem Glow. Der Punkt ist klar sichtbar, aber kleiner als ein Buchstabenauge, und der Glow ist etwa doppelt bis dreifach so groß wie der Punkt selbst.
> Das Logo soll auf transparentem Hintergrund funktionieren.
> Die Typografie soll breit, weich, sauber und hochwertig wirken.
> Das Layout muss responsiv sein: Textgröße über clamp(), orange Punkt relativ in em positionieren, Schatten ebenfalls skalierend in em anlegen.

## Noch genauer: CSS-Zielwerte

Falls eine KI konkrete Werte braucht:

* `font-family`: `"Avenir Next Rounded", "Nunito", "M PLUS Rounded 1c", sans-serif`
* `font-weight`: `800` oder `900`
* `color`: `#F4F4F2`
* `letter-spacing`: `-0.02em`
* `line-height`: `1`
* Textschatten:

  * `0.015em 0.03em 0.03em rgba(0,0,0,.18)`
  * `0.03em 0.08em 0.12em rgba(0,0,0,.14)`
  * `0.05em 0.14em 0.25em rgba(0,0,0,.10)`

Orange Punkt:

* `background: #FF7A1A`
* `width: 0.18em` bis `0.24em`
* `height: 0.18em` bis `0.24em`
* `border-radius: 50%`
* `box-shadow`:

  * `0 0 0.12em rgba(255,122,26,.95)`
  * `0 0 0.28em rgba(255,122,26,.72)`
  * `0 0 0.48em rgba(255,122,26,.38)`

## Hinweis zur Positionierung des orangefarbenen Punkts

Da der Punkt über dem **ersten i** sitzen muss, ist die sauberste Methode:

* Text in einzelne `span`s splitten
* das erste `i` in ein eigenes `span`
* den orangefarbenen Punkt über diesem `span` absolut platzieren

So bleibt das Logo auch responsiv korrekt.

## Kompakte Beschreibung für Prompting

Falls du nur einen kompakten Prompt brauchst:

> Minimalistische Wortmarke „mitarbeiterpuls“, komplett in Kleinbuchstaben, weiße extra-fette runde Sans-Serif-Schrift, weich und modern, mit dezentem weichen Schatten nach unten rechts. Über dem ersten „i“ sitzt ein kleiner orangefarbener Punkt mit warmem Glow statt eines normalen i-Punkts. Transparentes Logo, hochwertig, digital, freundlich, responsiv umsetzbar.

Ich kann dir daraus auch direkt den **fertigen HTML/CSS-Code** für einen möglichst originalgetreuen responsiven Nachbau erstellen.