Prototyp-Hinweise für die Umsetzung

1. Umfang und Seiten

Gebaut ist die öffentliche Website mit allen Einstiegen. Nicht Teil des Prototyps: Dashboard, Angebots- oder Auftragsverwaltung, Personaleinsatzplanung. Der Service-Einstieg (Montageanfrage) ist ein Entwurf des Anfrageverlaufs, kein funktionierendes Portal.

/

index.html

/montageservices/

Montageservices.dc.html · Anker #pv-montage, #pv-grossprojekte, #waermepumpenmontage, #elektroinstallation, #klimamontage

/marketing/

Marketing.dc.html

/digitalisierung/

Digitalisierung.dc.html

/ueber-uns/

Ueber-uns.dc.html

/blog/

Blog.dc.html · Themenfilter über ?thema=montage|marketing|digitalisierung

/blog/<slug>/

Blog-Artikel.dc.html?artikel=<slug> – eine Vorlage für alle Beiträge. Inhalte, Bildpfade und Alt-Texte zentral in assets/nrg-blog.js; im CMS je Beitrag eigene URL mit Titel, Beschreibung und Article-Daten. Die sechs Beiträge sind redaktionelle Entwürfe; Autor und Datum folgen nach Freigabe. Beitragsbilder: Bildprompts.md Nr. 21–26, bis dahin Platzhalter.

/kontakt/

Kontakt.dc.html · Thema-Vorauswahl über ?thema=marketing|digitalisierung|montage

/impressum/, /datenschutz/

Impressum.dc.html, Datenschutz.dc.html – Platzhaltervorlagen

/referenzen/

Referenzen.dc.html – Vorlage, unveröffentlicht und ohne Navigationseintrag

Portal-Einstieg

Montageanfrage.dc.html – Prototyp, noindex · Vorauswahl über ?leistung=pv-montage|pv-grossprojekt|waermepumpe|elektro|klima, Zusatzleistungen über ?zusatz=1

Wiederverwendbare Bausteine: Header.dc.html und Footer.dc.html (geteilt), Buttons, Leistungskarten, Qualitätsmodule, Bild-Text-Abschnitte, Profile, Referenzkarten, Prozessschritte, FAQ-Akkordeon, CTA-Band, Formularelemente mit Fehler-, Lade-, Erfolgs- und Fehlerzustand. Bildplätze sind per Drag-and-drop befüllbar (nur für Abstimmung, nicht für den Livebetrieb).

2. Unbestätigte Unternehmensangaben

• Unternehmensname, Rechtsform, Anschrift, Vertretung, Register- und Steuerangaben: offen. Die Umbenennung von „Network Energy Reich“ zu „NRG / network reich group“ begründet keine neue Rechtsperson – Rechtsträger bestätigen lassen.
• Kontaktdaten (E-Mail, Telefon) und Ansprechpartner mit Foto, Name, Funktion: offen. Name, E-Mail, Telefonnummer und Domain auf der Visitenkarte des Markenboards sind Gestaltungsmuster, keine Daten.
• Kein Firmensitz aus dem Einsatzgebiet Heidelberg/Mannheim abgeleitet. Keine Karte ohne bestätigte Adresse und Datenschutzkonzept.
• Keine Gründungsgeschichte, kein Gründungsjahr, keine Teamgröße, keine Kennzahlen, keine Zertifizierungen, keine Social-Media-Profile erfunden.

3. Leistungsumfang und Betriebsmodell

• Fünf Montagebereiche laut Briefing. Anschluss-, Prüf-, Inbetriebnahme-, Zertifizierungs- und Netzanmeldeleistungen sind auf allen Seiten ausdrücklich als „nur wenn vereinbart“ formuliert. Die Beispiele („z. B. Unterkonstruktion, Modulmontage“) vor Veröffentlichung mit dem tatsächlichen Angebot abgleichen.
• Die sechs Marketing- und sechs Digitalisierungsmodule sind Angebotsvorschläge aus dem Briefing und müssen als tatsächliches Angebot bestätigt werden.
• Betriebsmodell (eigene Ausführung, Vermittlung, Vertragspartner, Verantwortlichkeiten) ist offen. Texte beschreiben NRG weder als Arbeitgeber aller Fachkräfte noch als reinen Vermittler. „Fachkräfte des ausführenden Unternehmens“ (FAQ) stammt aus dem Briefing.
• Aussagen zu Erfahrung („Erfahrung aus vielfältigen Projekten“) und Qualifikationen sind bewusst auf den jeweiligen Auftrag bezogen. Konkrete Nachweise liefern.
• Aqua-Protect-/Wasserthemen, Shop und alte Leistungsseiten nicht übernommen. Die alte /shop/-Seite ist nicht als Montageportal angenommen.

4. Bildmaterial und Logo

• Alle Bildplätze zeigen generierte Platzhalterbilder aus Bildprompts.md (Nr. 01–26) mit Alt-Text; das Hero-Bild der Startseite ist sichtbar als „Platzhalter“ gekennzeichnet. Vor Veröffentlichung durch echte, freigegebene Fotos ersetzen. Keine KI-Personen als Mitarbeiter, keine synthetischen Anlagen als NRG-Projekte.
• Logo: freigestelltes PNG als Quelle (assets/nrg-logo-trim.png, transparent zugeschnitten), ausgeliefert als optimiertes WebP (assets/nrg-logo-trim.webp, 405 × 160 px, ca. 19 KB statt 614 KB), Proportionen unverändert. Benötigt: finales SVG, inverse Variante für dunkle Flächen (im Prototyp bewusst keine dunklen Flächen mit Logo), ggf. kompakte Variante ohne Descriptor für kleine Größen – der Zusatz „network reich group“ ist im Header bei 48 px Höhe nur ca. 8 px hoch.
• Schutzausrüstung auf Fotos muss zur gezeigten Tätigkeit passen.

5. Portal-URLs und Integration (Launch-Blocker)

PORTAL_LOGIN_URL

Ziel für „Login“ im Header und „Bereits registriert? Zum Login“. Im Prototyp ein gekennzeichneter Hinweis.

PORTAL_REGISTER_URL

Ziel für „Registrieren“. Registrierung: Unternehmensname, Name, geschäftliche E-Mail; weitere Daten erst bei Bedarf. Kostenfreiheit und Kontoprüfung nicht zugesagt.

PORTAL_SERVICE_ENTRY_URL

Ziel aller „… anfragen“-CTAs. Leistungsvorauswahl per Parameter nur, wenn das Portal sie übernimmt.

• Zwei Varianten im Prototyp (Tweak „portalMode“): Entwurf vor Registrierung (Angaben bleiben erhalten – nur zusagen, wenn die Integration es leistet) oder Registrierung zuerst (Ablauf wird vor der Weiterleitung erklärt).
• Standortprüfung: im Prototyp vereinfachte PLZ-Heuristik (68/69 im Gebiet; 64/67/74/76 Randlage). Produktiv über die Portal-Logik; nicht abgedeckte Standorte erhalten eine transparente Rückmeldung plus Kontaktweg.
• Upload deaktiviert. Produktiv nur mit sicherer Speicherung, Berechtigungen, serverseitiger Prüfung von Dateityp und Größe. Keine vertraulichen Unterlagen im Browser speichern, keine sensiblen Daten in URL-Parametern.
• Alle Erfolgszustände sind simuliert und gekennzeichnet („Prototyp – keine Anfrage versendet“). Produktiv erst nach serverseitiger Annahme bestätigen; bei Fehlern Eingaben erhalten (umgesetzt).
• Unterschied „Anfrage übermitteln“ vs. Angebotsannahme ist in Ablauf, Zusammenfassung und FAQ ausgewiesen.

6. Technik und Qualität

• Manrope im Prototyp über Google Fonts als eine variable Datei (wght 400..800) statt fünf Einzelschnitten geladen – produktiv selbst hosten (woff2, font-display: swap).
• Ladezeit im Prototyp: React-Laufzeit und die geteilten Bausteine Header/Footer werden im <head> vorgeladen (preload/preconnect), Hero-Bild als WebP (24 KB statt 590 KB). Bildplätze und Dateinamen für alle 20 Motive: Bildprompts.md.
• Bilder als WebP/AVIF mit festen Abmessungen; Hero priorisiert laden (kein Lazy Loading), Bilder unterhalb lazy. Ziele: LCP ≤ 2,5 s, INP ≤ 200 ms, CLS ≤ 0,1 – per Labortest prüfen.
• Öffentliche Seiten indexierbar mit eindeutigen Titeln, Beschreibungen, Canonicals, interner Verlinkung und XML-Sitemap. Portal, Konto- und Authentifizierungsseiten noindex. Strukturierte Daten nur mit realen Angaben, kein Bewertungs-Markup.
• Formulare: serverseitige Validierung, Spam-Schutz, Datenschutzhinweis mit Link (umgesetzt), keine pauschale Pflicht-Einwilligung, optionale Werbeeinwilligung nur separat und nicht vorausgewählt. Keine Formulardaten an Analytics.
• Barrierearmut (Ziel WCAG 2.2 AA, keine Zertifizierungsbehauptung): eine H1 je Seite, Skip-Link, sichtbarer Fokus, beschriftete Felder, Fehlermeldungen per aria, Akkordeon mit aria-expanded und Inhalten im HTML, Mobilmenü mit Escape, Fokusführung und Fokusrückgabe, Touch-Ziele ≥ 44 px, reduzierte Bewegung respektiert.

7. Designentscheidungen (Vorschläge, keine Geschäftsfakten)

• Farben: Navy #14252D, Mint #8EDBC3, Slate #66777D nach Markenboard. Flächen bewusst neutral ohne Gelbstich (statt Warmweiß/Sand): Hellgrund #F5F6F7, Grau #E6E9EB für Abschnittswechsel, Linien #D3D8DB, Kartenränder #C5CBCE.
• Kontrast (WCAG 2.1 AA nach EN 301 549 / BFSG): Brand-Slate erreicht auf Hellgrund nur ca. 4,3:1 und wird deshalb nicht für kleinen Text verwendet. Fließtext #2F3F45 (mind. 9,0:1), Nebentext und Labels #4A5A60 (mind. 5,9:1 auf Grau), auf Navy #C3CDD1 (ca. 9,7:1). Navy auf Mint für alle primären Buttons. Formularfeld-Rahmen #7A868B (mind. 3:1 gegen Weiß, Hellgrund und Grau). Fokus: zweifarbiger Ring Navy-Outline plus weißer Innenring, sichtbar auf hellen und dunklen Flächen (Mint allein erreicht auf Hellgrund nur 1,5:1). Aktiver Navigationspunkt mit Navy-Unterstrich statt Mint, aus demselben Grund. Mint bleibt Akzent auf Navy-Flächen und Buttons.
• Signatur aus dem Logo: angeschnittene Bildrahmen (Diagonalschnitt des G), großes N als leise Hintergrundform in Hero und dunklen Bändern, kurze Mint-Linien als Markierungen, diagonale Oberkante des Abschluss-Bands. Sparsam eingesetzt.
• Leistungsgrid: zwei PV-Karten auf Grau (3+3 Spalten) über drei Karten (2+2+2) – fünf Karten ohne Lücke; Tablet 2-spaltig, mobil gestapelt, kein Slider.
• Typografie Manrope: Hero 38–78 px, H2 32–50 px, Fließtext 16–18 px, Labels 13 px versal. Inhaltsbreite 1240 px, Textspalten max. 54–62 Zeichen.
• Interaktion und Bewegung (assets/nrg-ui.css, assets/nrg-ui.js, rein ergänzend – ohne die Dateien bleibt jede Seite vollständig nutzbar): Abschnitte blenden beim Scrollen einmalig ein (0,6–0,7 s, 18 px, Staffelung 60 ms), Mint-Linien zeichnen sich ein, Header wird beim Scrollen leicht transparent mit Lesefortschritt, „Nach oben“-Button ab ca. 1,2 Bildschirmhöhen, FAQ öffnet mit weicher Höhenanimation. Keine Endlosanimationen außer Ladeindikator; bei „Bewegung reduzieren“ entfällt alles.
• Icons: einheitliche Outline-Familie im Lucide-Stil (24-px-Raster, 1,75 px Strich, runde Enden), inline als SVG, immer aria-hidden neben sichtbarem Text. Leistungs-Icons: PV-Montage Modul, PV-Großprojekte Modulfeld, Wärmepumpe Außeneinheit, Elektro Blitz, Klima Schneeflocke – in Mint-Kacheln mit Diagonalschnitt als Logo-Signatur.
• Bedienung: Leistungskarten der Startseite sind vollständig klickbar; Montageservices hat eine mitlaufende Sprungnavigation mit Markierung des aktuellen Abschnitts (Desktop); im Anfrageverlauf führen erledigte Schritte per Klick zurück, Bearbeiten-Links tragen eindeutige Namen, Senden zeigt einen Ladezustand.
• CMS-Pflege vorgesehen für Hero, Leistungskarten, Qualitätsmerkmale, Profile, Referenzen, Kundenstimmen, FAQ, Ansprechpartner, Kontaktdaten, Meta-Daten und Portal-Ziele. Referenzen, Profile und Ansprechpartner lassen sich per Schalter ausblenden (Tweaks der Startseite).

8. Abnahme-Check

• ErfülltErster Bildschirm nennt Zielgruppe und Leistung; Montageleistungen stehen im zweiten Abschnitt; fünf Kategorien unterscheidbar; Marketing und Digitalisierung haben eigenständige Seiten; jeder CTA hat ein Ziel oder einen gekennzeichneten Prototyp-Zustand; Portalgrenze offen benannt; Platzhalter als solche erkennbar; mobile Hierarchie identisch.
• OffenEchte Fotos, Referenzen, Profile und Kennzahlen; Rechtstexte; Unternehmensangaben; Portal-URLs und Integrationsumfang; Bestätigung der Leistungsmodule; Labortest der Performance-Ziele; Kontrast- und Tastaturprüfung im finalen Build.