# mehr-sicht.at Statische Website für die Mediationspraxis Cornelia Neuhauser, gebaut mit [Astro](https://astro.build). Umsetzung des Websitekonzepts Fassung 3, Stand August 2026. **Stand:** Frontend vollständig, acht Seiten plus Fehlerseite. Kein Backend, kein Formularversand. --- ## Starten Voraussetzung: Node 18.17 oder neuer. ```bash npm install npm run dev # Entwicklungsserver auf http://localhost:4321 npm run build # erzeugt die fertige Website in dist/ npm run preview # baut und liefert dist/ zum Prüfen aus ``` Der Ordner `dist/` ist reines HTML, CSS, WOFF2 und JPEG. Er lässt sich auf jedes Webhosting kopieren — kein Node, keine Datenbank, kein Prozess auf dem Server. `dist/` muss dabei über einen Webserver ausgeliefert werden; ein Doppelklick auf `dist/index.html` funktioniert nicht, weil die Verlinkung absolut ist. --- ## Aufbau ``` src/ data/nav.js Navigation, Telefon, E-Mail — hier zentral ändern layouts/Base.astro , Metadaten, Kopf und Fuß components/ Brand.astro Wortmarke mit der Horizontlinie als Bindestrich Header.astro Hauptnavigation und Menü für kleine Bildschirme Footer.astro Hero.astro Titelbild mit srcset Figure.astro Bild im Textfluss mit Bildunterschrift pages/ eine Datei je Seite, die Adresse folgt dem Dateinamen styles/global.css Palette, Typografie, alle Bausteine public/ fonts/ selbst gehostete Schriften, WOFF2, inklusive Lizenzen images/ Fotos, je zwei Auflösungen ``` Adressen: `/`, `/warum-mediation`, `/themen`, `/ablauf`, `/ueber-mich`, `/kontakt`, `/impressum`, `/datenschutz`. --- ## Texte ändern Die Texte stehen direkt in den Seitendateien unter `src/pages/`. Längere Aufzählungen liegen am Kopf der Datei als Liste, damit Struktur und Inhalt getrennt bleiben: - `warum-mediation.astro` — die fünf Nutzenpunkte und die Grenzen - `themen.astro` — die sechs Anlässe samt Sprechsätzen - `ablauf.astro` — die fünf Schritte - `ueber-mich.astro` — die Qualifikationsliste Telefonnummer, E-Mail und die Navigationsbeschriftungen stehen in `src/data/nav.js` und wirken auf allen Seiten gleichzeitig. --- ## Gestaltung Alle Merkmale stehen als CSS-Variablen am Anfang von `src/styles/global.css`. | Rolle | Wert | |---|---| | Text, Granit | `#23282B` | | Akzent, Meerblau | `#1D5B66` | | Fläche hell, Nebel | `#EDF0F0` | | Fläche warm, nasser Sand | `#D8D4CB` | | Akzent sparsam, Abendrosé | `#C98F8A` | Schriften: **Newsreader** für Überschriften, **Atkinson Hyperlegible** für den Fließtext. Beide unter der SIL Open Font License, Lizenztexte liegen unter `public/fonts/lizenzen/`. Die Dateien sind auf den benötigten Zeichenvorrat reduziert und in den Achsen begrenzt, zusammen rund 130 KB. Das wiederkehrende Element ist die **Horizontlinie**: als Bindestrich in der Wortmarke, als Trennlinie zwischen den Abschnitten, als Rahmen der Textblöcke. --- ## Bilder Namensschema `name-breite.jpg`, jeweils zwei Auflösungen für `srcset`. Neue Bilder in `public/images/` ablegen und in der Seite über `` oder `
` einbinden: ```astro
``` Die Bildregel aus dem Konzept: **Farbe zeigt die Person, Schwarzweiß zeigt die Arbeit.** Die beiden Schwarzweißbilder sind kühl getont, damit sie zur Meerfotografie gehören, und die Buchrücken im Hintergrund sind weichgezeichnet. Nie beide Behandlungen im selben Bildschirmausschnitt. --- ## Datenschutz und Technik Bewusst umgesetzt, weil die Website mit Verschwiegenheit wirbt: - keine externen Aufrufe, Schriften selbst gehostet - kein Analyse- oder Trackingdienst, keine Cookies - kein JavaScript im Auslieferungszustand; das Menü auf kleinen Bildschirmen läuft über ein CSS-Zustandsfeld - `loading="lazy"` und `decoding="async"` für alle Bilder außer dem Titelbild - Sprungmarke zum Inhalt, sichtbarer Tastaturfokus, `prefers-reduced-motion` wird beachtet - Vorschaubilder und Seitentitel für das Teilen per Nachricht sind gesetzt --- ## Noch offen 1. **Kontaktformular** braucht eine Empfangsstelle. Ohne eigenen Server ist ein europäisch gehosteter Formulardienst der einfachste Weg. Vor der Auswahl den Auftragsverarbeitungsvertrag prüfen. 2. **Impressum und Datenschutz** sind Platzhalter. 3. **Telefonnummer, E-Mail und Praxisadresse** sind Platzhalter in `src/data/nav.js`. 4. **Porträtfoto und Über-mich-Text**: Die drei Sätze zum Warum sind ein Entwurf und gehören durch Connys eigene ersetzt. 5. **Stundensatz** wird bewusst nicht veröffentlicht. Der Satz auf `/warum-mediation`, der zum Nachfragen einlädt, muss bleiben. 6. **Geförderte Familienmediation** kommt erst auf die Website, wenn alle Eintragungen vorliegen. Die Struktur ist darauf vorbereitet: `/ueber-mich` kann zu einer Teamseite werden, ein Seitenplatz `/gefoerderte-familienmediation` ist reserviert. 7. **Sitemap**: bei Bedarf `@astrojs/sitemap` ergänzen, `robots.txt` verweist bereits darauf. --- ## Veröffentlichen `npm run build`, dann den Inhalt von `dist/` hochladen. Geeignet ist jedes Hosting für statische Dateien; für ein österreichisches Angebot mit Verschwiegenheitsanspruch spricht einiges für einen europäischen Anbieter. Alle erworbenen Schreibvarianten der Domain per 301 auf `mehr-sicht.at` weiterleiten.