Andrej StevanovskiandClaude Opus 5
92a6faaf54
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>
178 lines
9.0 KiB
HTML
178 lines
9.0 KiB
HTML
<!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>
|