Emma's Schatzkiste — statische Website, fünf Seiten
Umsetzung des Design-Handoffs als statisches HTML ohne Build-Schritt, nach dem Hausmuster der übrigen ASX-Websites. Seiten - index.html Startseite (blaue Welt) - hilfe-verein.html Hilfe Verein (gelbe Welt) - shop.html Platzhalter, Online-Shop bewusst nicht gebaut - impressum.html § 5 DDG - datenschutz.html Art. 13 DSGVO Design - Farbe lebt in Flächen und Display-Typo, nie im Fließtext — dadurch laufen alle drei Markenfarben, ohne die Hierarchie zu brechen. - Ein gesättigtes Vollflächen-Band pro Seite gegen die Blässe der reinen Pastellfassung. - Alle fünf Seiten bestehen WCAG AA im Kontrast. Mobil - Header unter 640px zweizeilig, Navigation als Viererraster, alle Touch-Ziele >= 44px (WCAG 2.5.5), Footer-Links >= 24px (2.5.8). - Geprüft bei 320/375/390/640/768/1024/1440/1920 px. Datenschutz - Keine Cookies, kein Storage, keine Skripte, null Fremdanfragen. Deshalb bewusst kein Einwilligungsbanner. - Fredoka und Nunito selbst gehostet statt über Google Fonts (LG München I, 3 O 17493/20). Bilder - Drei Pexels-Fotos, Lizenz geprüft, heruntergeladen und selbst gehostet. - Bewusst keine Kinderfotos: Pexels gibt kein Model Release. Offen: drei Angaben in den Rechtstexten, Foto Opa Martin, zwei Audiodateien. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Andrej StevanovskiandClaude Opus 5 committed
commit
92a6faaf54
31 files changed
+5880
No files matched your search
@@ -0,0 +1,11 @@
|
||||
{
|
||||
"version": "0.0.1",
|
||||
"configurations": [
|
||||
{
|
||||
"name": "emmas-schatzkiste",
|
||||
"runtimeExecutable": "python3",
|
||||
"runtimeArgs": ["-m", "http.server", "4173"],
|
||||
"port": 4173
|
||||
}
|
||||
]
|
||||
}
|
||||
+11
@@ -0,0 +1,11 @@
|
||||
# macOS
|
||||
.DS_Store
|
||||
._*
|
||||
|
||||
# Editor
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# Lokale Werkzeuge, nichts davon gehoert ins Repo
|
||||
*.log
|
||||
node_modules/
|
||||
@@ -0,0 +1,278 @@
|
||||
# Emma's Schatzkiste — Design-System
|
||||
|
||||
Live-Dateien: `index.html`, `hilfe-verein.html`, `shop.html`, `assets/site.css`.
|
||||
Stand 2026-09-21. Offene Punkte: [`README.md`](README.md).
|
||||
|
||||
## Benannte Referenz
|
||||
|
||||
Workspace-Regel: *kein UI-Code ohne benannte Referenz*. Diese Seiten stehen auf einer:
|
||||
|
||||
**[`emmas-schatzkiste-ds.md`](../design-references/entries/emmas-schatzkiste-ds.md)** —
|
||||
das mitgelieferte, gebundene Handoff-Design-System. Neue Familie *Warm Local Retail /
|
||||
Handmade Consumer*; vorher hatte die Bibliothek für ein Projekt dieser Art keinen Eintrag.
|
||||
|
||||
**Übernommen:** die handgelegte Headline (jede Zeile eigenes Grid-Item mit eigener
|
||||
Rotation), die Zwei-Farbwelten-Trennung Shop = blau / Verein = gelb, die eigene Kante der
|
||||
Vereinsseite (gelbe 6px-Unterkante, rotierte Pille statt Eyebrow-Text, zwei Buttons statt
|
||||
einem, freies Logo unten rechts), durchgehende Pill-Rundung, blaustichige Schatten,
|
||||
4px-Raster, Motion ausschließlich als Zustandsfeedback, Sprache und Tonalität.
|
||||
|
||||
**Nicht übernommen:** Dreifach-Akzent, neunstufige Typo-Skala, die durchgefallenen
|
||||
Textkontraste, die fixen Pixel-Stopps im Hero-Scrim, `mix-blend-mode` auf den Logos,
|
||||
Pexels-Hotlinks. Begründung je unten.
|
||||
|
||||
## Produktwahrheit
|
||||
|
||||
Baby- und Kinder-Second-Hand-Laden in **84056 Rottenburg a.d. Laaber**, seit September in
|
||||
neuer Hand. Dazu der **Hilfe Verein** („Hilfe. Herz. Hoffnung."), **noch nicht
|
||||
eingetragen** — deshalb keine Spendenstufen, kein Zahlungsformular, kein
|
||||
Mitgliedschafts-Flow. Drei Hilfearten, genau wie vom Kunden benannt: Geldspenden,
|
||||
ehrenamtliche Helfer, Weitersagen. Kontakt nur über `tel:` und `mailto:`.
|
||||
**Opa Martin** ist der Inhaber; Bild und Name, kein Bildtext — Kundenvorgabe.
|
||||
Der Online-Shop ist bewusst geparkt. Tonalität: **Du-Form**, Satzkleinschreibung, keine Emoji.
|
||||
|
||||
## Drei Abweichungen vom Handoff
|
||||
|
||||
Alle drei freigegeben. Der Handoff erklärt Farben und Typo für final; diese drei Punkte
|
||||
kollidieren mit den [Guardrails](../design-references/GUARDRAILS.md), zwei davon sind
|
||||
zusätzlich messbare Fehler.
|
||||
|
||||
### 1. Farbe — Guardrail bewusst gelockert
|
||||
|
||||
Guardrail: *„Ein einziger Akzent-Ton pro Seite."* Die erste Fassung hielt ihn streng ein
|
||||
und wurde vom Auftraggeber am 2026-09-21 als **zu blass** zurückgewiesen. Der Guardrail
|
||||
ist damit bewusst gelockert — dasselbe Vorgehen wie bei Hypno Active, wo die drei
|
||||
Logofarben ebenfalls gegen den Guardrail stehen und im CSS-Kopf dokumentiert sind.
|
||||
|
||||
Damit die Hierarchie trotzdem trägt, gilt eine harte Ersatzregel:
|
||||
|
||||
> **Farbe lebt in Flächen und in Display-Typo — nie im Fließtext.**
|
||||
|
||||
Alle drei Buntfamilien laufen wieder, aber ausschließlich als Sektionsflächen,
|
||||
Kachelfüllungen, Icon-Chips und H1-Zeilen. Jeder Fließtext bleibt `--ink-500` oder
|
||||
`--ink-700`. So konkurrieren die Farben nie auf derselben Leseebene.
|
||||
|
||||
Die Seitenidentität bleibt: `--accent*` ist weiter pro Seite gesetzt und regiert Icons,
|
||||
Rahmen, Kontaktkarten, Footer-Kante und den aktiven Nav-Zustand.
|
||||
|
||||
| Seite | `--accent` | `--accent-text` | `--accent-soft` | `--accent-line` |
|
||||
|---|---|---|---|---|
|
||||
| Startseite, Shop (`.page-shop`) | `--sky-500` | `--sky-600` | `--sky-50` | `--sky-400` |
|
||||
| Hilfe Verein (`.page-verein`) | `--sun-600` | `--sun-700` | `--sun-100` | `--sun-400` |
|
||||
|
||||
**H1 wieder dreifarbig,** Reihenfolge pro Seite gespiegelt: Startseite Sky → Sun → Coral,
|
||||
Verein Sun → Coral → Sky. Zulässig, weil Display-Typo ab 24px die Large-Text-Schwelle
|
||||
3.0 nutzt und alle drei Werte darüber liegen (auf Weiß 3.86 / 3.92 / 4.00, auf Creme
|
||||
3.52 / 3.57 / 3.65). Im Fließtext wäre keiner davon erlaubt.
|
||||
|
||||
**Ein gesättigtes Vollflächen-Band pro Seite.** Pastelltöne allein trugen die Seite nicht,
|
||||
sie verschwinden gegen Weiß. Startseite: „Für Familien" auf `--sky-500` mit weißer
|
||||
Überschrift und weißen Kacheln. Verein: „Wir brauchen Hilfe" auf `--sun-400` mit
|
||||
`--ink-700`. Weiß auf `--sky-500` misst 3.86 und reicht nur für Überschriften ab 24px —
|
||||
deshalb steht auf dem blauen Band **kein** Fließtext, der sitzt in den weißen Kacheln.
|
||||
`--ink-700` auf `--sun-400` misst 8.67 und ist überall zulässig.
|
||||
|
||||
Der Seitenrhythmus ist damit: Foto-Hero → Weiß → Creme → gesättigtes Band → Weiß →
|
||||
Creme-Band → Footer.
|
||||
|
||||
Coral bleibt unverändert **ausschließlich** Handlungsfarbe der primären Buttons.
|
||||
|
||||
Eine bewusste Ausnahme: das Band *„Wo alles angefangen hat"* auf der Vereinsseite steht im
|
||||
Blau der Shop-Welt. Es verweist auf den Laden; die Tönung markiert den Themenwechsel.
|
||||
|
||||
### 2. Kontrast
|
||||
|
||||
Guardrail: *„Graue Schrift auf farbigem Grund."* Gemessen statt geschätzt:
|
||||
|
||||
| Paar | Verhältnis | |
|
||||
|---|---|---|
|
||||
| `--ink-300` `#8B94A0` auf `--sun-100` `#FDF4DC` | **2.80** | durchgefallen — das war die §19-Zeile |
|
||||
| weiß auf `--coral-400` `#F4715A` | **2.85** | durchgefallen |
|
||||
| weiß auf `--sky-400` `#4A9FE0` | **2.87** | durchgefallen — Header-Farbe des Handoffs |
|
||||
| `--ink-500` `#4A5560` auf `--sun-100` | 6.94 | bestanden |
|
||||
|
||||
Der Fließtext auf Creme bestand also; dort war der Guardrail stilistisch. Die §19-Zeile
|
||||
und die beiden weiß-auf-bunt-Fälle waren echte Fehler.
|
||||
|
||||
Geändert: Text auf farbigem Grund steht in `--ink-700` (13.20 auf Creme). Der Header ist
|
||||
weiß mit `--ink-700`-Navigation statt `--sky-400` mit Weiß. Für den Primärbutton kamen drei
|
||||
Stufen dazu, die bei jedem Zustand nachdunkeln und nie heller werden:
|
||||
|
||||
| Zustand | Füllung | Weiß darauf |
|
||||
|---|---|---|
|
||||
| Ruhe | `--coral-600` `#C8402B` | 4.97 |
|
||||
| Hover | `--coral-700` `#B03422` | 6.25 |
|
||||
| Press | `--coral-800` `#A82F1E` | 6.80 |
|
||||
|
||||
Dazu `--sun-700` `#8F6510` für gelben Text in Body-Größe (4.74 auf Creme); `--sun-600`
|
||||
bleibt für Displaygrößen. `--coral-400` und `--sky-400` bleiben als Flächen im System,
|
||||
nicht mehr als Grund für weißen Text.
|
||||
|
||||
**Alle drei Seiten sind gegen WCAG AA geprüft, inklusive der Large-Text-Schwellen
|
||||
(≥24px, oder ≥18.66px ab Weight 700). Keine Verstöße.** Eine Stelle fiel dabei auf, die im
|
||||
Handoff nicht sichtbar war: `Lied vom Laden` stand in `--accent` bei 20px/600 — 3.86 bei
|
||||
verlangten 4.5, weil 20px/600 die Large-Text-Ausnahme nicht erreicht. Steht jetzt in
|
||||
`--accent-text`.
|
||||
|
||||
### 3. Typo-Skala
|
||||
|
||||
Guardrail: *„Typo-Extreme (groß oder klein, kein Mittelmaß)."* Neun gleichmäßige Stufen
|
||||
(56 · 42 · 32 · 24 · 19 · 17 · 15 · 13 · 11) sind genau das Mittelmaß — 24/19/17/15 liegen
|
||||
so dicht, dass der Unterschied nicht mehr liest.
|
||||
|
||||
Auf sechs reduziert, gestrichen sind 42, 24, 19 und 15:
|
||||
|
||||
| Token | Wert | Face |
|
||||
|---|---|---|
|
||||
| `--t-display` | `clamp(34px, 7.2vw, 60px)` / 1.02 | Fredoka 700 |
|
||||
| `--t-h2` | `clamp(24px, 3.1vw, 30px)` / 1.12 | Fredoka 600 |
|
||||
| `--t-h3` | 20px / 1.3 | Fredoka 600 |
|
||||
| `--t-body` | 17px / 1.65 | Nunito 400 |
|
||||
| `--t-small` | 13px / 1.5 | Nunito 400 |
|
||||
| `--t-label` | 11px / 1.4, `+0.08em`, versal | Nunito 700 |
|
||||
|
||||
Display-Tracking `-0.01em`. **Fredoka** und **Nunito** sind laut Handoff Platzhalter für
|
||||
einen nicht gelieferten Markenfont — ersetzen, sobald echte Binaries da sind. Kein Inter,
|
||||
kein System-Font.
|
||||
|
||||
## Weitere Korrekturen
|
||||
|
||||
**Hero unter 820px.** Der Handoff markiert die fixen Gradient-Stopps (430/560/820px) selbst
|
||||
als Schwachstelle: unter ~820px deckt der Scrim das Foto fast vollständig zu. Ab 820px
|
||||
bleibt der Scrim wie spezifiziert; darunter stapelt der Hero — Foto oben, Text darunter auf
|
||||
voller Fläche, Scrim aus.
|
||||
|
||||
**Mobile Header.** Wortmarke plus vier Nav-Items passen unter 640px nicht nebeneinander;
|
||||
die Nav brach aus den 64px heraus und legte sich über den Hero. Unter 640px ist die
|
||||
Wortmarke auf das Zeichen reduziert, die Nav enger und notfalls horizontal scrollbar statt
|
||||
umbrechend.
|
||||
|
||||
**Logos freigestellt.** Die Client-JPEGs haben einen eingebackenen weißen Kasten, im
|
||||
Handoff per `mix-blend-mode: multiply` kaschiert — das bricht auf jedem dunkleren Grund und
|
||||
ließ auf der Vereinsseite sichtbar Weiß stehen. Beide sind jetzt echt freigestellt
|
||||
(Flood-Fill über randverbundenes Nahe-Weiß plus weiche Kante, 800px, 96-Farben-Palette) und
|
||||
liegen als `assets/logo-*.png`, zusammen 135 KB statt 326 KB. Blend-Mode ist raus.
|
||||
|
||||
**Fokusring.** `--ring-focus` stand im Base-Block **vor** den Button-Regeln. Bei gleicher
|
||||
Spezifität gewinnt die spätere Regel, also überschrieb `.btn--primary` ihre eigene
|
||||
`box-shadow` über den Ring: auf Buttons war für Tastaturnutzer gar kein Fokus sichtbar. Der
|
||||
Fokus-Block steht jetzt am Dateiende, und `.btn:focus-visible` setzt Ring **und** eigenen
|
||||
Schatten. Geprüft mit echter Tab-Navigation.
|
||||
|
||||
**Keine Hotlinks.** Die beiden Pexels-Fotos waren auf ein fremdes CDN verlinkt. Statt sie
|
||||
zu übernehmen liegen beschriftete Platzhalter in `assets/`, die unübersehbar als solche
|
||||
lesen. Ersetzen, siehe README.
|
||||
|
||||
## Bilder
|
||||
|
||||
Alle Fotos von **Pexels**, [Lizenz](https://www.pexels.com/license/) am 2026-09-21 geprüft:
|
||||
kommerzielle Nutzung frei, keine Namensnennung nötig, Selbsthosting erlaubt. Sie sind
|
||||
**heruntergeladen und selbst gehostet**, nicht vom fremden CDN verlinkt wie im Handoff.
|
||||
|
||||
| Datei | Pexels-ID | Motiv |
|
||||
|---|---|---|
|
||||
| `assets/hero-start.jpg` | 10831693 | bunte Holzfahrzeuge auf Holz |
|
||||
| `assets/hero-verein.jpg` | 34148341 | Kindersachen auf der Kleiderstange |
|
||||
| `assets/laden-story.jpg` | 6591155 | Hände legen ein Oberteil zusammen |
|
||||
|
||||
**Bewusst keine Kinderfotos.** Pexels gibt für erkennbare Personen **kein Model Release**;
|
||||
für eine deutsche Gewerbeseite wäre das ein unnötiges Risiko. Deshalb Sachmotive und, beim
|
||||
Story-Bild, Hände ohne Gesicht. Aus demselben Grund aussortiert: Motive mit klar
|
||||
erkennbaren Personen und englischen Aufdrucken („VOLUNTEER", „DONATE") sowie die
|
||||
generischen Hände-im-Kreis-Klischees.
|
||||
|
||||
Beim Verein-Hero war im ersten Zuschnitt ein fremdes Kleidungs-Etikett sichtbar — weg
|
||||
geschnitten, weil die Pexels-Lizenz Darstellungen untersagt, die eine Markenempfehlung
|
||||
nahelegen.
|
||||
|
||||
Zuschnitte sind rechtsbetont: die Textspalte sitzt links unter dem Scrim, das Motiv muss
|
||||
im rechten Drittel liegen. Alle 2000×1100, progressives JPEG, Qualität 76.
|
||||
|
||||
Das Vereinslogo im Hero liegt auf einer weißen Karte — auf dem gemusterten Stoff war die
|
||||
feine Schrift darin sonst nicht lesbar.
|
||||
|
||||
## Motion
|
||||
|
||||
Nur Zustandsfeedback, wie im Handoff: 120ms Farbe, 200ms Lift, 340ms alles Größere,
|
||||
`--ease: cubic-bezier(.2,.6,.3,1)`. Hover hebt 3px und vertieft den Schatten, Press
|
||||
`scale(.97)` mit `--shadow-xs`. Kein Load-Fade, kein Parallax, keine Loop-Animation, kein
|
||||
Bounce-Easing. `prefers-reduced-motion: reduce` schaltet Transitions ab und stellt Headline,
|
||||
Pille und Logo aufrecht.
|
||||
|
||||
## Recht und Datenschutz
|
||||
|
||||
Kein Anwaltsersatz — aber die technische Seite ist so gebaut, dass möglichst wenig zu
|
||||
regeln bleibt.
|
||||
|
||||
**Die Seite macht null Anfragen an Dritte.** Gemessen im Browser: keine Cookies, kein
|
||||
Local oder Session Storage, keine Skripte, keine Iframes, keine Fremd-Origins. Damit ist
|
||||
§ 25 TDDDG nicht berührt und **ein Einwilligungsbanner ist nicht erforderlich** — es gibt
|
||||
nichts, wozu man einwilligen könnte. Das ist die bessere Lösung als ein aufgesetztes
|
||||
Banner: kein Klickhindernis, keine Consent-Logik, nichts, was falsch konfiguriert sein kann.
|
||||
|
||||
**Schriften selbst gehostet.** Vorher kamen Fredoka und Nunito von
|
||||
`fonts.googleapis.com` / `fonts.gstatic.com`. Das überträgt die IP jedes Besuchers an
|
||||
Google; das LG München I hat darin am 20.01.2022 (3 O 17493/20) eine Verletzung des
|
||||
Persönlichkeitsrechts gesehen. Beide liegen jetzt als woff2 in `assets/fonts/`, eingebunden
|
||||
über `assets/fonts.css`. Es sind Variable Fonts — alle Schnitte einer Familie in einer
|
||||
Datei, deshalb je eine `@font-face`-Deklaration mit Gewichtsbereich statt sechs. Nur die
|
||||
Subsets `latin` und `latin-ext`, zusammen 106 KB. Lizenz SIL OFL 1.1, Lizenztexte liegen
|
||||
daneben.
|
||||
|
||||
**Was bewusst fehlt:** die OS-Plattform. Sie wurde zum 20.07.2025 abgeschaltet
|
||||
(VO (EU) 2024/3228), die Hinweispflicht ist entfallen, und ein stehengebliebener Link
|
||||
darauf ist inzwischen selbst abmahnfähig. Beim Übernehmen alter Rechtstexte ist das der
|
||||
erste Punkt, den man rauswerfen muss.
|
||||
|
||||
**Zwei neue Seiten:** `impressum.html` (§ 5 DDG — nicht mehr § 5 TMG, das ist seit Mai 2024
|
||||
abgelöst) und `datenschutz.html`. Beide nutzen die `.prose`-Klassen. Offene Angaben stehen
|
||||
als `.todo`-Felder mit gestricheltem Coral-Rahmen im Fließtext, damit nichts davon
|
||||
versehentlich live geht, plus ein `.prose__warn`-Kasten oben auf jeder Seite.
|
||||
|
||||
## Mobil und Touch
|
||||
|
||||
Geprüft bei 320 · 375 · 390 · 640 · 768 · 1024 · 1440 · 1920 px, auf allen fünf Seiten,
|
||||
jeweils auf horizontalen Overflow, Zielgrößen, Schriftgrößen und Randabstände. Alles
|
||||
sauber. Gefunden und behoben wurde dabei:
|
||||
|
||||
**Der Header war auf dem Handy kaputt.** Nav-Links 28px hoch, Wortmarken-Link 32px breit,
|
||||
und unter 400px scrollte die Navigation seitlich weg, ohne dass es jemand sieht. Jetzt
|
||||
unter 640px zwei Zeilen: Wortmarke mittig, darunter die vier Punkte als Viererraster über
|
||||
die volle Breite, jedes Ziel 44px. „Hilfe Verein" bricht bei 320px sauber um. Der Header
|
||||
ist auf dem Handy dafür **nicht mehr sticky** — zwei Zeilen würden dauerhaft ein Sechstel
|
||||
des Displays wegnehmen, und bei fünf Unterseiten ist eine mitlaufende Navigation kein
|
||||
Verlust.
|
||||
|
||||
**Zielgrößen nach WCAG.** Zwei Schwellen, bewusst getrennt:
|
||||
|
||||
| Element | vorher | jetzt | Maßstab |
|
||||
|---|---|---|---|
|
||||
| Nav-Links, Wortmarke | 28–34px | 44px | 2.5.5 (AAA) |
|
||||
| Telefon/E-Mail in Kontaktkarten | 23px | 44px | wichtigste Links der Seite |
|
||||
| Telefon/E-Mail im Impressum | 23px | 44px | stehen allein, nicht im Satz |
|
||||
| Footer-Links | 21px | 30px Desktop, 44px Handy | 2.5.8 (AA) verlangt 24px |
|
||||
|
||||
Links **mitten im Fließtext** (etwa der Pexels-Verweis) bleiben unverändert — für die gilt
|
||||
die Inline-Ausnahme von WCAG 2.5.8.
|
||||
|
||||
**Schriftgrößen.** Die 11px-Versallabels gehen auf dem Handy auf 12px hoch. Auf dem Desktop
|
||||
bleiben sie bei 11px, so wie das Handoff-DS es vorgibt.
|
||||
|
||||
**Versionierte Stylesheets.** Die CSS-Links tragen einen Hash des Dateiinhalts
|
||||
(`site.css?v=…`). Ändert sich das CSS, ändert sich die URL, und Besucher mit altem
|
||||
Browser-Cache bekommen zwingend die neue Datei. `deploy.sh` setzt den Hash bei jedem
|
||||
Deploy automatisch neu. Das war keine Theorie: beim Testen hat der Panel-Cache mehrfach
|
||||
veraltetes CSS ausgeliefert und Korrekturen als „nicht gewirkt" erscheinen lassen.
|
||||
|
||||
## Technik
|
||||
|
||||
Statische Seiten ohne Build, wie die übrigen `Websites/*` im Workspace. Eine Abweichung vom
|
||||
Hausmuster: das CSS liegt als `assets/site.css` statt inline, weil es drei Seiten trägt.
|
||||
Icons sind als Lucide-Pfade inline gesetzt — kein CDN-UMD-Build, keine Netzabhängigkeit.
|
||||
Fonts über Google Fonts mit `preconnect`.
|
||||
|
||||
Lokal ansehen:
|
||||
|
||||
```bash
|
||||
cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173
|
||||
```
|
||||
@@ -0,0 +1,97 @@
|
||||
# Emma's Schatzkiste — Website
|
||||
|
||||
Drei statische Seiten für den Baby- und Kinder-Second-Hand-Laden in Rottenburg a.d. Laaber
|
||||
und den zugehörigen Hilfe Verein.
|
||||
|
||||
| Datei | Seite |
|
||||
|---|---|
|
||||
| `index.html` | Startseite |
|
||||
| `hilfe-verein.html` | Hilfe Verein (`#helfen`, `#kontakt`) |
|
||||
| `shop.html` | Online-Shop, bewusst geparkt („Im Aufbau") |
|
||||
| `assets/site.css` | gemeinsames Stylesheet, Tokens und Komponenten |
|
||||
| `design_handoff_emmas_schatzkiste/` | Original-Handoff, unverändert |
|
||||
|
||||
Design-Entscheidungen und Abweichungen: [`DESIGN.md`](DESIGN.md).
|
||||
Benannte Referenz: [`emmas-schatzkiste-ds.md`](../design-references/entries/emmas-schatzkiste-ds.md).
|
||||
|
||||
Kein Build. Lokal ansehen:
|
||||
|
||||
```bash
|
||||
cd "/Users/andrej/ASX Studio/Emmas schatzkiste" && python3 -m http.server 4173
|
||||
```
|
||||
|
||||
## Was noch fehlt
|
||||
|
||||
### Vor dem Launch zwingend
|
||||
|
||||
1. **Zwei Felder in der Datenschutzerklärung, eine Bestätigung im Impressum.** Beide
|
||||
Seiten existieren, sind im Footer verlinkt und bestehen den Kontrast-Check. Aus dem
|
||||
Impressum der alten Seite übernommen und eingetragen: **Martin Lindenau, Hollerstraße 2,
|
||||
84056 Rottenburg a.d. Laaber**. Hoster STRATO GmbH ist eingetragen. Offen, jeweils rot
|
||||
gestrichelt auf der Seite markiert:
|
||||
|
||||
- Impressum: bestätigen, dass es ein Kleingewerbe ohne Handelsregistereintrag ist.
|
||||
- Datenschutz: AV-Vertrag nach Art. 28 DSGVO mit STRATO abschließen (im STRATO-Kundenkonto
|
||||
verfügbar) und Datum eintragen; Speicherdauer der Server-Logfiles nachsehen.
|
||||
|
||||
**Ein Cookie-Banner ist nicht nötig** — gemessen: keine Cookies, kein Storage, keine
|
||||
Fremdanfragen. Details in [`DESIGN.md`](DESIGN.md#recht-und-datenschutz).
|
||||
Beide Texte sind Entwürfe und sollten vor dem Launch juristisch geprüft werden.
|
||||
|
||||
2. **Die alte Datenschutzerklärung ist eine leere Vorlage — dringend.** Unter
|
||||
`emmas-schatzkiste.de/datenschutzerklarung/` steht aktuell noch der unausgefüllte
|
||||
Mustertext („Bitte geben Sie den Namen Ihres Datenverantwortlichen ein"). Das ist ein
|
||||
laufender Verstoß gegen Art. 13 DSGVO und unabhängig von dieser neuen Seite. Entweder
|
||||
die alte Seite abschalten oder den Text dort sofort ersetzen.
|
||||
|
||||
### Vom Kunden ausstehend
|
||||
|
||||
3. **Foto von Opa Martin.** Der Slot auf der Startseite ist 1:1 und beschriftet. Bild
|
||||
einsetzen: den `<div class="portrait__slot">` durch
|
||||
`<img src="assets/opa-martin.jpg" alt="Opa Martin">` ersetzen — der Kommentar steht an
|
||||
der Stelle. Bild und Name, kein Bildtext (Kundenvorgabe).
|
||||
4. **Zwei Audiodateien** — ein Lied für den Laden, eines für den Verein. Bis dahin ist der
|
||||
Player sichtbar deaktiviert, mit Badge „Audio folgt". Beim Einbau: je ein `<audio>`
|
||||
verdrahten, Button aktivieren, Fortschrittsbalken aus `timeupdate` treiben,
|
||||
Abspielposition in `localStorage` merken. **Ein Lied pro Seite, nicht beide auf beiden**
|
||||
(Kundenvorgabe).
|
||||
5. **Öffnungszeiten und vollständige Anschrift.** Bekannt sind nur Postleitzahl und Ort.
|
||||
Der Footer sagt bis dahin „Öffnungszeiten folgen".
|
||||
6. **Logos als Vektor.** Die gelieferten JPEGs sind freigestellt worden (siehe DESIGN.md),
|
||||
aber eine SVG- oder transparente PNG-Originaldatei wäre sauberer, besonders fürs
|
||||
Header-Zeichen bei 32px.
|
||||
7. **Rechtsform des Vereins.** Noch nicht eingetragen; die Seite spricht deshalb nur vom
|
||||
„Hilfe Verein". Sobald eingetragen: Name und Rechtsform überall nachziehen, dann sind
|
||||
auch Spendenquittungen und ein echter Spendenweg möglich.
|
||||
|
||||
### Nicht bauen
|
||||
|
||||
Der Online-Shop bleibt geparkt — kein Storefront, kein Warenkorb, kein Checkout. Der
|
||||
Nav-Eintrag bleibt trotzdem sichtbar, damit Besucher wissen, dass da etwas kommt. Falls
|
||||
später doch ein Shop entsteht: die §19-UStG-Zeile muss zusätzlich im Checkout und auf
|
||||
Rechnungen stehen.
|
||||
|
||||
## Inhaltliche Lücke gegenüber der alten Seite
|
||||
|
||||
Die alte Seite `emmas-schatzkiste.de` führt Angebote, die auf der neuen Seite nirgends
|
||||
vorkommen. Der Handoff erwähnt sie nicht — vermutlich übersehen, nicht bewusst gestrichen:
|
||||
|
||||
- **Verleih** von Reisebetten und Atemmonitoren
|
||||
- **UPS Access Point**
|
||||
- **Zahlungsarten** bar, Karte und PayPal
|
||||
- eigene Seiten „Über uns" und „Unser Laden" (der Nav-Punkt „Unser Laden" wurde laut
|
||||
Handoff allerdings ausdrücklich vom Kunden entfernt)
|
||||
|
||||
Bitte klären, ob das weiterhin angeboten wird. Besonders der Verleih und der UPS Access
|
||||
Point sind starke Gründe, überhaupt in den Laden zu kommen — die würde ich nicht
|
||||
verschweigen.
|
||||
|
||||
## Vom Handoff fehlt
|
||||
|
||||
Der Bundle enthält `design/_ds/…/styles.css` und `_ds_bundle.js` **nicht** — die drei
|
||||
`.dc.html`-Prototypen lassen sich damit nicht öffnen. Die elf Komponenten (`SiteHeader`,
|
||||
`SiteFooter`, `Button`, `IconButton`, `Icon`, `Badge`, `SectionHeader`, `InfoTile`,
|
||||
`TrustBadge`, `ImagePlaceholder`, `Decor`) waren nur über Name und Prop-Liste bekannt; ihr
|
||||
Innenleben ist hier aus der Token-Tabelle und den Inline-Styles rekonstruiert. Falls der
|
||||
Absender den `_ds/`-Ordner nachliefert, lohnt ein Abgleich — vor allem bei `InfoTile`,
|
||||
`TrustBadge` und `SiteFooter`.
|
||||
@@ -0,0 +1,52 @@
|
||||
/* Selbst gehostete Schriften — Fredoka und Nunito, beide SIL Open Font License 1.1.
|
||||
|
||||
Lokal statt ueber fonts.googleapis.com / fonts.gstatic.com: das Einbinden ueber Googles
|
||||
CDN uebertraegt die IP-Adresse jedes Besuchers in die USA, ohne dass der Besucher
|
||||
zustimmen konnte. Das LG Muenchen I hat das am 20.01.2022 (3 O 17493/20) als
|
||||
Verletzung des Persoenlichkeitsrechts gewertet. Selbst gehostet entfaellt der
|
||||
Drittkontakt vollstaendig — und damit auch der Grund fuer ein Einwilligungsbanner.
|
||||
|
||||
Beides sind VARIABLE FONTS: alle Schnitte einer Familie stecken in einer Datei,
|
||||
deshalb je eine Deklaration mit Gewichtsbereich statt sechs Einzelgewichten.
|
||||
Nur die Subsets latin und latin-ext — deckt Deutsch vollstaendig ab.
|
||||
Geholt am 2026-09-21 ueber die Google Fonts API v2. Lizenz: fonts/OFL.txt */
|
||||
|
||||
/* Fredoka — Display, 500-700 */
|
||||
@font-face {
|
||||
font-family: 'Fredoka';
|
||||
font-style: normal;
|
||||
font-weight: 500 700;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url(fonts/fredoka-500-latin.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Fredoka';
|
||||
font-style: normal;
|
||||
font-weight: 500 700;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url(fonts/fredoka-500-latin-ext.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* Nunito — Body, 400-700 */
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
font-style: normal;
|
||||
font-weight: 400 700;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url(fonts/nunito-400-latin.woff2) format('woff2');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Nunito';
|
||||
font-style: normal;
|
||||
font-weight: 400 700;
|
||||
font-stretch: 100%;
|
||||
font-display: swap;
|
||||
src: url(fonts/nunito-400-latin-ext.woff2) format('woff2');
|
||||
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||
}
|
||||
@@ -0,0 +1,93 @@
|
||||
Copyright 2016 The Fredoka Project Authors (https://github.com/hafontia/Fredoka-One)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
@@ -0,0 +1,93 @@
|
||||
Copyright 2014 The Nunito Project Authors (https://github.com/googlefonts/nunito)
|
||||
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 214 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
+537
@@ -0,0 +1,537 @@
|
||||
/*
|
||||
EMMA'S SCHATZKISTE — Startseite · Hilfe Verein · Shop
|
||||
Stand 2026-09-21
|
||||
|
||||
BENANNTE REFERENZ (Workspace-Regel: kein UI-Code ohne benannte Referenz)
|
||||
→ design-references/entries/emmas-schatzkiste-ds.md
|
||||
Übernommen: die handgelegte Headline (jede Zeile eigene Rotation), die
|
||||
Zwei-Farbwelten-Trennung Shop=blau / Verein=gelb, die durchgehende Pill-Rundung,
|
||||
die blaustichigen Schatten, das 4px-Raster, Motion nur als Zustandsfeedback,
|
||||
Sprache/Tonalität (Deutsch, Du-Form, Satzkleinschreibung, keine Emoji).
|
||||
NICHT übernommen: der Dreifach-Akzent, die neunstufige Typo-Skala, die
|
||||
durchgefallenen Textkontraste, die fixen Pixel-Stopps im Hero-Scrim.
|
||||
|
||||
BEWUSSTE ABWEICHUNGEN VOM HANDOFF — alle drei vom Auftraggeber freigegeben,
|
||||
Begründung je Guardrail:
|
||||
|
||||
1. FARBE — bewusste Abweichung vom Guardrail "Ein einziger Akzent-Ton pro Seite",
|
||||
auf ausdrücklichen Kundenwunsch (2026-09-21: die disziplinierte Ein-Akzent-Fassung
|
||||
wurde als zu blass empfunden). Gleiches Vorgehen wie bei Hypno Active, wo die drei
|
||||
Logofarben ebenfalls gegen den Guardrail stehen und dokumentiert sind.
|
||||
|
||||
Damit die Hierarchie trotzdem trägt, gilt eine harte Regel:
|
||||
FARBE LEBT IN FLÄCHEN UND IN DISPLAY-TYPO — NIE IM FLIESSTEXT.
|
||||
Alle drei Buntfamilien laufen wieder, aber nur als Sektionsflächen, Kachelfüllungen,
|
||||
Icon-Chips und H1-Zeilen. Jeder Fliesstext bleibt --ink-500 / --ink-700. Damit
|
||||
kollidieren die Farben nie miteinander um dieselbe Leseebene.
|
||||
Die Seitenidentität bleibt erhalten: --accent* ist weiter pro Seite gesetzt
|
||||
(Startseite Sky, Verein Sun) und regiert Icons, Rahmen und aktiven Nav-Zustand.
|
||||
Coral bleibt ausschliesslich Handlungsfarbe der primären Buttons.
|
||||
|
||||
2. KONTRAST (Guardrail "Graue Schrift auf farbigem Grund")
|
||||
Gemessen, nicht geschätzt:
|
||||
ink-300 #8B94A0 auf sun-100 #FDF4DC .... 2.80 durchgefallen (§19-Zeile!)
|
||||
weiß auf coral-400 #F4715A ............... 2.85 durchgefallen
|
||||
weiß auf sky-400 #4A9FE0 ................. 2.87 durchgefallen
|
||||
ink-500 #4A5560 auf sun-100 .............. 6.94 bestanden
|
||||
Auf farbigem Grund steht Text jetzt in --ink-700 (13.20 auf Creme).
|
||||
Primärbutton: weiß auf --coral-600 #C8402B (4.97), Hover #B03422 (6.25),
|
||||
Press #A82F1E (6.80) — dunkelt bei jedem Schritt nach, nie heller.
|
||||
Header: weiß statt sky-400, damit die Navigation nicht weiß auf Hellblau steht.
|
||||
|
||||
3. TYPO-SKALA (Guardrail "Typo-Extreme, kein Mittelmaß")
|
||||
Neun gleichmäßige Stufen (56/42/32/24/19/17/15/13/11) auf sechs reduziert.
|
||||
Gestrichen: 42, 24, 19, 15. Bleibt: Display / 30 / 20 / 17 / 13 / 11.
|
||||
|
||||
ASSETS: Die Client-Logos kamen als JPEG mit eingebackenem weissem Kasten, im Handoff
|
||||
per mix-blend-mode:multiply kaschiert — das bricht auf jedem dunkleren Grund. Beide sind
|
||||
jetzt echt freigestellt (Flood-Fill ueber randverbundenes Nahe-Weiss + weiche Kante,
|
||||
800px, 96-Farben-Palette, 67/68 KB) und liegen als assets/logo-*.png. Kein Blend-Mode
|
||||
mehr noetig. Originale: design_handoff_emmas_schatzkiste/assets/.
|
||||
|
||||
FONTS: Fredoka + Nunito. Laut Handoff Platzhalter für einen nicht gelieferten
|
||||
Markenfont — ersetzen, sobald echte Binaries da sind. Kein Inter, kein System-Font.
|
||||
*/
|
||||
|
||||
/* ============================================================ TOKENS */
|
||||
:root{
|
||||
/* Marke, unverändert aus dem Handoff */
|
||||
--sky-400:#4A9FE0; --sky-500:#2E86D0; --sky-600:#1F6BAB;
|
||||
--sky-50:#EAF4FC; --sky-100:#CFE6F8;
|
||||
--sun-400:#F5C13B; --sun-600:#A87811; --sun-100:#FDF4DC;
|
||||
--coral-400:#F4715A; --coral-500:#DB513A; --coral-50:#FFF1EE;
|
||||
|
||||
/* Ergänzt für AA-Textkontrast — siehe Abweichung 2 */
|
||||
--sun-700:#8F6510; /* gelber Text in Body-Größe: 4.74 auf Creme */
|
||||
--coral-600:#C8402B; /* Primärbutton, weiß darauf: 4.97 */
|
||||
--coral-700:#B03422; /* Hover: 6.25 */
|
||||
--coral-800:#A82F1E; /* Press: 6.80 */
|
||||
|
||||
/* Getönte Neutrale (blaustichig, kein reines Grau) */
|
||||
--ink-300:#8B94A0; --ink-500:#4A5560; --ink-700:#232A33;
|
||||
--line-soft:#EDEFF2; --line:#DFE3E8;
|
||||
|
||||
--surface-page:#FFFFFF; --surface-card:#FFFFFF; --surface-sunk:#F5F7FA;
|
||||
--surface-band:#FDF4DC; --surface-band-cool:#EAF4FC; --surface-footer:#FDF4DC;
|
||||
|
||||
/* Pro Seite überschrieben — genau ein Identitätsakzent */
|
||||
--accent:var(--sky-500);
|
||||
--accent-text:var(--sky-600);
|
||||
--accent-soft:var(--sky-50);
|
||||
--accent-line:var(--sky-400);
|
||||
|
||||
/* Typo — sechs Stufen */
|
||||
--t-display: 700 clamp(34px, 7.2vw, 60px)/1.02 'Fredoka', 'Trebuchet MS', sans-serif;
|
||||
--t-h2: 600 clamp(24px, 3.1vw, 30px)/1.12 'Fredoka', 'Trebuchet MS', sans-serif;
|
||||
--t-h3: 600 20px/1.3 'Fredoka', 'Trebuchet MS', sans-serif;
|
||||
--t-body: 400 17px/1.65 'Nunito', 'Segoe UI', sans-serif;
|
||||
--t-small: 400 13px/1.5 'Nunito', 'Segoe UI', sans-serif;
|
||||
--t-label: 700 11px/1.4 'Nunito', 'Segoe UI', sans-serif;
|
||||
--ls-display:-0.01em; --ls-caps:0.08em;
|
||||
|
||||
/* Raster 4px. --space-14 existiert im Handoff nicht und fehlt hier bewusst auch. */
|
||||
--space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
|
||||
--space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px;
|
||||
--space-16:64px; --space-20:80px; --space-24:96px;
|
||||
|
||||
--page-max:1180px; --page-pad-x:24px; --gutter-grid:20px; --header-h:64px;
|
||||
|
||||
--radius-xs:6px; --radius-s:10px; --radius-m:14px; --radius-l:20px; --radius-xl:28px;
|
||||
--radius-band:24px; --radius-pill:999px;
|
||||
|
||||
--shadow-xs:0 1px 2px rgba(35,52,74,.06);
|
||||
--shadow-card:0 2px 10px rgba(35,52,74,.07);
|
||||
--shadow-card-hover:0 10px 24px rgba(35,52,74,.13);
|
||||
--shadow-band:0 4px 22px rgba(35,52,74,.09);
|
||||
--shadow-button:0 2px 0 rgba(35,52,74,.10);
|
||||
--ring-focus:0 0 0 3px var(--sky-100), 0 0 0 5px var(--sky-400);
|
||||
|
||||
--ease:cubic-bezier(.2,.6,.3,1);
|
||||
--dur-color:120ms; --dur-lift:200ms; --dur-large:340ms;
|
||||
}
|
||||
|
||||
/* Vereinsseite: gelbe Welt. Einziger Akzentwechsel im ganzen System. */
|
||||
.page-verein{
|
||||
--accent:var(--sun-600);
|
||||
--accent-text:var(--sun-700);
|
||||
--accent-soft:var(--sun-100);
|
||||
--accent-line:var(--sun-400);
|
||||
}
|
||||
|
||||
/* ============================================================ BASE */
|
||||
*{box-sizing:border-box}
|
||||
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
|
||||
body{
|
||||
margin:0; background:var(--surface-page); color:var(--ink-500);
|
||||
font:var(--t-body); -webkit-font-smoothing:antialiased;
|
||||
}
|
||||
h1,h2,h3{margin:0; letter-spacing:var(--ls-display); color:var(--ink-700)}
|
||||
h1{font:var(--t-display)} h2{font:var(--t-h2)} h3{font:var(--t-h3)}
|
||||
p{margin:0}
|
||||
img{max-width:100%; display:block}
|
||||
a{color:var(--accent-text); text-underline-offset:3px}
|
||||
a:hover{color:var(--sky-600)}
|
||||
|
||||
.wrap{max-width:var(--page-max); margin:0 auto; padding-inline:var(--page-pad-x)}
|
||||
.section{padding-block:var(--space-16)}
|
||||
.section--tight{padding-block:var(--space-12)}
|
||||
|
||||
/* Getoente Vollflaechen statt durchgehendem Weiss. Geben der Seite Rhythmus und
|
||||
tragen den groessten Teil der Farbe — ohne einen einzigen Fliesstext einzufaerben. */
|
||||
.field{padding-block:var(--space-16)}
|
||||
.field--cool{background:var(--sky-50)}
|
||||
.field--warm{background:var(--sun-100)}
|
||||
.field--rose{background:var(--coral-50)}
|
||||
.field--sunk{background:var(--surface-sunk)}
|
||||
|
||||
/* Ein gesaettigtes Vollflaechen-Band pro Seite. Pastelltoene allein trugen die Seite
|
||||
nicht — sie verschwinden gegen Weiss. Gemessen: Weiss auf --sky-500 = 3.86, reicht
|
||||
fuer Ueberschriften ab 24px (Schwelle 3.0), NICHT fuer Fliesstext; deshalb steht auf
|
||||
dem blauen Band nur die Ueberschrift, der Fliesstext sitzt in den weissen Kacheln.
|
||||
--ink-700 auf --sun-400 = 8.67 und ist ueberall zulaessig. */
|
||||
.field--solid-sky{background:var(--sky-500)}
|
||||
.field--solid-sky h2{color:#fff}
|
||||
.field--solid-sky .lede{color:#fff}
|
||||
.field--solid-sun{background:var(--sun-400)}
|
||||
.field--solid-sun h2, .field--solid-sun .lede{color:var(--ink-700)}
|
||||
.field--solid-sky .sh__chip, .field--solid-sun .sh__chip{background:var(--surface-card); color:var(--ink-700)}
|
||||
.field--solid-sky .tile, .field--solid-sun .tile{background:var(--surface-card)}
|
||||
.lede{font:var(--t-body); color:var(--ink-500); max-width:56ch}
|
||||
.label{
|
||||
font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
|
||||
color:var(--ink-500);
|
||||
}
|
||||
.skip{
|
||||
position:absolute; left:-9999px; top:0; z-index:100;
|
||||
background:var(--surface-card); color:var(--ink-700); padding:12px 18px;
|
||||
border-radius:var(--radius-pill); box-shadow:var(--shadow-card);
|
||||
}
|
||||
.skip:focus{left:var(--page-pad-x); top:12px}
|
||||
|
||||
/* ============================================================ HEADER */
|
||||
/* Weiß statt --sky-400: weiße Navigation auf Hellblau misst 2.87 und fällt durch. */
|
||||
.hdr{
|
||||
position:sticky; top:0; z-index:50; height:var(--header-h);
|
||||
background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(10px);
|
||||
border-bottom:1px solid var(--line-soft);
|
||||
}
|
||||
.hdr__in{
|
||||
height:100%; display:flex; align-items:center; justify-content:space-between;
|
||||
gap:var(--space-6);
|
||||
}
|
||||
.hdr__brand{
|
||||
display:flex; align-items:center; gap:10px; text-decoration:none;
|
||||
font:var(--t-h3); color:var(--ink-700); white-space:nowrap;
|
||||
min-height:44px; /* Touch-Ziel, auch auf Tablets */
|
||||
}
|
||||
.hdr__brand img{width:34px; height:34px; object-fit:contain}
|
||||
.nav{display:flex; align-items:center; gap:var(--space-1); flex-wrap:wrap}
|
||||
/* 44px hoch statt 31: Tablets sind Touch-Geraete, WCAG 2.5.5 will 44x44.
|
||||
Passt weiterhin in den 64px hohen Header. */
|
||||
.nav a{
|
||||
display:flex; align-items:center; min-height:44px;
|
||||
padding:8px 14px; border-radius:var(--radius-pill);
|
||||
font:600 15px/1 'Nunito','Segoe UI',sans-serif; color:var(--ink-500);
|
||||
text-decoration:none; transition:color var(--dur-color) var(--ease),
|
||||
background var(--dur-color) var(--ease);
|
||||
}
|
||||
.nav a:hover{color:var(--ink-700); background:var(--surface-sunk)}
|
||||
.nav a[aria-current="page"]{color:var(--ink-700); background:var(--accent-soft)}
|
||||
|
||||
/* MOBILER HEADER — unter 640px.
|
||||
Vorher: eine Zeile, Nav horizontal scrollend, Wortmarke per font-size:0 versteckt.
|
||||
Gemessen war das zu eng — Nav-Links 28px hoch, Wortmarken-Link 32px breit, und bei
|
||||
320/360px scrollte die Nav seitlich weg, ohne dass man es sieht.
|
||||
Jetzt: zwei Zeilen, Nav als Viererraster ueber die volle Breite, jedes Ziel >=44px
|
||||
(WCAG 2.5.5). Der Header ist dafuer nicht mehr sticky — zwei Zeilen wuerden sonst
|
||||
dauerhaft ein Sechstel des Handydisplays wegnehmen. Auf fuenf Unterseiten ist eine
|
||||
mitlaufende Navigation kein Verlust. */
|
||||
@media (max-width:639.98px){
|
||||
.hdr{position:static; height:auto}
|
||||
html{scroll-padding-top:16px}
|
||||
.hdr__in{
|
||||
flex-direction:column; align-items:stretch; justify-content:flex-start;
|
||||
height:auto; gap:6px; padding-block:10px;
|
||||
}
|
||||
.hdr__brand{
|
||||
justify-content:center; min-height:44px; gap:10px;
|
||||
font:600 18px/1.2 'Fredoka','Trebuchet MS',sans-serif;
|
||||
}
|
||||
.hdr__brand img{width:30px; height:30px}
|
||||
.nav{
|
||||
display:grid; grid-template-columns:repeat(4,1fr); gap:3px;
|
||||
flex-wrap:nowrap; overflow:visible;
|
||||
}
|
||||
.nav a{
|
||||
min-height:44px; display:flex; align-items:center; justify-content:center;
|
||||
padding:6px 4px; font-size:13px; line-height:1.15; text-align:center;
|
||||
white-space:normal; hyphens:auto;
|
||||
}
|
||||
/* Fusszeilen-Links waren 21px hoch und damit unter jeder Touch-Schwelle. */
|
||||
.ftr__col ul{gap:2px}
|
||||
.ftr__col a, .ftr__col span{
|
||||
display:flex; align-items:center; min-height:44px; padding-block:2px;
|
||||
}
|
||||
}
|
||||
|
||||
/* ============================================================ BUTTONS */
|
||||
.btn{
|
||||
display:inline-flex; align-items:center; gap:10px; justify-content:center;
|
||||
padding:13px 22px; border-radius:var(--radius-pill); border:1px solid transparent;
|
||||
font:700 16px/1 'Nunito','Segoe UI',sans-serif; text-decoration:none; cursor:pointer;
|
||||
transition:background var(--dur-color) var(--ease), color var(--dur-color) var(--ease),
|
||||
transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
|
||||
}
|
||||
.btn svg{width:18px; height:18px; flex:none}
|
||||
/* Primär: weiß auf coral-600 = 4.97. Dunkelt bei Hover und Press weiter nach. */
|
||||
.btn--primary{background:var(--coral-600); color:#fff; box-shadow:var(--shadow-button)}
|
||||
.btn--primary:hover{background:var(--coral-700); color:#fff; transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
|
||||
.btn--primary:active{background:var(--coral-800); transform:scale(.97); box-shadow:var(--shadow-xs)}
|
||||
.btn--secondary{background:var(--surface-card); color:var(--ink-700); border-color:var(--line); box-shadow:var(--shadow-button)}
|
||||
.btn--secondary:hover{background:var(--surface-sunk); color:var(--ink-700); transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
|
||||
.btn--secondary:active{transform:scale(.97); box-shadow:var(--shadow-xs)}
|
||||
.btn--l{padding:15px 26px; font-size:17px}
|
||||
|
||||
/* ============================================================ HERO */
|
||||
.hero{position:relative; overflow:hidden; background:var(--accent-soft)}
|
||||
.hero__media{position:absolute; inset:0; background-size:cover; background-position:74% 45%}
|
||||
.hero__scrim{position:absolute; inset:0}
|
||||
.hero__in{position:relative; width:100%; padding-block:var(--space-16)}
|
||||
/* width:100% ist nötig: .wrap bringt margin:0 auto mit, und im Grid-Container
|
||||
schluckt ein Auto-Margin das Stretch — der Block schrumpft sonst auf Max-Content. */
|
||||
.hero__col{display:grid; gap:var(--space-5); justify-items:start; max-width:min(100%,560px)}
|
||||
.hero__logo{width:100%; max-width:200px}
|
||||
|
||||
/* Der eine Move der Referenz: jede Zeile einzeln gekippt. Bleibt.
|
||||
Neu ist die Farbdisziplin — Ink trägt, ein Wort trägt den Akzent. */
|
||||
.hl{display:grid; justify-items:start; gap:2px; line-height:1.05}
|
||||
.hl span{display:inline-block}
|
||||
.hl span:nth-child(1){transform:rotate(-2.5deg)}
|
||||
.hl span:nth-child(2){transform:rotate(1.5deg) translateX(14px)}
|
||||
.hl span:nth-child(3){transform:rotate(-1deg)}
|
||||
/* Display-Typo darf Farbe tragen: bei >=24px gilt die Large-Text-Schwelle 3.0,
|
||||
alle drei Marken-Buntwerte liegen darueber (auf Weiss 3.86 / 3.92 / 4.00,
|
||||
auf Creme 3.52 / 3.57 / 3.65). Im Fliesstext waere keiner davon zulaessig. */
|
||||
.hl .c-sky{color:var(--sky-500)}
|
||||
.hl .c-sun{color:var(--sun-600)}
|
||||
.hl .c-coral{color:var(--coral-500)}
|
||||
.hl .on{color:var(--accent)}
|
||||
|
||||
.hero__sub{font:var(--t-body); color:var(--ink-700); max-width:34ch}
|
||||
.hero__actions{display:flex; flex-wrap:wrap; gap:var(--space-3)}
|
||||
|
||||
.pill-eyebrow{
|
||||
display:inline-block; background:var(--sun-400); color:var(--ink-700);
|
||||
font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
|
||||
padding:7px 15px; border-radius:var(--radius-pill); transform:rotate(-2deg);
|
||||
}
|
||||
|
||||
.trusts{display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-2)}
|
||||
.trust{display:flex; align-items:center; gap:10px}
|
||||
.trust__chip{
|
||||
width:30px; height:30px; flex:none; border-radius:var(--radius-circle,50%);
|
||||
display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text);
|
||||
}
|
||||
.trust svg{width:15px; height:15px; flex:none}
|
||||
.trust b{display:block; font:700 15px/1.3 'Nunito','Segoe UI',sans-serif; color:var(--ink-700)}
|
||||
.trust span{display:block; font:var(--t-small); color:var(--ink-500)}
|
||||
|
||||
/* Schwachstelle des Handoffs behoben: die fixen Stopps (430/560/820px) decken das Foto
|
||||
unter ~820px fast vollständig zu. Unter 820px stapelt der Hero jetzt — Foto oben,
|
||||
Text darunter auf voller Fläche. */
|
||||
@media (min-width:820px){
|
||||
.hero{min-height:clamp(540px,64vw,680px); display:grid}
|
||||
.hero__in{align-self:center}
|
||||
.hero--shop .hero__scrim{
|
||||
background:linear-gradient(98deg,#FFF 0,#FFF 430px,rgba(255,255,255,.92) 560px,rgba(255,255,255,0) 820px);
|
||||
}
|
||||
.hero--verein .hero__scrim{
|
||||
background:linear-gradient(100deg,var(--sun-100) 0,var(--sun-100) 430px,rgba(253,244,220,.92) 560px,rgba(253,244,220,0) 820px);
|
||||
}
|
||||
}
|
||||
@media (max-width:819.98px){
|
||||
.hero__media{position:relative; inset:auto; height:clamp(200px,44vw,320px)}
|
||||
.hero__scrim{display:none}
|
||||
.hero__in{padding-block:var(--space-10)}
|
||||
.hero--shop{background:var(--surface-page)}
|
||||
.hero--verein{background:var(--sun-100)}
|
||||
}
|
||||
.hero--verein{border-bottom:6px solid var(--sun-400)}
|
||||
/* Seit im Hero ein echtes Foto liegt, braucht das Zeichen einen eigenen Grund —
|
||||
auf dem gemusterten Stoff war die feine Schrift darin nicht mehr lesbar. */
|
||||
.hero__mark{
|
||||
position:absolute; right:var(--page-pad-x); bottom:var(--space-6);
|
||||
width:clamp(110px,16vw,180px); transform:rotate(-3deg);
|
||||
background:rgba(255,255,255,.94); padding:12px; border-radius:var(--radius-xl);
|
||||
box-shadow:var(--shadow-band); box-sizing:content-box;
|
||||
}
|
||||
@media (max-width:819.98px){ .hero__mark{display:none} }
|
||||
|
||||
/* ============================================================ SECTIONS */
|
||||
.sh{display:flex; align-items:center; gap:14px; margin-bottom:var(--space-6)}
|
||||
.sh__chip{
|
||||
width:44px; height:44px; flex:none; border-radius:var(--radius-m);
|
||||
display:grid; place-items:center; background:var(--accent-soft); color:var(--accent-text);
|
||||
transform:rotate(-3deg);
|
||||
}
|
||||
.field--cool .sh__chip, .field--warm .sh__chip, .field--rose .sh__chip{background:var(--surface-card)}
|
||||
.sh svg{width:22px; height:22px; flex:none}
|
||||
.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--gutter-grid); align-items:start}
|
||||
.cols p{max-width:52ch}
|
||||
|
||||
.story{
|
||||
display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
|
||||
gap:var(--space-8); align-items:center;
|
||||
}
|
||||
.story__copy{display:grid; gap:var(--space-4)}
|
||||
.story__copy p{max-width:50ch}
|
||||
.story__img{
|
||||
/* height:auto ist noetig: die width/height-Attribute im HTML (gegen Layout-Shift)
|
||||
machen beide Achsen definit, dann ignoriert der Browser aspect-ratio. */
|
||||
width:100%; height:auto; aspect-ratio:4/3; object-fit:cover;
|
||||
border-radius:var(--radius-xl); box-shadow:var(--shadow-band);
|
||||
transform:rotate(-1.5deg);
|
||||
}
|
||||
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--gutter-grid)}
|
||||
|
||||
/* Kacheln tragen Farbe als Fuellung — der Text darin bleibt durchgehend
|
||||
ink-700/ink-500 (12.99-13.20 bzw. 6.83-6.94 auf allen drei Toenen). */
|
||||
.tile{
|
||||
background:var(--surface-card); border:1px solid var(--line-soft);
|
||||
border-top:4px solid var(--accent-line);
|
||||
border-radius:var(--radius-l); box-shadow:var(--shadow-card);
|
||||
padding:var(--space-6); display:grid; gap:var(--space-3); align-content:start;
|
||||
transition:transform var(--dur-lift) var(--ease), box-shadow var(--dur-lift) var(--ease);
|
||||
}
|
||||
.tile--cool{background:var(--sky-50); border-color:#D6E8F7; border-top-color:var(--sky-400)}
|
||||
.tile--warm{background:var(--sun-100); border-color:#F2E5C4; border-top-color:var(--sun-400)}
|
||||
.tile--rose{background:var(--coral-50); border-color:#F8DED8; border-top-color:var(--coral-400)}
|
||||
/* Auf getoentem Feld kehren sich die Kacheln um: weiss auf Farbe statt Farbe auf Weiss. */
|
||||
.field--cool .tile, .field--warm .tile, .field--rose .tile{background:var(--surface-card)}
|
||||
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow-card-hover)}
|
||||
.tile p{color:var(--ink-500)}
|
||||
.tile .btn{justify-self:start; margin-top:var(--space-1)}
|
||||
|
||||
/* Opa Martin */
|
||||
/* 560px waren als leeres Platzhalterquadrat eine tote Flaeche mitten auf der Seite.
|
||||
Auf 400px verkleinert und auf ein Cremefeld gesetzt, damit die Luecke wie ein
|
||||
vorbereiteter Rahmen liest und nicht wie ein Loch. */
|
||||
.portrait{max-width:400px; margin-inline:auto; display:grid; gap:var(--space-5); justify-items:center; text-align:center}
|
||||
.portrait__slot{
|
||||
width:100%; aspect-ratio:1/1; border-radius:var(--radius-xl);
|
||||
background:var(--surface-card); border:2px dashed var(--sun-400);
|
||||
display:grid; place-items:center; padding:var(--space-6);
|
||||
}
|
||||
.portrait__slot span{font:var(--t-small); color:var(--ink-700); max-width:22ch}
|
||||
.portrait__slot img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-xl)}
|
||||
.portrait__name{font:var(--t-h2); color:var(--accent); letter-spacing:var(--ls-display)}
|
||||
|
||||
/* Audio */
|
||||
.song{
|
||||
max-width:520px; margin-inline:auto; background:var(--surface-card);
|
||||
border:1px solid var(--line-soft); border-radius:var(--radius-l);
|
||||
box-shadow:var(--shadow-card); padding:var(--space-6); display:grid; gap:var(--space-4);
|
||||
}
|
||||
.song__top{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap}
|
||||
.song__top h3{color:var(--accent-text)} /* nicht --accent: 20px/600 zaehlt nicht als
|
||||
Large Text, sky-500 misst dort nur 3.86. accent-text = 5.60 bzw. 5.20. */
|
||||
.badge{
|
||||
font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase;
|
||||
padding:5px 11px; border-radius:var(--radius-pill);
|
||||
background:var(--sun-400); color:var(--ink-700); /* 8.67 */
|
||||
}
|
||||
.song__row{display:flex; align-items:center; gap:var(--space-4)}
|
||||
.iconbtn{
|
||||
width:44px; height:44px; flex:none; border-radius:var(--radius-circle, 50%);
|
||||
display:grid; place-items:center; border:1px solid var(--line);
|
||||
background:var(--sun-100); color:var(--ink-300); cursor:not-allowed;
|
||||
}
|
||||
.iconbtn svg{width:18px; height:18px}
|
||||
.song__meter{flex:1; display:grid; gap:var(--space-2)}
|
||||
.song__track{height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)}
|
||||
.song__time, .song__note{font:var(--t-small); color:var(--ink-500)}
|
||||
|
||||
/* Band */
|
||||
.band{
|
||||
background:var(--surface-band); border-radius:var(--radius-band);
|
||||
padding:clamp(24px,4vw,44px);
|
||||
display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));
|
||||
gap:var(--space-8); align-items:center;
|
||||
}
|
||||
.band--cool{background:var(--surface-band-cool)}
|
||||
.band__copy{display:grid; gap:var(--space-4); justify-items:start}
|
||||
/* Guardrail: kein Grau auf farbigem Grund. Ink-700 = 13.20 auf Creme. */
|
||||
.band__copy p{color:var(--ink-700); max-width:46ch}
|
||||
.band__copy h2{color:var(--accent)}
|
||||
.band__copy .label{color:var(--ink-700)}
|
||||
.band img{width:100%; max-width:380px; justify-self:center}
|
||||
|
||||
/* Kontakt */
|
||||
.contacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--gutter-grid)}
|
||||
.contact{
|
||||
background:var(--surface-card); border:1px solid var(--line-soft);
|
||||
border-left:4px solid var(--accent-line);
|
||||
border-radius:var(--radius-l); box-shadow:var(--shadow-card);
|
||||
padding:var(--space-6); display:grid; gap:var(--space-2);
|
||||
}
|
||||
.contact p{font:600 17px/1.5 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); word-break:break-word}
|
||||
/* Telefon und E-Mail sind die wichtigsten Links der Seite und waren 23px hoch —
|
||||
einen Pixel unter WCAG 2.5.8. Als volles 44px-Ziel laesst sich die Nummer am
|
||||
Handy zuverlaessig antippen. */
|
||||
.contact a{
|
||||
color:var(--accent-text); display:inline-flex; align-items:center;
|
||||
min-height:44px; text-decoration:underline; text-underline-offset:3px;
|
||||
}
|
||||
|
||||
/* Shop-Platzhalter */
|
||||
.parked{min-height:100vh; display:flex; flex-direction:column}
|
||||
.parked main{flex:1; display:grid; place-items:center; padding:var(--space-20) var(--page-pad-x)}
|
||||
.parked__in{max-width:620px; display:grid; gap:var(--space-5); justify-items:center; text-align:center}
|
||||
.parked__in h1{font:var(--t-h2); color:var(--accent)}
|
||||
.parked__in p{max-width:48ch}
|
||||
|
||||
/* ============================================================ RECHTSTEXTE */
|
||||
.prose{max-width:74ch; margin-inline:auto; display:grid; gap:var(--space-5)}
|
||||
.prose h1{font:var(--t-h2); color:var(--accent); letter-spacing:var(--ls-display)}
|
||||
.prose h2{
|
||||
font:var(--t-h3); color:var(--ink-700); margin-top:var(--space-6);
|
||||
padding-top:var(--space-4); border-top:2px solid var(--accent-line);
|
||||
}
|
||||
.prose h3{font:600 17px/1.35 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); margin-top:var(--space-2)}
|
||||
.prose p, .prose li{color:var(--ink-500)}
|
||||
.prose ul{margin:0; padding-left:1.2em; display:grid; gap:var(--space-2)}
|
||||
.prose dl{margin:0; display:grid; grid-template-columns:auto 1fr; gap:var(--space-2) var(--space-5)}
|
||||
.prose dt{font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink-700); padding-top:4px}
|
||||
.prose dd{margin:0; color:var(--ink-700)}
|
||||
/* Telefon und E-Mail in der Angabenliste stehen allein, nicht im Satz — sie brauchen
|
||||
ein echtes Ziel. Links mitten im Fliesstext bleiben unveraendert: fuer die gilt die
|
||||
Inline-Ausnahme von WCAG 2.5.8. */
|
||||
.prose dd a{display:inline-flex; align-items:center; min-height:44px}
|
||||
.prose__intro{
|
||||
background:var(--accent-soft); border-radius:var(--radius-l);
|
||||
padding:var(--space-5); color:var(--ink-700);
|
||||
}
|
||||
/* Offene Stellen, die der Betreiber noch fuellen muss — im Quelltext und auf der
|
||||
Seite unuebersehbar, damit nichts davon versehentlich live geht. */
|
||||
.todo{
|
||||
display:inline-block; background:var(--coral-50); color:var(--ink-700);
|
||||
border:2px dashed var(--coral-400); border-radius:var(--radius-xs);
|
||||
padding:1px 8px; font-weight:700;
|
||||
}
|
||||
.prose__warn{
|
||||
background:var(--coral-50); border:2px dashed var(--coral-400);
|
||||
border-radius:var(--radius-l); padding:var(--space-5); color:var(--ink-700);
|
||||
}
|
||||
.prose__warn strong{color:var(--ink-700)}
|
||||
|
||||
/* ============================================================ FOOTER */
|
||||
.ftr{
|
||||
background:var(--surface-footer); padding-block:var(--space-16) var(--space-8);
|
||||
margin-top:var(--space-16); border-top:6px solid var(--accent-line);
|
||||
}
|
||||
.parked .ftr{margin-top:0}
|
||||
.ftr__cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:var(--space-8)}
|
||||
.ftr__col h3{font:var(--t-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink-700); margin-bottom:var(--space-3)}
|
||||
.ftr__col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
|
||||
/* Guardrail + Kontrast: auf Creme kein ink-300 (2.80). Ink-700 = 13.20. */
|
||||
/* Waren 21px hoch und verfehlten damit sogar die AA-Untergrenze von 24px
|
||||
(WCAG 2.5.8). Auf dem Handy weiter oben auf 44px gesetzt. */
|
||||
.ftr__col a, .ftr__col span{
|
||||
display:flex; align-items:center; min-height:30px;
|
||||
font:400 15px/1.4 'Nunito','Segoe UI',sans-serif; color:var(--ink-700); text-decoration:none;
|
||||
}
|
||||
.ftr__col a:hover{color:var(--sky-600); text-decoration:underline}
|
||||
.ftr__legal{
|
||||
margin-top:var(--space-10); padding-top:var(--space-6); border-top:1px solid rgba(35,52,74,.12);
|
||||
font:var(--t-small); color:var(--ink-700); max-width:80ch;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
*{animation:none !important; transition:none !important}
|
||||
html{scroll-behavior:auto}
|
||||
.hl span, .pill-eyebrow, .hero__mark{transform:none}
|
||||
}
|
||||
|
||||
/* ============================================================ MOBILE TYPOGRAFIE
|
||||
Muss hinter allen Basisregeln stehen: .badge und .ftr__col h3 setzen ihre Groesse
|
||||
ueber die font-Kurzform, und bei gleicher Spezifitaet gewinnt die spaetere Regel.
|
||||
11px Versalschrift ist auf Handygroesse zu knapp — 12px ist die Untergrenze. */
|
||||
@media (max-width:639.98px){
|
||||
.label, .ftr__col h3, .badge{font-size:12px}
|
||||
}
|
||||
|
||||
/* ============================================================ FOKUS
|
||||
Muss ganz am Ende stehen. Der Ring ist eine box-shadow, und .btn/.tile/.song
|
||||
setzen selbst eine — bei gleicher Spezifitaet gewinnt die spaetere Regel.
|
||||
Stand vorher im Base-Block und wurde von .btn--primary still ueberschrieben:
|
||||
Tastaturnutzer sahen auf Buttons gar keinen Fokus. */
|
||||
:focus-visible{
|
||||
outline:none;
|
||||
box-shadow:var(--ring-focus);
|
||||
border-radius:var(--radius-xs);
|
||||
}
|
||||
/* Elemente mit eigener Schattierung: Ring davor, eigener Schatten dahinter. */
|
||||
.btn:focus-visible{border-radius:var(--radius-pill); box-shadow:var(--ring-focus), var(--shadow-button)}
|
||||
.nav a:focus-visible, .hdr__brand:focus-visible{border-radius:var(--radius-pill)}
|
||||
.iconbtn:focus-visible{border-radius:50%}
|
||||
.contact a:focus-visible, .ftr__col a:focus-visible{border-radius:var(--radius-xs)}
|
||||
@@ -0,0 +1,170 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Datenschutzerklärung — Emma's Schatzkiste</title>
|
||||
<meta name="description" content="Datenschutzerklärung: keine Cookies, kein Tracking, lokal gehostete Schriften. Emma's Schatzkiste, Rottenburg a.d. Laaber." />
|
||||
<meta name="robots" content="noindex, follow" />
|
||||
<meta name="theme-color" content="#FDF4DC" />
|
||||
<link rel="icon" href="assets/logo-shop.png" />
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
|
||||
</head>
|
||||
<body class="page-shop">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
<header class="hdr">
|
||||
<div class="wrap hdr__in">
|
||||
<a class="hdr__brand" href="index.html">
|
||||
<img src="assets/logo-shop.png" alt="" />
|
||||
Emma's Schatzkiste
|
||||
</a>
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a href="index.html">Start</a>
|
||||
<a href="shop.html">Shop</a>
|
||||
<a href="hilfe-verein.html">Hilfe Verein</a>
|
||||
<a href="hilfe-verein.html#kontakt">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="inhalt">
|
||||
<section class="wrap section">
|
||||
<div class="prose">
|
||||
<h1>Datenschutzerklärung</h1>
|
||||
|
||||
<div class="prose__intro">
|
||||
<strong>Kurz gesagt:</strong> Diese Website setzt keine Cookies, bindet keine
|
||||
Dienste Dritter ein und analysiert nichts. Es gibt kein Kontaktformular. Schriften
|
||||
werden vom eigenen Server geladen, nicht von Google. Deshalb gibt es hier auch kein
|
||||
Einwilligungsbanner — es gibt nichts einzuwilligen.
|
||||
</div>
|
||||
|
||||
<div class="prose__warn">
|
||||
<strong>Zwei Felder fehlen noch</strong>, beide unten bei den Server-Logfiles rot
|
||||
markiert. Dieser Entwurf ersetzt keine Rechtsberatung.
|
||||
</div>
|
||||
|
||||
<h2>1. Verantwortlicher</h2>
|
||||
<p>Verantwortlich im Sinne von Art. 4 Nr. 7 DSGVO:</p>
|
||||
<dl>
|
||||
<dt>Name</dt><dd>Martin Lindenau</dd>
|
||||
<dt>Anschrift</dt><dd>Hollerstraße 2, 84056 Rottenburg a.d. Laaber</dd>
|
||||
<dt>Telefon</dt><dd><a href="tel:015751479212">0157 51479212</a></dd>
|
||||
<dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></dd>
|
||||
</dl>
|
||||
<p>Eine Pflicht zur Benennung einer Datenschutzbeauftragten oder eines
|
||||
Datenschutzbeauftragten besteht bei dieser Größe nach § 38 BDSG nicht.</p>
|
||||
|
||||
<h2>2. Server-Logfiles</h2>
|
||||
<p>Beim Aufruf dieser Website werden vom Hoster automatisch Daten in Logfiles
|
||||
gespeichert, die Ihr Browser übermittelt: aufgerufene Seite, Datum und Uhrzeit,
|
||||
übertragene Datenmenge, Referrer, Browsertyp und -version, Betriebssystem und
|
||||
IP-Adresse.</p>
|
||||
<p>Rechtsgrundlage ist Art. 6 Abs. 1 lit. f DSGVO. Das berechtigte Interesse liegt im
|
||||
technisch fehlerfreien Betrieb und in der Sicherheit der Website. Eine Zusammenführung
|
||||
dieser Daten mit anderen Datenquellen findet nicht statt.</p>
|
||||
<dl>
|
||||
<dt>Hoster</dt><dd>STRATO GmbH, Otto-Ostrowski-Straße 7, 10249 Berlin<br />Server in Deutschland, keine Drittlandübermittlung</dd>
|
||||
<dt>Auftragsverarbeitung</dt><dd><span class="todo">AV-Vertrag mit STRATO abschließen und Datum eintragen</span></dd>
|
||||
<dt>Speicherdauer</dt><dd><span class="todo">Frist bei STRATO nachsehen und eintragen, üblich 7 Tage</span></dd>
|
||||
</dl>
|
||||
|
||||
<h2>3. Cookies</h2>
|
||||
<p>Diese Website setzt <strong>keine Cookies</strong> und speichert nichts im
|
||||
Local Storage oder Session Storage Ihres Geräts. Eine Einwilligung nach § 25 TDDDG ist
|
||||
daher nicht erforderlich, und ein Einwilligungsbanner gibt es bewusst nicht.</p>
|
||||
|
||||
<h2>4. Keine Analyse, kein Tracking, keine Werbung</h2>
|
||||
<p>Es sind keine Analyse-, Tracking- oder Werbedienste eingebunden — kein Google
|
||||
Analytics, kein Matomo, keine Pixel, keine Social-Media-Plugins, keine eingebetteten
|
||||
Videos oder Karten.</p>
|
||||
|
||||
<h2>5. Schriftarten</h2>
|
||||
<p>Die Schriften Fredoka und Nunito werden <strong>lokal vom eigenen Server</strong>
|
||||
ausgeliefert. Beim Aufruf dieser Seite wird keine Verbindung zu Google Fonts oder zu
|
||||
anderen Servern Dritter aufgebaut, und es wird keine IP-Adresse an Dritte
|
||||
übermittelt.</p>
|
||||
|
||||
<h2>6. Kontaktaufnahme</h2>
|
||||
<p>Ein Kontaktformular gibt es nicht. Wenn Sie uns per E-Mail oder Telefon
|
||||
kontaktieren, verarbeiten wir Ihre Angaben ausschließlich zur Bearbeitung Ihrer
|
||||
Anfrage. Rechtsgrundlage ist Art. 6 Abs. 1 lit. b DSGVO, soweit die Anfrage auf einen
|
||||
Vertrag gerichtet ist, sonst Art. 6 Abs. 1 lit. f DSGVO (berechtigtes Interesse an der
|
||||
Beantwortung). Wir löschen die Daten, sobald der Vorgang erledigt ist und keine
|
||||
gesetzlichen Aufbewahrungsfristen entgegenstehen.</p>
|
||||
<p>Hinweis: Die angegebene E-Mail-Adresse wird bei Google (Gmail) geführt. Inhalte
|
||||
unverschlüsselter E-Mails können auf dem Übertragungsweg mitgelesen werden.</p>
|
||||
|
||||
<h2>7. Verschlüsselung</h2>
|
||||
<p>Diese Website wird über HTTPS ausgeliefert. Die Übertragung zwischen Ihrem Browser
|
||||
und dem Server ist damit verschlüsselt.</p>
|
||||
|
||||
<h2>8. Empfänger und Drittlandübermittlung</h2>
|
||||
<p>Über den Hoster hinaus geben wir keine personenbezogenen Daten weiter. Eine
|
||||
Übermittlung in Länder außerhalb der EU beziehungsweise des EWR findet nicht statt.</p>
|
||||
|
||||
<h2>9. Ihre Rechte</h2>
|
||||
<ul>
|
||||
<li>Auskunft über die zu Ihrer Person gespeicherten Daten (Art. 15 DSGVO)</li>
|
||||
<li>Berichtigung unrichtiger Daten (Art. 16 DSGVO)</li>
|
||||
<li>Löschung (Art. 17 DSGVO)</li>
|
||||
<li>Einschränkung der Verarbeitung (Art. 18 DSGVO)</li>
|
||||
<li>Datenübertragbarkeit (Art. 20 DSGVO)</li>
|
||||
<li>Widerspruch gegen Verarbeitungen auf Grundlage von Art. 6 Abs. 1 lit. f DSGVO
|
||||
(Art. 21 DSGVO)</li>
|
||||
</ul>
|
||||
<p>Wenden Sie sich dafür formlos an die oben genannte Adresse.</p>
|
||||
|
||||
<h2>10. Beschwerderecht</h2>
|
||||
<p>Sie haben das Recht, sich bei einer Datenschutz-Aufsichtsbehörde zu beschweren
|
||||
(Art. 77 DSGVO). Zuständig für nichtöffentliche Stellen in Bayern ist das
|
||||
Bayerische Landesamt für Datenschutzaufsicht (BayLDA), Promenade 18, 91522 Ansbach.</p>
|
||||
|
||||
<h2>11. Stand</h2>
|
||||
<p>Diese Erklärung beschreibt den Stand vom 21. September 2026. Sie muss angepasst
|
||||
werden, sobald sich an der Website etwas ändert — etwa wenn ein Kontaktformular, eine
|
||||
Karte, ein Newsletter, Audiodateien von einem fremden Dienst oder ein Online-Shop
|
||||
dazukommen.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="ftr">
|
||||
<div class="wrap">
|
||||
<div class="ftr__cols">
|
||||
<div class="ftr__col">
|
||||
<h3>Laden</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Unser Laden</a></li>
|
||||
<li><span>Öffnungszeiten folgen</span></li>
|
||||
<li><a href="tel:015751479212">Ware abgeben</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Hilfe Verein</h3>
|
||||
<ul>
|
||||
<li><a href="hilfe-verein.html#helfen">Spenden</a></li>
|
||||
<li><a href="hilfe-verein.html#helfen">Mithelfen</a></li>
|
||||
<li><a href="hilfe-verein.html#helfen">Weitersagen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Über</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Über uns</a></li>
|
||||
<li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,55 @@
|
||||
#!/usr/bin/env bash
|
||||
# Deploy Emma's Schatzkiste -> STRATO
|
||||
#
|
||||
# ./deploy.sh Trockenlauf: zeigt nur, was passieren wuerde
|
||||
# ./deploy.sh --live uebertraegt tatsaechlich
|
||||
#
|
||||
# Authentifizierung ueber den Schluessel ~/.ssh/emmas_strato (Host-Alias: emmas-strato).
|
||||
# Kein Passwort im Skript, keins in der Shell-History.
|
||||
|
||||
set -euo pipefail
|
||||
cd "$(dirname "$0")"
|
||||
|
||||
HOST="emmas-strato"
|
||||
REMOTE="${REMOTE_DIR:-./}" # relativ = Home des SSH-Users = /home/www (Webspace-Wurzel)
|
||||
# NICHT "/" — das waere die Dateisystem-Wurzel des Servers
|
||||
DRY="--dry-run"
|
||||
[[ "${1:-}" == "--live" ]] && DRY=""
|
||||
|
||||
# CSS-Links mit Inhalts-Hash versionieren: aendert sich das Stylesheet, aendert sich
|
||||
# die URL, und Besucher mit altem Browser-Cache bekommen zwingend die neue Datei.
|
||||
python3 - <<'PYEOF'
|
||||
import io, glob, re, hashlib
|
||||
vs = hashlib.sha1(io.open('assets/site.css','rb').read()).hexdigest()[:8]
|
||||
vf = hashlib.sha1(io.open('assets/fonts.css','rb').read()).hexdigest()[:8]
|
||||
for f in sorted(glob.glob('*.html')):
|
||||
s = io.open(f, encoding='utf-8').read()
|
||||
n = re.sub(r'href="assets/site\.css(\?v=[0-9a-f]+)?"', f'href="assets/site.css?v={vs}"', s)
|
||||
n = re.sub(r'href="assets/fonts\.css(\?v=[0-9a-f]+)?"', f'href="assets/fonts.css?v={vf}"', n)
|
||||
if n != s: io.open(f,'w',encoding='utf-8').write(n)
|
||||
print(f"CSS-Version: site={vs} fonts={vf}")
|
||||
PYEOF
|
||||
|
||||
# Nur das, was zur Website gehoert. Alles andere bleibt lokal.
|
||||
INCLUDE=(index.html hilfe-verein.html shop.html impressum.html datenschutz.html assets)
|
||||
|
||||
echo "Ziel: $HOST:$REMOTE"
|
||||
echo "Modus: $([[ -z "$DRY" ]] && echo 'LIVE — Dateien werden uebertragen' || echo 'Trockenlauf')"
|
||||
echo
|
||||
|
||||
rsync -rlptvz --checksum $DRY \
|
||||
--exclude '.DS_Store' \
|
||||
"${INCLUDE[@]}" \
|
||||
"$HOST:$REMOTE"
|
||||
|
||||
echo
|
||||
if [[ -n "$DRY" ]]; then
|
||||
echo "Trockenlauf beendet. Zum echten Uebertragen: ./deploy.sh --live"
|
||||
else
|
||||
echo "Uebertragen. Danach pruefen:"
|
||||
echo " - Domain im STRATO-Panel muss vom Baukasten auf den Webspace zeigen,"
|
||||
echo " sonst bleibt die alte Baukasten-Seite sichtbar."
|
||||
echo " - https://emmas-schatzkiste.de/impressum.html"
|
||||
echo " - https://emmas-schatzkiste.de/datenschutz.html"
|
||||
echo " - Browser-Konsole: keine 404er, keine Fremdanfragen"
|
||||
fi
|
||||
@@ -0,0 +1,375 @@
|
||||
# Handoff: Emma's Schatzkiste — Startseite, Hilfe Verein, Shop
|
||||
|
||||
## Overview
|
||||
Website für **Emma's Schatzkiste**, einen Baby- und Kinder-Second-Hand-Laden in
|
||||
Rottenburg a.d. Laaber (Bayern), plus den zugehörigen **Hilfe Verein** ("Hilfe. Herz.
|
||||
Hoffnung."), der sich noch im Aufbau befindet.
|
||||
|
||||
Three pages:
|
||||
1. **Startseite** — shop introduction, story, Opa Martin, family value props, song player, teaser to the Hilfe Verein.
|
||||
2. **Hilfe Verein** — the association: song, three ways to help, the shop's origin story, contact.
|
||||
3. **Shop** — deliberately parked: an "im Aufbau" (under construction) placeholder page. The online shop is NOT to be built yet.
|
||||
|
||||
## About the Design Files
|
||||
The files in `design/` are **design references created in HTML** — prototypes showing
|
||||
intended look and behavior, not production code to copy directly. They are authored in a
|
||||
custom in-house HTML component format (`.dc.html` = template + a small logic class) and
|
||||
will not drop into a normal build as-is.
|
||||
|
||||
The task is to **recreate these designs in the target codebase's existing environment**
|
||||
(React, Vue, Astro, WordPress, etc.) using its established patterns and libraries. If no
|
||||
environment exists yet, pick the most appropriate stack — this is a small, mostly static
|
||||
marketing site for a local shop, so a static-site generator or a light React/Astro setup
|
||||
is more appropriate than a heavy app framework.
|
||||
|
||||
## Fidelity
|
||||
**High fidelity.** Colors, typography, spacing, radii and shadows are all final and come
|
||||
from a bound design system (see *Design Tokens*). Recreate the UI faithfully using the
|
||||
codebase's existing component library where one exists; otherwise implement against the
|
||||
token values listed below.
|
||||
|
||||
Two things are explicitly unfinished and must not be treated as final:
|
||||
- **Audio files** for the two songs do not exist yet. The players render disabled with an "Audio folgt" badge.
|
||||
- The **Opa Martin photo** is a drop-target placeholder; the real photo is pending.
|
||||
|
||||
## Design System
|
||||
All three pages are built on the **Emmas Schatzkiste Design System**
|
||||
(namespace `EmmasSchatzkisteDesignSystem_3da4b6`). The pages compose its components rather
|
||||
than styling raw HTML. Components used, with the props these pages pass:
|
||||
|
||||
| Component | Used for | Props passed |
|
||||
|---|---|---|
|
||||
| `SiteHeader` | sticky 64px top nav on all 3 pages | `items`, `active`, `onNavigate` |
|
||||
| `SiteFooter` | footer on all 3 pages | `columns` |
|
||||
| `Button` | all CTAs | `as`, `href`, `size`, `variant`, `icon` |
|
||||
| `IconButton` | audio play button (disabled) | `label`, `disabled`, `size` |
|
||||
| `Icon` | Lucide icon wrapper | `name`, `size` |
|
||||
| `Badge` | "Audio folgt", "Im Aufbau" | `tone` |
|
||||
| `SectionHeader` | every section heading | `title`, `icon` |
|
||||
| `InfoTile` | value props + ways-to-help cards | `title`, `body`, `tone`, `cta` |
|
||||
| `TrustBadge` | hero badges | `icon`, `title`, `sub` |
|
||||
| `ImagePlaceholder` | Opa Martin drop slot | `slotId`, `label`, `tone`, `ratio`, `radius` |
|
||||
| `Decor` | flat decorative layer | `variant`, `opacity` |
|
||||
|
||||
Language and tone rules from the design system, followed throughout: **German, informal
|
||||
"du"**, sentence case, no emoji, prices in German format. Uppercase labels are 11px with
|
||||
0.08em tracking.
|
||||
|
||||
---
|
||||
|
||||
## Screens / Views
|
||||
|
||||
### 1. Startseite (`design/Startseite.dc.html`)
|
||||
|
||||
**Purpose.** First contact. Explain what the shop is, build trust, and hand visitors off
|
||||
to the Hilfe Verein.
|
||||
|
||||
**Layout.** Single column, content constrained to `--page-max` (1180px) with 24px side
|
||||
padding, sections separated by `--space-16` (64px). Full-bleed hero and header.
|
||||
|
||||
**Sections top to bottom:**
|
||||
|
||||
**a) SiteHeader** — sticky, 64px, `items: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt']`,
|
||||
`active: 'Start'`. `onNavigate` routes: Shop → Shop page, Hilfe Verein → Verein page,
|
||||
Kontakt → Verein page `#kontakt`.
|
||||
|
||||
**b) Hero** — full-bleed, `min-height: clamp(540px, 64vw, 680px)`, `display: grid`, content
|
||||
vertically centered.
|
||||
- Background: a full-cover photo, `position: absolute; inset: 0; object-fit: cover; object-position: 74% 45%`. Currently a hot-linked free Pexels photo of children with wooden toys (see *Assets*).
|
||||
- Scrim above it: `linear-gradient(98deg, #FFF 0, #FFF 430px, rgba(255,255,255,.9) 560px, rgba(255,255,255,0) 820px)` — opaque white on the left so text stays readable, fading to clear over the photo on the right. **Note:** this is a fixed-px gradient, deliberately, so the text column always sits fully on solid white regardless of viewport width.
|
||||
- Content column: `max-width: min(100%, 540px)`, left-aligned, `gap: --space-5`.
|
||||
- Shop logo image, `max-width: 200px`, `mix-blend-mode: multiply` (removes the logo JPEG's white box).
|
||||
- **H1**, `font: --text-display-xl` overridden to `font-size: clamp(32px, 7.5vw, 56px); line-height: 1.05`, as a `display: grid` of three lines, each individually rotated for a lively hand-placed feel:
|
||||
- "Gebraucht," — `--sky-500 #2E86D0`, `rotate(-2.5deg)`
|
||||
- "geliebt," — `--sun-600 #A87811`, `rotate(1.5deg) translateX(14px)`
|
||||
- "weitergegeben!" — `--coral-500 #DB513A`, `rotate(-1deg)`
|
||||
- Sub, `--text-body-l`, `--ink-700`, `max-width: 34ch`: "Baby- und Kindersachen aus zweiter Hand — preiswert, gut erhalten, mitten in Rottenburg."
|
||||
- Primary `Button` size `l` with arrow icon → Hilfe Verein page: **"Hilfe Verein ansehen"**
|
||||
- Two `TrustBadge`s in a wrapping flex row, `gap: --space-4`:
|
||||
- sparkles / "Einzelstücke" / "nur 1× vorhanden"
|
||||
- badge-check / "Sehr gut erhalten" / "wir prüfen jedes Teil"
|
||||
|
||||
**c) "Wie alles angefangen hat"** — `SectionHeader` with a `heart` icon, then a two-column
|
||||
auto-fit grid (`minmax(min(100%,280px),1fr)`, gap `--gutter-grid`) of two `--text-body-l`
|
||||
paragraphs, each `max-width: 52ch`:
|
||||
> Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche sollen Spielsachen bekommen, die ein zweites Leben verdient haben: nachhaltig, familienfreundlich und für jeden Geldbeutel.
|
||||
|
||||
> Bei uns findest du Einzelstücke — vom Strampler bis zum Bobbycar. Jedes Teil gibt es nur 1× vorhanden, und jedes hat schon eine Geschichte hinter sich.
|
||||
|
||||
**d) Opa Martin** — a deliberately quiet, centered block, `max-width: 560px`, `justify-items: center`.
|
||||
- `ImagePlaceholder` `slotId="opa-martin"`, `tone="sun"`, `ratio="1 / 1"`, `radius: --radius-xl`, label "Bild von Opa Martin hier ablegen".
|
||||
- Below it the name **"Opa Martin"** in `--text-display-m`, `--sky-500`.
|
||||
- **No body text by client instruction** — image and name only. Opa Martin is the owner and the name is important to the brand; do not add a caption or bio.
|
||||
|
||||
**e) "Für Familien"** — `SectionHeader` with `heart-handshake`, then three `InfoTile`s in an
|
||||
auto-fit grid (`minmax(min(100%,260px),1fr)`):
|
||||
1. tone `cool` — "Preise für Familien" / "Second-Hand-Preise, die zum Familienbudget passen."
|
||||
2. tone `band` — "Sehr gut erhalten" / "Auch aus zweiter Hand: geprüft, sauber, in gutem Zustand."
|
||||
3. tone `soft` — "Wir suchen mit" / "Sag uns, was du brauchst — wir helfen beim Suchen."
|
||||
|
||||
**f) "Unser Lied"** — `SectionHeader` with `music`. One centered card, `max-width: 520px; margin: 0 auto`.
|
||||
- Card: `--surface-card`, 1px `--line-soft` border, `--radius-l`, `--shadow-card`, `--space-5` padding, grid `gap: --space-4`.
|
||||
- Header row: "Lied vom Laden" in `--text-subheading`/`--sky-500` + `Badge tone="warning"` reading "Audio folgt".
|
||||
- Player row: disabled 44px `IconButton` with a `play` icon, then a flex-1 column with an 8px `--surface-sunk` pill as the progress track and "0:00" in `--text-small`/`--text-muted`.
|
||||
- Footnote: "Sobald die Datei da ist, spielt der Player sie hier ab."
|
||||
- **Gated behind the `audioSichtbar` prop** (boolean, default `true`) so the whole section can be hidden until audio exists.
|
||||
|
||||
**g) Hilfe-Verein teaser band** — `--surface-band` (`#FDF4DC`), `--radius-band` (24px),
|
||||
`--space-10` padding, two-column auto-fit grid.
|
||||
- Left: uppercase `--text-label` eyebrow "Hilfe. Herz. Hoffnung." in `--sun-600`; H2 "Unser Hilfe Verein ist im Aufbau." in `--text-display-l`/`--sky-500`; paragraph "Soziale Hilfe für unsere Region. Dafür brauchen wir finanzielle und menschliche Hilfe — in jeder Form, die du geben kannst." (`max-width: 46ch`); `Button` size `l` "So kannst du helfen".
|
||||
- Right: the Verein logo, `max-width: 380px`, `--radius-xl`, `--shadow-card`.
|
||||
|
||||
**h) SiteFooter** + a §19 UStG legal line (see *Legal*).
|
||||
|
||||
---
|
||||
|
||||
### 2. Hilfe Verein (`design/Hilfe Verein.dc.html`)
|
||||
|
||||
**Purpose.** Explain the association and convert visitors into donors or volunteers.
|
||||
Client requirement: this page must look and feel **distinctly different** from the
|
||||
Startseite — it is the yellow page, the shop is the blue page.
|
||||
|
||||
**a) SiteHeader** — same items, `active: 'Hilfe Verein'`.
|
||||
|
||||
**b) Hero** — the yellow counterpart to the shop hero. Same full-bleed structure,
|
||||
`min-height: clamp(520px, 62vw, 660px)`, but visually differentiated:
|
||||
- Background photo of children playing together (Pexels, hot-linked), `object-position: 72% 40%`.
|
||||
- Scrim: `linear-gradient(100deg, var(--sun-100) 0, var(--sun-100) 430px, rgba(253,244,220,.9) 560px, rgba(253,244,220,0) 820px)` — cream-yellow instead of white.
|
||||
- `border-bottom: 6px solid var(--sun-400)` — a solid yellow edge the shop hero does not have.
|
||||
- Eyebrow is a **rotated yellow pill**, not plain text: `background: --sun-400`, `--ink-700` text, `--text-label` uppercase with `--ls-caps`, `padding: 6px 14px`, `--radius-pill`, `rotate(-2deg)`, reading "Hilfe. Herz. Hoffnung."
|
||||
- **H1**, same clamp scale and rotation treatment, different words and colour order:
|
||||
- "Helfen," — `--sun-600`, `rotate(-2deg)`
|
||||
- "teilen," — `--coral-500`, `rotate(1.5deg) translateX(12px)`
|
||||
- "zusammenhalten!" — `--sky-500`, `rotate(-1deg)`
|
||||
- Sub (`max-width: 34ch`): "Soziale Hilfe vor der Haustür. Der Verein ist gerade im Aufbau — und jede Hand zählt."
|
||||
- **Two** buttons, not one: primary "So kannst du helfen" (→ `#helfen`) and secondary "Kontakt" (→ `#kontakt`).
|
||||
- Two `TrustBadge`s: hand-heart / "Im Aufbau" / "wir fangen gerade an"; map-pin / "Rottenburg a.d. Laaber" / "für Familien hier".
|
||||
- Verein logo positioned `absolute` bottom-right, `width: clamp(110px, 16vw, 180px)`, `mix-blend-mode: multiply`, `rotate(-3deg)`.
|
||||
|
||||
**c) "Unser Lied"** — identical card pattern to the Startseite, centered, but titled
|
||||
**"Lied vom Hilfe Verein"**. Client requirement: **the two songs must not both appear on
|
||||
both pages** — shop song on the Startseite only, Verein song on this page only.
|
||||
|
||||
**d) "Wir brauchen Hilfe"** (`id="helfen"`) — `SectionHeader` with `hand-heart`, intro
|
||||
paragraph (`max-width: 56ch`): "Ein Verein im Aufbau braucht beides: Mittel, um wirklich
|
||||
helfen zu können, und Menschen, die mit anpacken. Finanziell und menschlich — in jeder
|
||||
Form." Then three `InfoTile`s, two of which carry a CTA:
|
||||
1. tone `soft`, "Geldspenden" / "Jeder Betrag hilft — für Ware, Miete und Familien, die gerade nichts übrig haben." / CTA primary "Spenden" → `mailto:` with subject `Spende Hilfe Verein`
|
||||
2. tone `cool`, "Ehrenamtlich mithelfen" / "Sortieren, verkaufen, aufbauen, mitdenken — regelmäßig oder ab und zu." / CTA secondary "Anrufen" → `tel:`
|
||||
3. tone `band`, "Weitersagen" / "Reichweite kostet nichts: erzähl von uns und bring Familien vorbei." / no CTA
|
||||
|
||||
These three are exactly the help types the client asked for: **Geldspenden, ehrenamtliche
|
||||
Helfer, Reichweite/Weitersagen**. Do not add donation tiers, a payment form or a
|
||||
membership flow — the association is not incorporated yet.
|
||||
|
||||
**e) "Wo alles angefangen hat"** — `--surface-band` band, two columns: copy left with a
|
||||
secondary `Button` "Mehr über den Laden" → Startseite; shop logo right, `max-width: 360px`.
|
||||
Copy:
|
||||
> Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche bekommen bei uns Spielsachen, die ein zweites Leben verdient haben.
|
||||
|
||||
> Die Sachen sind preiswert, sehr gut erhalten und von guter Qualität. Und wir suchen mit, bis du findest, was du brauchst.
|
||||
|
||||
**f) "Schreib uns"** (`id="kontakt"`) — `SectionHeader` with `mail`, then three white cards
|
||||
in an auto-fit grid (`minmax(min(100%,240px),1fr)`). Each: uppercase `--text-label`
|
||||
`--text-muted` label + value in `--text-body-l`.
|
||||
- Adresse — "84056 Rottenburg a.d. Laaber"
|
||||
- Telefon — `tel:015751479212` → "0157 51479212"
|
||||
- E-Mail — `mailto:emmas.schatzkiste.hilft@gmail.com` (`word-break: break-word`)
|
||||
|
||||
**g) SiteFooter** + §19 UStG line.
|
||||
|
||||
---
|
||||
|
||||
### 3. Shop (`design/Shop.dc.html`)
|
||||
|
||||
**Purpose.** The online shop is **intentionally parked**. The nav link stays visible so
|
||||
visitors know a shop is coming, but the page only announces that it is under construction.
|
||||
**Do not implement a storefront, cart or checkout.**
|
||||
|
||||
**Layout.** `min-height: 100vh`, flex column; header, a flex-1 centered `<main>`, footer
|
||||
pinned at the bottom.
|
||||
|
||||
**Content**, centered, `max-width: 620px`, `gap: --space-5`:
|
||||
- `Badge tone="warning"` — "Im Aufbau"
|
||||
- H1 `--text-display-l`/`--sky-500` — "Der Online-Shop ist noch im Aufbau."
|
||||
- Paragraph `max-width: 48ch` — "Wir richten ihn gerade ein. Bis dahin findest du unsere Sachen im Laden in Rottenburg a.d. Laaber — oder du rufst an und wir suchen mit."
|
||||
- Two `Button`s size `l`, centered flex row: primary `tel:` "0157 51479212", secondary "Zurück zur Startseite".
|
||||
|
||||
---
|
||||
|
||||
## Interactions & Behavior
|
||||
|
||||
**Navigation.** `SiteHeader` is controlled — it does not contain links. It calls
|
||||
`onNavigate(itemLabel)` and each page maps the label to a destination. When porting, replace
|
||||
this with the target framework's router and mark the active item from the current route.
|
||||
|
||||
| Label | Destination |
|
||||
|---|---|
|
||||
| Start | Startseite |
|
||||
| Shop | Shop page |
|
||||
| Hilfe Verein | Hilfe Verein page |
|
||||
| Kontakt | Hilfe Verein page, `#kontakt` anchor |
|
||||
|
||||
Client instruction: the nav is exactly these four items. An earlier "Unser Laden" item was
|
||||
removed on request — do not reintroduce it.
|
||||
|
||||
**Audio players.** Both are non-functional by design: the play `IconButton` is `disabled`,
|
||||
the progress track is a static pill, the time reads `0:00`, and a "Audio folgt" badge
|
||||
explains why. When the two MP3s arrive, wire each card to a real audio element, enable the
|
||||
button, and drive the progress pill from `timeupdate`. Persist playback position in
|
||||
`localStorage` and restore on load. Keep the one-song-per-page split.
|
||||
|
||||
**Hover / press / focus** come from the design system and should be preserved:
|
||||
- Hover: lift 3px, deepen shadow; buttons darken one step (coral 400 → 500). Never lighten, never change hue.
|
||||
- Press: `scale(0.97)`, shadow drops to `--shadow-xs`, fill darkens one further step.
|
||||
- Focus: double ring — `--ring-focus` = `0 0 0 3px var(--sky-100), 0 0 0 5px var(--sky-400)`. On everything.
|
||||
- Disabled: cream fill, muted ink, no shadow, no lift.
|
||||
|
||||
**Motion.** 120ms for state colour, 200ms for lift, 340ms for anything larger.
|
||||
`--ease-standard` for most things; `--ease-bounce` only on category discs and colour
|
||||
swatches (neither appears on these pages). No load fade-ins, no parallax, no looping
|
||||
animation.
|
||||
|
||||
**Responsive.** Everything is fluid; there are no media queries. Columns use
|
||||
`repeat(auto-fit, minmax(min(100%, Npx), 1fr))` so they collapse to one column on narrow
|
||||
viewports. Headline sizes use `clamp()`. The heroes use `min-height: clamp(...)` so they
|
||||
shrink on phones.
|
||||
|
||||
⚠️ **Known weak point to fix when porting:** the hero scrims use fixed-pixel gradient
|
||||
stops (430px / 560px / 820px). On viewports narrower than ~820px the photo is almost
|
||||
entirely covered by the scrim. Consider swapping to a vertical stack below ~768px: photo
|
||||
on top, text block below on solid colour.
|
||||
|
||||
## State Management
|
||||
Minimal — these are marketing pages.
|
||||
- `Startseite`: one prop, `audioSichtbar` (boolean, default `true`), toggles the entire "Unser Lied" section. Port as a feature flag or CMS field.
|
||||
- All three pages hold a small `dsReady` flag used only to wait for the design-system bundle before rendering icons. **This is an artifact of the prototype environment — drop it entirely** and import icons normally.
|
||||
- No data fetching. No forms. Contact is via `tel:` and `mailto:` links only.
|
||||
|
||||
## Design Tokens
|
||||
|
||||
**Colour — brand**
|
||||
| Token | Hex | Role |
|
||||
|---|---|---|
|
||||
| `--sky-400` | `#4A9FE0` | header, secondary buttons |
|
||||
| `--sky-500` | `#2E86D0` | headings, links |
|
||||
| `--sky-600` | `#1F6BAB` | link hover |
|
||||
| `--sky-50` | `#EAF4FC` | cool band |
|
||||
| `--sky-100` | `#CFE6F8` | focus halo |
|
||||
| `--sun-400` | `#F5C13B` | highlight, Verein hero edge + pill |
|
||||
| `--sun-600` | `#A87811` | yellow-on-light text (contrast-safe) |
|
||||
| `--sun-100` | `#FDF4DC` | band + footer cream, Verein hero scrim |
|
||||
| `--coral-400` | `#F4715A` | action colour (buy/press) |
|
||||
| `--coral-500` | `#DB513A` | action hover, coral-on-light text |
|
||||
| `--coral-50` | `#FFF1EE` | soft band |
|
||||
|
||||
**Colour — neutrals & semantics**
|
||||
`--surface-page`/`--surface-card` `#FFFFFF` · `--surface-sunk` `#F5F7FA` ·
|
||||
`--surface-band` `#FDF4DC` · `--surface-footer` `#FDF4DC` ·
|
||||
`--ink-300` `#8B94A0` (muted) · `--ink-500` `#4A5560` (body) · `--ink-700` `#232A33` (prices, strong) ·
|
||||
`--line-soft` `#EDEFF2` (card borders) · `--line` `#DFE3E8`
|
||||
|
||||
**Typography.** Display: **Fredoka** (Google Fonts). Body: **Nunito** (Google Fonts), 15px
|
||||
base, 1.6 leading. Two families only. Both are substitutions for an unsupplied brand font —
|
||||
swap in real binaries if they exist.
|
||||
|
||||
| Token | Size / line-height | Weight |
|
||||
|---|---|---|
|
||||
| `--text-display-xl` | 56px / 1.02 | 700 |
|
||||
| `--text-display-l` | 42px / 1.06 | 700 |
|
||||
| `--text-display-m` | 32px / 1.12 | 600 |
|
||||
| `--text-heading-s` | 24px / 1.2 | 600 |
|
||||
| `--text-subheading` | 19px / 1.3 | 600 |
|
||||
| `--text-body-l` | 17px / 1.6 | 400 |
|
||||
| `--text-body-m` | 15px / 1.6 | 400 |
|
||||
| `--text-small` | 13px / 1.5 | 400 |
|
||||
| `--text-label` | 11px / 1.4 | 700 |
|
||||
|
||||
Display tracking `--ls-display: -0.01em`; uppercase labels `--ls-caps: 0.08em`.
|
||||
Both H1s override `--text-display-xl` to `font-size: clamp(32px, 7.5vw, 56px); line-height: 1.05`.
|
||||
|
||||
**Spacing** — 4px base: 0, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96px
|
||||
(`--space-0` … `--space-24`). Layout: `--page-max: 1180px`, `--page-pad-x: 24px`,
|
||||
`--gutter-grid: 20px`, `--section-gap: 56px`, `--header-h: 64px`.
|
||||
⚠️ `--space-14` does **not** exist — an earlier draft used it and silently broke the hero padding.
|
||||
|
||||
**Radius** — 6 / 10 / 14 / 20 / 28px (`--radius-xs` … `--radius-xl`), `--radius-band: 24px`,
|
||||
`--radius-pill: 999px`, `--radius-circle: 50%`. **Nothing is square.** Every button, input,
|
||||
badge and select is a full pill.
|
||||
|
||||
**Shadows** — warm, blue-tinted, never black, never coloured:
|
||||
`--shadow-xs: 0 1px 2px rgba(35,52,74,.06)` ·
|
||||
`--shadow-card: 0 2px 10px rgba(35,52,74,.07)` ·
|
||||
`--shadow-card-hover: 0 10px 24px rgba(35,52,74,.13)` ·
|
||||
`--shadow-band: 0 4px 22px rgba(35,52,74,.09)` ·
|
||||
`--shadow-pop: 0 16px 40px rgba(35,52,74,.18)` ·
|
||||
`--shadow-button: 0 2px 0 rgba(35,52,74,.10)` (bottom-only, buttons at rest) ·
|
||||
`--shadow-inset-sunk: inset 0 1px 2px rgba(35,52,74,.06)`
|
||||
|
||||
## Assets
|
||||
|
||||
**Logos** (`design/` references `./assets/`, included in this bundle):
|
||||
- `assets/logo-shop.jpeg` — "Emma's Schatzkiste, Baby & Kind Second Hand". Supplied by the client.
|
||||
- `assets/logo-verein.jpeg` — "Emma's Schatzkiste Hilfe Verein — Hilfe. Herz. Hoffnung." Supplied by the client.
|
||||
|
||||
Both are **JPEGs with a baked-in white background**. The pages hide that box with
|
||||
`mix-blend-mode: multiply`, which works because they sit on white or pale cream. **Ask the
|
||||
client for transparent PNG or SVG versions** and drop the blend mode — the current approach
|
||||
will break on any darker background.
|
||||
|
||||
**Hero photography — placeholders, replace before launch.** Two free Pexels photos are
|
||||
**hot-linked, not licensed or downloaded**:
|
||||
- Startseite: `https://images.pexels.com/photos/3661386/pexels-photo-3661386.jpeg` (children with wooden toys)
|
||||
- Hilfe Verein: `https://images.pexels.com/photos/8435803/pexels-photo-8435803.jpeg` (children playing together)
|
||||
|
||||
Pexels images are free for commercial use, but hot-linking a third-party CDN in production
|
||||
is not acceptable. Either self-host them or — preferred — replace both with real photos
|
||||
from the shop. Check current Pexels terms before shipping either one.
|
||||
|
||||
**Opa Martin photo — missing.** Renders as a labelled drop-target placeholder
|
||||
(`ImagePlaceholder slotId="opa-martin"`). Client has confirmed a photo is coming. Image and
|
||||
name only, no caption.
|
||||
|
||||
**Audio — missing.** Two songs, one per page. Neither file has been delivered.
|
||||
|
||||
**Icons** — **Lucide**, 2px stroke, `currentColor`, via
|
||||
`https://unpkg.com/lucide@0.451.0/dist/umd/lucide.js`, wrapped by the design system's `Icon`
|
||||
component. Names used: `heart`, `heart-handshake`, `hand-heart`, `music`, `mail`,
|
||||
`map-pin`, `play`, `sparkles`, `badge-check`, `search`, `arrow-right`. Sizes: 15px in trust
|
||||
badges, 17–18px in nav/buttons, 22px in section headings. Stroke weight stays 2 at every
|
||||
size. Use a proper Lucide package rather than the CDN UMD build in production.
|
||||
|
||||
## Legal
|
||||
|
||||
**Kleinunternehmerregelung nach § 19 UStG.** All three pages carry this line beneath the
|
||||
footer, on `--surface-footer` in `--text-small`/`--text-muted`:
|
||||
|
||||
> Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.
|
||||
|
||||
Keep it on every page. If a shop is ever built, this wording must also appear at checkout
|
||||
and on invoices. Note the site currently has **no Impressum and no Datenschutzerklärung**
|
||||
— both are legally required for a German commercial site and must be added before launch.
|
||||
The footer's "Impressum" link is a label only and does not resolve.
|
||||
|
||||
## Still open (client-side)
|
||||
1. Opa Martin photo
|
||||
2. Two audio files (shop song, Verein song)
|
||||
3. Opening hours and full street address — only postcode and town are known
|
||||
4. Transparent logo files
|
||||
5. Legal name / status of the association (not yet incorporated; currently referred to only as "Hilfe Verein")
|
||||
6. Impressum and Datenschutzerklärung content
|
||||
|
||||
## Files
|
||||
```
|
||||
design/Startseite.dc.html Startseite
|
||||
design/Hilfe Verein.dc.html Hilfe Verein page
|
||||
design/Shop.dc.html "Im Aufbau" shop placeholder
|
||||
design/support.js prototype runtime — reference only, do not port
|
||||
design/image-slot.js drag-and-drop image placeholder — reference only
|
||||
assets/logo-shop.jpeg shop logo (client-supplied)
|
||||
assets/logo-verein.jpeg Verein logo (client-supplied)
|
||||
```
|
||||
|
||||
Each `.dc.html` is a single file: an HTML template followed by a small logic class in a
|
||||
`<script type="text/x-dc">` tag. Read the template for structure and inline styles; read the
|
||||
class for the data (nav items, footer columns, icon names, copy passed as props).
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 193 KiB |
@@ -0,0 +1,173 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/styles.css" />
|
||||
<script src="https://unpkg.com/lucide@0.451.0/dist/umd/lucide.js"></script>
|
||||
<script src="./image-slot.js"></script>
|
||||
<script src="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/_ds_bundle.js"></script>
|
||||
</helmet>
|
||||
|
||||
<div style="background:var(--surface-page)">
|
||||
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteHeader" items="{{ navItems }}" active="Hilfe Verein" on-navigate="{{ onNavigate }}" hint-size="100%,64px"></x-import>
|
||||
|
||||
<section style="position:relative; background:var(--sun-100); overflow:hidden; border-bottom:6px solid var(--sun-400); min-height:clamp(520px, 62vw, 660px); display:grid">
|
||||
<img src="https://images.pexels.com/photos/8435803/pexels-photo-8435803.jpeg?auto=compress&cs=tinysrgb&w=1800" alt="Kinder spielen gemeinsam" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:72% 40%" />
|
||||
<span style="position:absolute; inset:0; background:linear-gradient(100deg, var(--sun-100) 0, var(--sun-100) 430px, rgba(253,244,220,0.9) 560px, rgba(253,244,220,0) 820px)"></span>
|
||||
<div style="position:relative; align-self:center; width:100%; max-width:var(--page-max); margin:0 auto; padding:var(--space-12) var(--page-pad-x)">
|
||||
<div style="display:grid; gap:var(--space-5); justify-items:start; max-width:min(100%, 540px)">
|
||||
<span style="display:inline-block; background:var(--sun-400); color:var(--ink-700); font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; padding:6px 14px; border-radius:var(--radius-pill); transform:rotate(-2deg)">Hilfe. Herz. Hoffnung.</span>
|
||||
<h1 style="font:var(--text-display-xl); font-size:clamp(32px,7.5vw,56px); line-height:1.05; display:grid; justify-items:start; gap:2px">
|
||||
<span style="color:var(--sun-600); display:inline-block; transform:rotate(-2deg)">Helfen,</span>
|
||||
<span style="color:var(--coral-500); display:inline-block; transform:rotate(1.5deg) translateX(12px)">teilen,</span>
|
||||
<span style="color:var(--sky-500); display:inline-block; transform:rotate(-1deg)">zusammenhalten!</span>
|
||||
</h1>
|
||||
<p style="font:var(--text-body-l); color:var(--ink-700); max-width:34ch">Soziale Hilfe vor der Haustür. Der Verein ist gerade im Aufbau — und jede Hand zählt.</p>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:var(--space-3)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="#helfen" size="l" icon="{{ iconArrow }}" hint-size="230px,48px">So kannst du helfen</x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="#kontakt" size="l" variant="secondary" hint-size="150px,48px">Kontakt</x-import>
|
||||
</div>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-2)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconHandSmall }}" title="Im Aufbau" sub="wir fangen gerade an" hint-size="190px,52px"></x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconPin }}" title="Rottenburg a.d. Laaber" sub="für Familien hier" hint-size="220px,52px"></x-import>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img src="./assets/logo-verein.jpeg" alt="Emma's Schatzkiste Hilfe Verein" style="position:absolute; right:var(--page-pad-x); bottom:var(--space-6); width:clamp(110px, 16vw, 180px); mix-blend-mode:multiply; transform:rotate(-3deg)" />
|
||||
</section>
|
||||
|
||||
<section style="max-width:var(--page-max); margin:0 auto; padding:var(--space-16) var(--page-pad-x) 0">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Unser Lied" icon="{{ iconMusic }}" hint-size="100%,44px"></x-import>
|
||||
<div style="display:grid; max-width:520px; margin:0 auto">
|
||||
<div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-4)">
|
||||
<div style="display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap">
|
||||
<span style="font:var(--text-subheading); color:var(--sky-500)">Lied vom Hilfe Verein</span>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Badge" tone="warning" hint-size="110px,22px">Audio folgt</x-import>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:var(--space-4)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.IconButton" label="Abspielen" disabled="{{ true }}" size="{{ 44 }}" hint-size="44px,44px">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Icon" name="play" size="{{ 18 }}" hint-size="18px,18px"></x-import>
|
||||
</x-import>
|
||||
<div style="flex:1; display:grid; gap:var(--space-2)">
|
||||
<span style="height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)"></span>
|
||||
<span style="font:var(--text-small); color:var(--text-muted)">0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font:var(--text-small); color:var(--text-muted)">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="helfen" style="max-width:var(--page-max); margin:0 auto; padding:var(--space-16) var(--page-pad-x) var(--space-12)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Wir brauchen Hilfe" icon="{{ iconHands }}" hint-size="100%,44px"></x-import>
|
||||
<p style="font:var(--text-body-l); color:var(--text-body); max-width:56ch; margin-bottom:var(--space-8)">Ein Verein im Aufbau braucht beides: Mittel, um wirklich helfen zu können, und Menschen, die mit anpacken. Finanziell und menschlich — in jeder Form.</p>
|
||||
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--gutter-grid)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Geldspenden" body="Jeder Betrag hilft — für Ware, Miete und Familien, die gerade nichts übrig haben." tone="soft" cta="{{ ctaSpende }}" hint-size="100%,170px"></x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Ehrenamtlich mithelfen" body="Sortieren, verkaufen, aufbauen, mitdenken — regelmäßig oder ab und zu." tone="cool" cta="{{ ctaHelfen }}" hint-size="100%,170px"></x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Weitersagen" body="Reichweite kostet nichts: erzähl von uns und bring Familien vorbei." tone="band" hint-size="100%,170px"></x-import>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="max-width:var(--page-max); margin:0 auto var(--space-16); padding:0 var(--page-pad-x)">
|
||||
<div style="background:var(--surface-band-cool); border-radius:var(--radius-band); padding:var(--space-10); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--space-8); align-items:center">
|
||||
<div style="display:grid; gap:var(--space-4); justify-items:start">
|
||||
<span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--sky-500)">Der Second-Hand-Laden</span>
|
||||
<h2 style="font:var(--text-display-l); color:var(--sky-500)">Wo alles angefangen hat.</h2>
|
||||
<p style="font:var(--text-body-l); color:var(--text-body); max-width:46ch">Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche bekommen bei uns Spielsachen, die ein zweites Leben verdient haben.</p>
|
||||
<p style="font:var(--text-body-l); color:var(--text-body); max-width:46ch">Die Sachen sind preiswert, sehr gut erhalten und von guter Qualität. Und wir suchen mit, bis du findest, was du brauchst.</p>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Startseite.dc.html" variant="secondary" size="l" hint-size="210px,48px">Mehr über den Laden</x-import>
|
||||
</div>
|
||||
<img src="./assets/logo-shop.jpeg" alt="Emma's Schatzkiste — Baby & Kind Second Hand" style="width:100%; max-width:360px; justify-self:center; mix-blend-mode:multiply" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section id="kontakt" style="max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad-x) var(--space-16)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Schreib uns" icon="{{ iconMail }}" hint-size="100%,44px"></x-import>
|
||||
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:var(--gutter-grid)">
|
||||
<div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-2)">
|
||||
<span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted)">Adresse</span>
|
||||
<p style="font:var(--text-body-l); color:var(--text-price)">84056 Rottenburg a.d. Laaber</p>
|
||||
</div>
|
||||
<div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-2)">
|
||||
<span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted)">Telefon</span>
|
||||
<p style="font:var(--text-body-l)"><a href="tel:015751479212">0157 51479212</a></p>
|
||||
</div>
|
||||
<div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-2)">
|
||||
<span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--text-muted)">E-Mail</span>
|
||||
<p style="font:var(--text-body-l); word-break:break-word"><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteFooter" columns="{{ footerColumns }}" hint-size="100%,280px"></x-import>
|
||||
<div style="background:var(--surface-footer); padding:0 var(--page-pad-x) var(--space-8)">
|
||||
<p style="max-width:var(--page-max); margin:0 auto; font:var(--text-small); color:var(--text-muted)">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
state = { dsReady: false };
|
||||
|
||||
componentDidMount() {
|
||||
this.waitForDs();
|
||||
}
|
||||
|
||||
componentWillUnmount() { clearInterval(this._t); }
|
||||
|
||||
waitForDs() {
|
||||
const check = () => {
|
||||
const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
|
||||
if (ds && ds.Icon) { clearInterval(this._t); this.setState({ dsReady: true }); }
|
||||
};
|
||||
this._t = setInterval(check, 120);
|
||||
check();
|
||||
}
|
||||
|
||||
icon(name, size) {
|
||||
const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
|
||||
if (!ds || !ds.Icon) return null;
|
||||
return React.createElement(ds.Icon, { name: name, size: size || 22 });
|
||||
}
|
||||
|
||||
link(href, label, variant) {
|
||||
const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
|
||||
if (!ds || !ds.Button) return null;
|
||||
return React.createElement(ds.Button, { as: 'a', href: href, size: 's', variant: variant || 'primary' }, label);
|
||||
}
|
||||
|
||||
renderVals() {
|
||||
return {
|
||||
navItems: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt'],
|
||||
onNavigate: item => {
|
||||
if (item === 'Start') window.location.href = './Startseite.dc.html';
|
||||
else if (item === 'Shop') window.location.href = './Shop.dc.html';
|
||||
else if (item === 'Kontakt') window.location.hash = '#kontakt';
|
||||
},
|
||||
iconArrow: this.icon('arrow-right', 18),
|
||||
iconHandSmall: this.icon('hand-heart', 15),
|
||||
iconPin: this.icon('map-pin', 15),
|
||||
footerColumns: [
|
||||
{ title: 'Laden', links: ['Unser Laden', 'Öffnungszeiten', 'Ware abgeben'] },
|
||||
{ title: 'Hilfe Verein', links: ['Spenden', 'Mithelfen', 'Weitersagen'] },
|
||||
{ title: 'Über', links: ['Über uns', 'Kontakt', 'Impressum'] }
|
||||
],
|
||||
iconHands: this.icon('hand-heart'),
|
||||
iconMail: this.icon('mail'),
|
||||
iconMusic: this.icon('music'),
|
||||
ctaSpende: this.link('mailto:emmas.schatzkiste.hilft@gmail.com?subject=Spende%20Hilfe%20Verein', 'Spenden'),
|
||||
ctaHelfen: this.link('tel:015751479212', 'Anrufen', 'secondary')
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/styles.css" />
|
||||
<script src="https://unpkg.com/lucide@0.451.0/dist/umd/lucide.js"></script>
|
||||
<script src="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/_ds_bundle.js"></script>
|
||||
</helmet>
|
||||
|
||||
<div style="background:var(--surface-page); min-height:100vh; display:flex; flex-direction:column">
|
||||
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteHeader" items="{{ navItems }}" active="Shop" on-navigate="{{ onNavigate }}" hint-size="100%,64px"></x-import>
|
||||
|
||||
<main style="flex:1; display:flex; align-items:center; justify-content:center; padding:var(--space-20) var(--page-pad-x)">
|
||||
<div style="max-width:620px; display:grid; gap:var(--space-5); justify-items:center; text-align:center">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Badge" tone="warning" hint-size="120px,22px">Im Aufbau</x-import>
|
||||
<h1 style="font:var(--text-display-l); color:var(--sky-500)">Der Online-Shop ist noch im Aufbau.</h1>
|
||||
<p style="font:var(--text-body-l); color:var(--text-body); max-width:48ch">Wir richten ihn gerade ein. Bis dahin findest du unsere Sachen im Laden in Rottenburg a.d. Laaber — oder du rufst an und wir suchen mit.</p>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:center; margin-top:var(--space-2)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="tel:015751479212" size="l" hint-size="190px,48px">0157 51479212</x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Startseite.dc.html" variant="secondary" size="l" hint-size="190px,48px">Zurück zur Startseite</x-import>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteFooter" columns="{{ footerColumns }}" hint-size="100%,280px"></x-import>
|
||||
<div style="background:var(--surface-footer); padding:0 var(--page-pad-x) var(--space-8)">
|
||||
<p style="max-width:var(--page-max); margin:0 auto; font:var(--text-small); color:var(--text-muted)">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
return {
|
||||
navItems: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt'],
|
||||
onNavigate: item => {
|
||||
if (item === 'Hilfe Verein') window.location.href = './Hilfe Verein.dc.html';
|
||||
else if (item === 'Kontakt') window.location.href = './Hilfe Verein.dc.html#kontakt';
|
||||
else if (item !== 'Shop') window.location.href = './Startseite.dc.html';
|
||||
},
|
||||
footerColumns: [
|
||||
{ title: 'Laden', links: ['Unser Laden', 'Öffnungszeiten', 'Ware abgeben'] },
|
||||
{ title: 'Hilfe Verein', links: ['Spenden', 'Mithelfen', 'Weitersagen'] },
|
||||
{ title: 'Über', links: ['Über uns', 'Kontakt', 'Impressum'] }
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,158 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<link rel="stylesheet" href="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/styles.css" />
|
||||
<script src="https://unpkg.com/lucide@0.451.0/dist/umd/lucide.js"></script>
|
||||
<script src="./image-slot.js"></script>
|
||||
<script src="./_ds/emmas-schatzkiste-design-system-3da4b643-9f78-4b1c-927d-8b058aa8403e/_ds_bundle.js"></script>
|
||||
</helmet>
|
||||
|
||||
<div style="background:var(--surface-page)">
|
||||
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteHeader" items="{{ navItems }}" active="Start" on-navigate="{{ onNavigate }}" hint-size="100%,64px"></x-import>
|
||||
|
||||
<section style="position:relative; background:var(--surface-band-cool); overflow:hidden; min-height:clamp(540px, 64vw, 680px); display:grid">
|
||||
<img src="https://images.pexels.com/photos/3661386/pexels-photo-3661386.jpeg?auto=compress&cs=tinysrgb&w=1800" alt="Kinder spielen mit Holzspielzeug" style="position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:74% 45%" />
|
||||
<span style="position:absolute; inset:0; background:linear-gradient(98deg, var(--surface-card) 0, var(--surface-card) 430px, rgba(255,255,255,0.9) 560px, rgba(255,255,255,0) 820px)"></span>
|
||||
<div style="position:relative; align-self:center; width:100%; max-width:var(--page-max); margin:0 auto; padding:var(--space-10) var(--page-pad-x)">
|
||||
<div style="display:grid; gap:var(--space-5); justify-items:start; max-width:min(100%, 540px)">
|
||||
<img src="./assets/logo-shop.jpeg" alt="Emma's Schatzkiste — Baby & Kind Second Hand" style="width:100%; max-width:200px; mix-blend-mode:multiply" />
|
||||
<h1 style="font:var(--text-display-xl); font-size:clamp(32px,7.5vw,56px); line-height:1.05; display:grid; justify-items:start; gap:2px">
|
||||
<span style="color:var(--sky-500); display:inline-block; transform:rotate(-2.5deg)">Gebraucht,</span>
|
||||
<span style="color:var(--sun-600); display:inline-block; transform:rotate(1.5deg) translateX(14px)">geliebt,</span>
|
||||
<span style="color:var(--coral-500); display:inline-block; transform:rotate(-1deg)">weitergegeben!</span>
|
||||
</h1>
|
||||
<p style="font:var(--text-body-l); color:var(--ink-700); max-width:34ch">Baby- und Kindersachen aus zweiter Hand — preiswert, gut erhalten, mitten in Rottenburg.</p>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Hilfe Verein.dc.html" size="l" icon="{{ iconArrow }}" hint-size="280px,48px">Hilfe Verein ansehen</x-import>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-2)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconSparkles }}" title="Einzelstücke" sub="nur 1× vorhanden" hint-size="180px,52px"></x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.TrustBadge" icon="{{ iconCheck }}" title="Sehr gut erhalten" sub="wir prüfen jedes Teil" hint-size="200px,52px"></x-import>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="max-width:var(--page-max); margin:0 auto; padding:var(--space-16) var(--page-pad-x) var(--space-12)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Wie alles angefangen hat" icon="{{ iconHeart }}" hint-size="100%,44px"></x-import>
|
||||
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--gutter-grid); align-items:start">
|
||||
<p style="font:var(--text-body-l); color:var(--text-body); max-width:52ch">Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche sollen Spielsachen bekommen, die ein zweites Leben verdient haben: nachhaltig, familienfreundlich und für jeden Geldbeutel.</p>
|
||||
<p style="font:var(--text-body-l); color:var(--text-body); max-width:52ch">Bei uns findest du Einzelstücke — vom Strampler bis zum Bobbycar. Jedes Teil gibt es nur 1× vorhanden, und jedes hat schon eine Geschichte hinter sich.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section style="max-width:560px; margin:0 auto; padding:var(--space-8) var(--page-pad-x) var(--space-16); display:grid; gap:var(--space-5); justify-items:center">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.ImagePlaceholder" slot-id="opa-martin" label="Bild von Opa Martin hier ablegen" tone="sun" ratio="1 / 1" radius="var(--radius-xl)" style="width:100%" hint-size="100%,420px"></x-import>
|
||||
<span style="font:var(--text-display-m); color:var(--sky-500)">Opa Martin</span>
|
||||
</section>
|
||||
|
||||
<section style="max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad-x) var(--space-16)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Für Familien" icon="{{ iconFamily }}" hint-size="100%,44px"></x-import>
|
||||
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:var(--gutter-grid)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Preise für Familien" body="Second-Hand-Preise, die zum Familienbudget passen." tone="cool" hint-size="100%,150px"></x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Sehr gut erhalten" body="Auch aus zweiter Hand: geprüft, sauber, in gutem Zustand." tone="band" hint-size="100%,150px"></x-import>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.InfoTile" title="Wir suchen mit" body="Sag uns, was du brauchst — wir helfen beim Suchen." tone="soft" hint-size="100%,150px"></x-import>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<sc-if value="{{ audioSichtbar }}" hint-placeholder-val="{{ true }}">
|
||||
<section style="max-width:var(--page-max); margin:0 auto; padding:0 var(--page-pad-x) var(--space-16)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SectionHeader" title="Unser Lied" icon="{{ iconMusic }}" hint-size="100%,44px"></x-import>
|
||||
<div style="display:grid; max-width:520px; margin:0 auto">
|
||||
<div style="background:var(--surface-card); border:1px solid var(--line-soft); border-radius:var(--radius-l); box-shadow:var(--shadow-card); padding:var(--space-5); display:grid; gap:var(--space-4)">
|
||||
<div style="display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap">
|
||||
<span style="font:var(--text-subheading); color:var(--sky-500)">Lied vom Laden</span>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Badge" tone="warning" hint-size="110px,22px">Audio folgt</x-import>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:var(--space-4)">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.IconButton" label="Abspielen" disabled="{{ true }}" size="{{ 44 }}" hint-size="44px,44px">
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Icon" name="play" size="{{ 18 }}" hint-size="18px,18px"></x-import>
|
||||
</x-import>
|
||||
<div style="flex:1; display:grid; gap:var(--space-2)">
|
||||
<span style="height:8px; border-radius:var(--radius-pill); background:var(--surface-sunk)"></span>
|
||||
<span style="font:var(--text-small); color:var(--text-muted)">0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<p style="font:var(--text-small); color:var(--text-muted)">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</sc-if>
|
||||
|
||||
<section style="max-width:var(--page-max); margin:0 auto var(--space-16); padding:0 var(--page-pad-x)">
|
||||
<div style="background:var(--surface-band); border-radius:var(--radius-band); padding:var(--space-10); display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:var(--space-8); align-items:center">
|
||||
<div style="display:grid; gap:var(--space-4); justify-items:start">
|
||||
<span style="font:var(--text-label); letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--sun-600)">Hilfe. Herz. Hoffnung.</span>
|
||||
<h2 style="font:var(--text-display-l); color:var(--sky-500)">Unser Hilfe Verein ist im Aufbau.</h2>
|
||||
<p style="font:var(--text-body-l); color:var(--text-body); max-width:46ch">Soziale Hilfe für unsere Region. Dafür brauchen wir finanzielle und menschliche Hilfe — in jeder Form, die du geben kannst.</p>
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.Button" as="a" href="./Hilfe Verein.dc.html" size="l" hint-size="220px,48px">So kannst du helfen</x-import>
|
||||
</div>
|
||||
<img src="./assets/logo-verein.jpeg" alt="Emma's Schatzkiste Hilfe Verein" style="width:100%; max-width:380px; justify-self:center; mix-blend-mode:multiply" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<x-import component-from-global-scope="EmmasSchatzkisteDesignSystem_3da4b6.SiteFooter" columns="{{ footerColumns }}" hint-size="100%,280px"></x-import>
|
||||
<div style="background:var(--surface-footer); padding:0 var(--page-pad-x) var(--space-8)">
|
||||
<p style="max-width:var(--page-max); margin:0 auto; font:var(--text-small); color:var(--text-muted)">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"audioSichtbar":{"editor":"boolean","default":true,"tsType":"boolean","section":"Inhalte"}}">
|
||||
class Component extends DCLogic {
|
||||
state = { dsReady: false };
|
||||
|
||||
componentDidMount() {
|
||||
this.waitForDs();
|
||||
}
|
||||
|
||||
componentWillUnmount() { clearInterval(this._t); }
|
||||
|
||||
waitForDs() {
|
||||
const check = () => {
|
||||
const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
|
||||
if (ds && ds.Icon) { clearInterval(this._t); this.setState({ dsReady: true }); }
|
||||
};
|
||||
this._t = setInterval(check, 120);
|
||||
check();
|
||||
}
|
||||
|
||||
icon(name, size) {
|
||||
const ds = window.EmmasSchatzkisteDesignSystem_3da4b6;
|
||||
if (!ds || !ds.Icon) return null;
|
||||
return React.createElement(ds.Icon, { name: name, size: size || 22 });
|
||||
}
|
||||
|
||||
renderVals() {
|
||||
return {
|
||||
audioSichtbar: this.props.audioSichtbar ?? true,
|
||||
navItems: ['Start', 'Shop', 'Hilfe Verein', 'Kontakt'],
|
||||
onNavigate: item => {
|
||||
if (item === 'Shop') window.location.href = './Shop.dc.html';
|
||||
else if (item === 'Hilfe Verein') window.location.href = './Hilfe Verein.dc.html';
|
||||
else if (item === 'Kontakt') window.location.href = './Hilfe Verein.dc.html#kontakt';
|
||||
},
|
||||
iconArrow: this.icon('arrow-right', 18),
|
||||
iconSparkles: this.icon('sparkles', 15),
|
||||
iconCheck: this.icon('badge-check', 15),
|
||||
iconSearch: this.icon('search', 15),
|
||||
footerColumns: [
|
||||
{ title: 'Laden', links: ['Unser Laden', 'Öffnungszeiten', 'Ware abgeben'] },
|
||||
{ title: 'Hilfe Verein', links: ['Spenden', 'Mithelfen', 'Weitersagen'] },
|
||||
{ title: 'Über', links: ['Über uns', 'Kontakt', 'Impressum'] }
|
||||
],
|
||||
iconHeart: this.icon('heart'),
|
||||
iconFamily: this.icon('heart-handshake'),
|
||||
iconMusic: this.icon('music')
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large.
Load diff
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,188 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Hilfe Verein — Hilfe. Herz. Hoffnung. | Emma's Schatzkiste</title>
|
||||
<meta name="description" content="Soziale Hilfe vor der Haustür in Rottenburg a.d. Laaber. Der Hilfe Verein ist im Aufbau: Geldspenden, ehrenamtlich mithelfen, weitersagen — jede Hand zählt." />
|
||||
<meta name="theme-color" content="#FDF4DC" />
|
||||
<link rel="icon" href="assets/logo-verein.png" />
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
|
||||
</head>
|
||||
<body class="page-verein">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
<header class="hdr">
|
||||
<div class="wrap hdr__in">
|
||||
<a class="hdr__brand" href="index.html">
|
||||
<img src="assets/logo-shop.png" alt="" />
|
||||
Emma's Schatzkiste
|
||||
</a>
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a href="index.html">Start</a>
|
||||
<a href="shop.html">Shop</a>
|
||||
<a href="hilfe-verein.html" aria-current="page">Hilfe Verein</a>
|
||||
<a href="#kontakt">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="inhalt">
|
||||
|
||||
<section class="hero hero--verein">
|
||||
<div class="hero__media" style="background-image:url('assets/hero-verein.jpg'); background-position:72% 40%" role="img" aria-label="Kinder spielen gemeinsam"></div>
|
||||
<span class="hero__scrim" aria-hidden="true"></span>
|
||||
<div class="wrap hero__in">
|
||||
<div class="hero__col">
|
||||
<span class="pill-eyebrow">Hilfe. Herz. Hoffnung.</span>
|
||||
<h1 class="hl">
|
||||
<span class="c-sun">Helfen,</span>
|
||||
<span class="c-coral">teilen,</span>
|
||||
<span class="c-sky">zusammenhalten!</span>
|
||||
</h1>
|
||||
<p class="hero__sub">Soziale Hilfe vor der Haustür. Der Verein ist gerade im Aufbau — und jede Hand zählt.</p>
|
||||
<div class="hero__actions">
|
||||
<a class="btn btn--primary btn--l" href="#helfen">
|
||||
So kannst du helfen
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
</a>
|
||||
<a class="btn btn--secondary btn--l" href="#kontakt">Kontakt</a>
|
||||
</div>
|
||||
<div class="trusts">
|
||||
<div class="trust">
|
||||
<span class="trust__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16"/><path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 15 6 6"/><path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z"/></svg></span>
|
||||
<span><b>Im Aufbau</b><span>wir fangen gerade an</span></span>
|
||||
</div>
|
||||
<div class="trust">
|
||||
<span class="trust__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0"/><circle cx="12" cy="10" r="3"/></svg></span>
|
||||
<span><b>Rottenburg a.d. Laaber</b><span>für Familien hier</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<img class="hero__mark" src="assets/logo-verein.png" alt="Emma's Schatzkiste Hilfe Verein" />
|
||||
</section>
|
||||
|
||||
<section class="wrap section">
|
||||
<div class="sh">
|
||||
<span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span>
|
||||
<h2>Unser Lied</h2>
|
||||
</div>
|
||||
<div class="song">
|
||||
<div class="song__top">
|
||||
<h3>Lied vom Hilfe Verein</h3>
|
||||
<span class="badge">Audio folgt</span>
|
||||
</div>
|
||||
<div class="song__row">
|
||||
<button class="iconbtn" type="button" disabled aria-label="Abspielen — Audio folgt">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"/></svg>
|
||||
</button>
|
||||
<div class="song__meter">
|
||||
<div class="song__track"></div>
|
||||
<span class="song__time">0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="song__note">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="field field--solid-sun" id="helfen">
|
||||
<div class="wrap">
|
||||
<div class="sh">
|
||||
<span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M11 14h2a2 2 0 1 0 0-4h-3c-.6 0-1.1.2-1.4.6L3 16"/><path d="m7 20 1.6-1.4c.3-.4.8-.6 1.4-.6h4c1.1 0 2.1-.4 2.8-1.2l4.6-4.4a2 2 0 0 0-2.75-2.91l-4.2 3.9"/><path d="m2 15 6 6"/><path d="M19.5 8.5c.7-.7 1.5-1.6 1.5-2.7A2.73 2.73 0 0 0 16 4a2.78 2.78 0 0 0-5 1.8c0 1.2.8 2 1.5 2.8L16 12Z"/></svg></span>
|
||||
<h2>Wir brauchen Hilfe</h2>
|
||||
</div>
|
||||
<p class="lede" style="margin-bottom:var(--space-8)">Ein Verein im Aufbau braucht beides: Mittel, um wirklich helfen zu können, und Menschen, die mit anpacken. Finanziell und menschlich — in jeder Form.</p>
|
||||
<div class="tiles">
|
||||
<div class="tile tile--rose">
|
||||
<h3>Geldspenden</h3>
|
||||
<p>Jeder Betrag hilft — für Ware, Miete und Familien, die gerade nichts übrig haben.</p>
|
||||
<a class="btn btn--primary" href="mailto:emmas.schatzkiste.hilft@gmail.com?subject=Spende%20Hilfe%20Verein">Spenden</a>
|
||||
</div>
|
||||
<div class="tile tile--cool">
|
||||
<h3>Ehrenamtlich mithelfen</h3>
|
||||
<p>Sortieren, verkaufen, aufbauen, mitdenken — regelmäßig oder ab und zu.</p>
|
||||
<a class="btn btn--secondary" href="tel:015751479212">Anrufen</a>
|
||||
</div>
|
||||
<div class="tile tile--warm">
|
||||
<h3>Weitersagen</h3>
|
||||
<p>Reichweite kostet nichts: erzähl von uns und bring Familien vorbei.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrap section--tight">
|
||||
<div class="band band--cool">
|
||||
<div class="band__copy">
|
||||
<span class="label">Der Second-Hand-Laden</span>
|
||||
<h2>Wo alles angefangen hat.</h2>
|
||||
<p>Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche bekommen bei uns Spielsachen, die ein zweites Leben verdient haben.</p>
|
||||
<p>Die Sachen sind preiswert, sehr gut erhalten und von guter Qualität. Und wir suchen mit, bis du findest, was du brauchst.</p>
|
||||
<a class="btn btn--secondary btn--l" href="index.html">Mehr über den Laden</a>
|
||||
</div>
|
||||
<img src="assets/logo-shop.png" alt="Emma's Schatzkiste — Baby & Kind Second Hand" style="max-width:360px" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrap section" id="kontakt">
|
||||
<div class="sh">
|
||||
<span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg></span>
|
||||
<h2>Schreib uns</h2>
|
||||
</div>
|
||||
<div class="contacts">
|
||||
<div class="contact">
|
||||
<span class="label">Adresse</span>
|
||||
<p>84056 Rottenburg a.d. Laaber</p>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<span class="label">Telefon</span>
|
||||
<p><a href="tel:015751479212">0157 51479212</a></p>
|
||||
</div>
|
||||
<div class="contact">
|
||||
<span class="label">E-Mail</span>
|
||||
<p><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="ftr">
|
||||
<div class="wrap">
|
||||
<div class="ftr__cols">
|
||||
<div class="ftr__col">
|
||||
<h3>Laden</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Unser Laden</a></li>
|
||||
<li><span>Öffnungszeiten folgen</span></li>
|
||||
<li><a href="tel:015751479212">Ware abgeben</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Hilfe Verein</h3>
|
||||
<ul>
|
||||
<li><a href="#helfen">Spenden</a></li>
|
||||
<li><a href="#helfen">Mithelfen</a></li>
|
||||
<li><a href="#helfen">Weitersagen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Über</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Über uns</a></li>
|
||||
<li><a href="#kontakt">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+137
@@ -0,0 +1,137 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Impressum — Emma's Schatzkiste</title>
|
||||
<meta name="description" content="Impressum und Anbieterkennzeichnung nach § 5 DDG für Emma's Schatzkiste in Rottenburg a.d. Laaber." />
|
||||
<meta name="robots" content="noindex, follow" />
|
||||
<meta name="theme-color" content="#FDF4DC" />
|
||||
<link rel="icon" href="assets/logo-shop.png" />
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
|
||||
</head>
|
||||
<body class="page-shop">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
<header class="hdr">
|
||||
<div class="wrap hdr__in">
|
||||
<a class="hdr__brand" href="index.html">
|
||||
<img src="assets/logo-shop.png" alt="" />
|
||||
Emma's Schatzkiste
|
||||
</a>
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a href="index.html">Start</a>
|
||||
<a href="shop.html">Shop</a>
|
||||
<a href="hilfe-verein.html">Hilfe Verein</a>
|
||||
<a href="hilfe-verein.html#kontakt">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="inhalt">
|
||||
<section class="wrap section">
|
||||
<div class="prose">
|
||||
<h1>Impressum</h1>
|
||||
|
||||
<div class="prose__warn">
|
||||
<strong>Fast vollständig.</strong> Name und Anschrift sind aus dem Impressum der
|
||||
bisherigen Seite übernommen. Offen ist nur noch das rot umrandete Feld unten.
|
||||
Dieser Entwurf ersetzt keine Rechtsberatung.
|
||||
</div>
|
||||
|
||||
<h2>Angaben gemäß § 5 DDG</h2>
|
||||
<dl>
|
||||
<dt>Anbieter</dt><dd>Martin Lindenau</dd>
|
||||
<dt>Anschrift</dt><dd>Hollerstraße 2<br />84056 Rottenburg a.d. Laaber<br />Deutschland</dd>
|
||||
<dt>Telefon</dt><dd><a href="tel:015751479212">0157 51479212</a></dd>
|
||||
<dt>E-Mail</dt><dd><a href="mailto:emmas.schatzkiste.hilft@gmail.com">emmas.schatzkiste.hilft@gmail.com</a></dd>
|
||||
</dl>
|
||||
<p>Eine ladungsfähige Anschrift ist zwingend — ein Postfach genügt nicht.</p>
|
||||
|
||||
<h2>Umsatzsteuer</h2>
|
||||
<p>Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine
|
||||
Umsatzsteuer und weisen sie daher auch nicht aus. Eine Umsatzsteuer-Identifikationsnummer
|
||||
nach § 27 a UStG besteht deshalb nicht.</p>
|
||||
|
||||
<h2>Registereintrag</h2>
|
||||
<p><span class="todo">Bitte bestätigen:</span> Kleingewerbe, nicht im Handelsregister
|
||||
eingetragen. Falls doch ein Eintrag besteht, gehören Registergericht und
|
||||
Registernummer hierher.</p>
|
||||
|
||||
<h2>Hilfe Verein</h2>
|
||||
<p>Der „Hilfe Verein" befindet sich im Aufbau und ist
|
||||
<strong>noch nicht als Verein eingetragen</strong>. Er tritt daher nicht als eigene
|
||||
juristische Person auf; verantwortlich ist die oben genannte Person. Sobald die
|
||||
Eintragung erfolgt ist, gehören Name, Rechtsform, Vereinsregister, Registernummer und
|
||||
der Vorstand hierher — und der Verein braucht dann ein eigenes Impressum.</p>
|
||||
|
||||
<h2>Verbraucherstreitbeilegung</h2>
|
||||
<p>Wir sind nicht bereit und nicht verpflichtet, an Streitbeilegungsverfahren vor einer
|
||||
Verbraucherschlichtungsstelle teilzunehmen.</p>
|
||||
<p>Ein Hinweis auf die EU-Plattform zur Online-Streitbeilegung entfällt: Sie wurde zum
|
||||
20. Juli 2025 abgeschaltet (Verordnung (EU) 2024/3228). Falls auf der alten Seite noch
|
||||
ein Link dorthin steht, muss er weg — ein toter Pflichthinweis ist selbst abmahnbar.</p>
|
||||
|
||||
<h2>Haftung für Inhalte</h2>
|
||||
<p>Als Diensteanbieter sind wir für eigene Inhalte auf diesen Seiten nach den
|
||||
allgemeinen Gesetzen verantwortlich. Wir sind nicht verpflichtet, übermittelte oder
|
||||
gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die
|
||||
auf eine rechtswidrige Tätigkeit hinweisen. Sobald uns eine konkrete Rechtsverletzung
|
||||
bekannt wird, entfernen wir den Inhalt umgehend.</p>
|
||||
|
||||
<h2>Haftung für Links</h2>
|
||||
<p>Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir
|
||||
keinen Einfluss haben. Für diese fremden Inhalte ist stets der jeweilige Anbieter
|
||||
verantwortlich. Bei Bekanntwerden von Rechtsverletzungen entfernen wir solche Links
|
||||
umgehend.</p>
|
||||
|
||||
<h2>Urheberrecht</h2>
|
||||
<p>Die durch die Betreiber erstellten Inhalte und Werke unterliegen dem deutschen
|
||||
Urheberrecht. Beiträge Dritter sind als solche gekennzeichnet.</p>
|
||||
|
||||
<h2>Bildnachweis</h2>
|
||||
<p>Fotos von <a href="https://www.pexels.com/" rel="noopener noreferrer" target="_blank">Pexels</a>
|
||||
(Pexels-Lizenz: kommerzielle Nutzung frei, keine Namensnennung erforderlich) —
|
||||
Bild-IDs 10831693, 34148341 und 6591155. Logos: Emma's Schatzkiste.</p>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer class="ftr">
|
||||
<div class="wrap">
|
||||
<div class="ftr__cols">
|
||||
<div class="ftr__col">
|
||||
<h3>Laden</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Unser Laden</a></li>
|
||||
<li><span>Öffnungszeiten folgen</span></li>
|
||||
<li><a href="tel:015751479212">Ware abgeben</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Hilfe Verein</h3>
|
||||
<ul>
|
||||
<li><a href="hilfe-verein.html#helfen">Spenden</a></li>
|
||||
<li><a href="hilfe-verein.html#helfen">Mithelfen</a></li>
|
||||
<li><a href="hilfe-verein.html#helfen">Weitersagen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Über</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Über uns</a></li>
|
||||
<li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
+177
@@ -0,0 +1,177 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Emma's Schatzkiste — Baby- und Kindersachen aus zweiter Hand in Rottenburg a.d. Laaber</title>
|
||||
<meta name="description" content="Second-Hand für Baby und Kind in Rottenburg a.d. Laaber: preiswert, sehr gut erhalten, jedes Teil nur einmal da. Dazu unser Hilfe Verein — Hilfe. Herz. Hoffnung." />
|
||||
<meta name="theme-color" content="#FDF4DC" />
|
||||
<link rel="icon" href="assets/logo-shop.png" />
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
|
||||
</head>
|
||||
<body class="page-shop">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
<header class="hdr">
|
||||
<div class="wrap hdr__in">
|
||||
<a class="hdr__brand" href="index.html">
|
||||
<img src="assets/logo-shop.png" alt="" />
|
||||
Emma's Schatzkiste
|
||||
</a>
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a href="index.html" aria-current="page">Start</a>
|
||||
<a href="shop.html">Shop</a>
|
||||
<a href="hilfe-verein.html">Hilfe Verein</a>
|
||||
<a href="hilfe-verein.html#kontakt">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="inhalt">
|
||||
|
||||
<section class="hero hero--shop">
|
||||
<div class="hero__media" style="background-image:url('assets/hero-start.jpg')" role="img" aria-label="Kinder spielen mit Holzspielzeug"></div>
|
||||
<span class="hero__scrim" aria-hidden="true"></span>
|
||||
<div class="wrap hero__in">
|
||||
<div class="hero__col">
|
||||
<img class="hero__logo" src="assets/logo-shop.png" alt="Emma's Schatzkiste — Baby & Kind Second Hand" />
|
||||
<h1 class="hl">
|
||||
<span class="c-sky">Gebraucht,</span>
|
||||
<span class="c-sun">geliebt,</span>
|
||||
<span class="c-coral">weitergegeben!</span>
|
||||
</h1>
|
||||
<p class="hero__sub">Baby- und Kindersachen aus zweiter Hand — preiswert, gut erhalten, mitten in Rottenburg.</p>
|
||||
<div class="hero__actions">
|
||||
<a class="btn btn--primary btn--l" href="hilfe-verein.html">
|
||||
Hilfe Verein ansehen
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="trusts">
|
||||
<div class="trust">
|
||||
<span class="trust__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .963 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.581a.5.5 0 0 1 0 .964L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.963 0z"/><path d="M20 3v4"/><path d="M22 5h-4"/><path d="M4 17v2"/><path d="M5 18H3"/></svg></span>
|
||||
<span><b>Einzelstücke</b><span>nur 1× vorhanden</span></span>
|
||||
</div>
|
||||
<div class="trust">
|
||||
<span class="trust__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z"/><path d="m9 12 2 2 4-4"/></svg></span>
|
||||
<span><b>Sehr gut erhalten</b><span>wir prüfen jedes Teil</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrap section">
|
||||
<div class="sh">
|
||||
<span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg></span>
|
||||
<h2>Wie alles angefangen hat</h2>
|
||||
</div>
|
||||
<div class="story">
|
||||
<div class="story__copy">
|
||||
<p>Im September haben wir den Second-Hand-Laden übernommen — eine Herzensangelegenheit. Kinder und Jugendliche sollen Spielsachen bekommen, die ein zweites Leben verdient haben: nachhaltig, familienfreundlich und für jeden Geldbeutel.</p>
|
||||
<p>Bei uns findest du Einzelstücke — vom Strampler bis zum Bobbycar. Jedes Teil gibt es nur 1× vorhanden, und jedes hat schon eine Geschichte hinter sich.</p>
|
||||
</div>
|
||||
<img class="story__img" src="assets/laden-story.jpg" alt="Hände legen ein Kinderoberteil zusammen und packen es in eine Kiste" loading="lazy" width="1200" height="900" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="field field--warm">
|
||||
<div class="wrap">
|
||||
<div class="portrait">
|
||||
<!-- Foto ausstehend. Sobald da: <img src="assets/opa-martin.jpg" alt="Opa Martin"> in den Slot. -->
|
||||
<div class="portrait__slot"><span>Bild von Opa Martin folgt</span></div>
|
||||
<p class="portrait__name">Opa Martin</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="field field--solid-sky">
|
||||
<div class="wrap">
|
||||
<div class="sh">
|
||||
<span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/><path d="M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66"/><path d="m18 15-2-2"/><path d="m15 18-2-2"/></svg></span>
|
||||
<h2>Für Familien</h2>
|
||||
</div>
|
||||
<div class="tiles">
|
||||
<div class="tile"><h3>Preise für Familien</h3><p>Second-Hand-Preise, die zum Familienbudget passen.</p></div>
|
||||
<div class="tile"><h3>Sehr gut erhalten</h3><p>Auch aus zweiter Hand: geprüft, sauber, in gutem Zustand.</p></div>
|
||||
<div class="tile"><h3>Wir suchen mit</h3><p>Sag uns, was du brauchst — wir helfen beim Suchen.</p></div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Feature-Flag im Handoff: audioSichtbar. Zum Ausblenden diese Sektion entfernen. -->
|
||||
<section class="wrap section--tight">
|
||||
<div class="sh">
|
||||
<span class="sh__chip"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg></span>
|
||||
<h2>Unser Lied</h2>
|
||||
</div>
|
||||
<div class="song">
|
||||
<div class="song__top">
|
||||
<h3>Lied vom Laden</h3>
|
||||
<span class="badge">Audio folgt</span>
|
||||
</div>
|
||||
<div class="song__row">
|
||||
<button class="iconbtn" type="button" disabled aria-label="Abspielen — Audio folgt">
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="6 3 20 12 6 21 6 3"/></svg>
|
||||
</button>
|
||||
<div class="song__meter">
|
||||
<div class="song__track"></div>
|
||||
<span class="song__time">0:00</span>
|
||||
</div>
|
||||
</div>
|
||||
<p class="song__note">Sobald die Datei da ist, spielt der Player sie hier ab.</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="wrap section--tight">
|
||||
<div class="band">
|
||||
<div class="band__copy">
|
||||
<span class="label">Hilfe. Herz. Hoffnung.</span>
|
||||
<h2>Unser Hilfe Verein ist im Aufbau.</h2>
|
||||
<p>Soziale Hilfe für unsere Region. Dafür brauchen wir finanzielle und menschliche Hilfe — in jeder Form, die du geben kannst.</p>
|
||||
<a class="btn btn--primary btn--l" href="hilfe-verein.html#helfen">So kannst du helfen</a>
|
||||
</div>
|
||||
<img src="assets/logo-verein.png" alt="Emma's Schatzkiste Hilfe Verein" />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="ftr">
|
||||
<div class="wrap">
|
||||
<div class="ftr__cols">
|
||||
<div class="ftr__col">
|
||||
<h3>Laden</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Unser Laden</a></li>
|
||||
<li><span>Öffnungszeiten folgen</span></li>
|
||||
<li><a href="tel:015751479212">Ware abgeben</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Hilfe Verein</h3>
|
||||
<ul>
|
||||
<li><a href="hilfe-verein.html#helfen">Spenden</a></li>
|
||||
<li><a href="hilfe-verein.html#helfen">Mithelfen</a></li>
|
||||
<li><a href="hilfe-verein.html#helfen">Weitersagen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Über</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Über uns</a></li>
|
||||
<li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Online-Shop im Aufbau — Emma's Schatzkiste</title>
|
||||
<meta name="description" content="Der Online-Shop von Emma's Schatzkiste ist noch im Aufbau. Bis dahin: vorbeikommen in Rottenburg a.d. Laaber oder anrufen — wir suchen mit." />
|
||||
<meta name="robots" content="noindex, follow" />
|
||||
<meta name="theme-color" content="#FDF4DC" />
|
||||
<link rel="icon" href="assets/logo-shop.png" />
|
||||
<link rel="preload" href="assets/fonts/nunito-400-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="preload" href="assets/fonts/fredoka-500-latin.woff2" as="font" type="font/woff2" crossorigin />
|
||||
<link rel="stylesheet" href="assets/fonts.css?v=1f6be3c3" />
|
||||
<link rel="stylesheet" href="assets/site.css?v=9b205dac" />
|
||||
</head>
|
||||
<body class="page-shop parked">
|
||||
<a class="skip" href="#inhalt">Zum Inhalt springen</a>
|
||||
|
||||
<header class="hdr">
|
||||
<div class="wrap hdr__in">
|
||||
<a class="hdr__brand" href="index.html">
|
||||
<img src="assets/logo-shop.png" alt="" />
|
||||
Emma's Schatzkiste
|
||||
</a>
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a href="index.html">Start</a>
|
||||
<a href="shop.html" aria-current="page">Shop</a>
|
||||
<a href="hilfe-verein.html">Hilfe Verein</a>
|
||||
<a href="hilfe-verein.html#kontakt">Kontakt</a>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main id="inhalt">
|
||||
<div class="parked__in">
|
||||
<span class="badge">Im Aufbau</span>
|
||||
<h1>Der Online-Shop ist noch im Aufbau.</h1>
|
||||
<p>Wir richten ihn gerade ein. Bis dahin findest du unsere Sachen im Laden in Rottenburg a.d. Laaber — oder du rufst an und wir suchen mit.</p>
|
||||
<div class="hero__actions" style="justify-content:center">
|
||||
<a class="btn btn--primary btn--l" href="tel:015751479212">0157 51479212</a>
|
||||
<a class="btn btn--secondary btn--l" href="index.html">Zurück zur Startseite</a>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<footer class="ftr">
|
||||
<div class="wrap">
|
||||
<div class="ftr__cols">
|
||||
<div class="ftr__col">
|
||||
<h3>Laden</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Unser Laden</a></li>
|
||||
<li><span>Öffnungszeiten folgen</span></li>
|
||||
<li><a href="tel:015751479212">Ware abgeben</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Hilfe Verein</h3>
|
||||
<ul>
|
||||
<li><a href="hilfe-verein.html#helfen">Spenden</a></li>
|
||||
<li><a href="hilfe-verein.html#helfen">Mithelfen</a></li>
|
||||
<li><a href="hilfe-verein.html#helfen">Weitersagen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="ftr__col">
|
||||
<h3>Über</h3>
|
||||
<ul>
|
||||
<li><a href="index.html">Über uns</a></li>
|
||||
<li><a href="hilfe-verein.html#kontakt">Kontakt</a></li>
|
||||
<li><a href="impressum.html">Impressum</a></li>
|
||||
<li><a href="datenschutz.html">Datenschutz</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<p class="ftr__legal">Kleinunternehmerregelung nach § 19 UStG: Als Kleinunternehmer berechnen wir keine Umsatzsteuer und weisen sie daher auch nicht aus.</p>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user