Andrej StevanovskiandClaude Opus 5.5
f067556314
- 'Wie alles angefangen hat' zeigt das echte Schaufenster statt des Pexels-Bilds - Player spielen lied-laden.mp3 (Startseite) und lied-verein.mp3 (Verein): Play/Pause, Fortschrittsregler per Tastatur, kein Autoplay, nichts gespeichert Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
230 lines
13 KiB
HTML
230 lines
13 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=ca3d584c" />
|
||
</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">
|
||
<span class="hdr__marks"><img src="assets/logo-shop.png" alt="" /><img src="assets/logo-verein.png" alt="" /></span>
|
||
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" id="ueber-uns">
|
||
<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 2025 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-front.jpg" alt="Schaufenster von Emma's Schatzkiste mit bunten Kinderrädern, Luftballonbogen am Eingang und dem Laden-Schild" loading="lazy" width="1304" height="869" />
|
||
</div>
|
||
</section>
|
||
|
||
<section class="field field--warm">
|
||
<div class="wrap">
|
||
<div class="portrait">
|
||
<img class="portrait__img" src="assets/opa-martin.jpg" alt="Opa Martin" width="800" height="1000" loading="lazy" />
|
||
<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>
|
||
|
||
<section class="wrap section" id="anfahrt">
|
||
<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="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>
|
||
<h2>So findest du uns</h2>
|
||
</div>
|
||
<div class="visit">
|
||
<div class="visit__info">
|
||
<div>
|
||
<span class="label">Adresse</span>
|
||
<p class="visit__addr">Hollerstraße 2<br />84056 Rottenburg a.d. Laaber</p>
|
||
</div>
|
||
<div>
|
||
<span class="label">Öffnungszeiten</span>
|
||
<dl class="hours">
|
||
<dt>Montag – Freitag</dt><dd>9:00 – 13:00 Uhr</dd>
|
||
<dt>Samstag, Sonntag</dt><dd>geschlossen</dd>
|
||
</dl>
|
||
</div>
|
||
<a class="btn btn--primary btn--l" href="https://www.google.com/maps/dir/?api=1&destination=EmMas+Schatzkiste%2C+Hollerstra%C3%9Fe+2%2C+84056+Rottenburg+an+der+Laaber" target="_blank" rel="noopener noreferrer">
|
||
Route planen
|
||
<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>
|
||
<!-- Zwei-Klick-Karte: Google Maps wird erst nach Klick geladen (DSGVO/TDDDG).
|
||
Vorher gibt es keine Verbindung zu Google. Skript am Seitenende. -->
|
||
<div class="map" data-map-src="https://maps.google.com/maps?q=EmMas%20Schatzkiste%2C%20Hollerstra%C3%9Fe%202%2C%2084056%20Rottenburg%20an%20der%20Laaber&z=16&output=embed">
|
||
<div class="map__consent">
|
||
<span class="map__pin"><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>
|
||
<p class="map__title">Karte von Google Maps</p>
|
||
<p class="map__note">Beim Laden werden Daten, u. a. deine IP-Adresse, an Google übertragen. Mehr dazu in der <a href="datenschutz.html#karte">Datenschutzerklärung</a>.</p>
|
||
<button class="btn btn--secondary" type="button" data-map-load>Karte laden</button>
|
||
</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" data-song>
|
||
<audio src="assets/audio/lied-laden.mp3" preload="metadata"></audio>
|
||
<div class="song__top">
|
||
<h3>Lied vom Laden</h3>
|
||
</div>
|
||
<div class="song__row">
|
||
<button class="iconbtn" type="button" data-song-toggle aria-label="Lied vom Laden abspielen">
|
||
<svg class="i-play" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><polygon points="7 4 20 12 7 20 7 4"/></svg>
|
||
<svg class="i-pause" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><rect x="6" y="4" width="4" height="16" rx="1"/><rect x="14" y="4" width="4" height="16" rx="1"/></svg>
|
||
</button>
|
||
<div class="song__meter">
|
||
<input class="song__seek" type="range" min="0" max="100" step="0.1" value="0" aria-label="Position im Lied" data-song-seek />
|
||
<span class="song__time"><span data-song-cur>0:00</span> / <span data-song-dur>2:12</span></span>
|
||
</div>
|
||
</div>
|
||
</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>
|
||
|
||
<script>
|
||
// Zwei-Klick-Karte: iframe erst auf ausdruecklichen Klick einsetzen.
|
||
document.querySelectorAll('[data-map-load]').forEach(function (btn) {
|
||
btn.addEventListener('click', function () {
|
||
var box = btn.closest('.map');
|
||
var f = document.createElement('iframe');
|
||
f.src = box.getAttribute('data-map-src');
|
||
f.title = 'Karte: EmMas Schatzkiste, Hollerstraße 2, Rottenburg a.d. Laaber';
|
||
f.referrerPolicy = 'no-referrer-when-downgrade';
|
||
box.replaceChildren(f);
|
||
box.classList.add('is-loaded');
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<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><a href="index.html#anfahrt">Hollerstraße 2, 84056 Rottenburg</a></li>
|
||
<li><span>Mo–Fr 9:00–13:00 Uhr</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#ueber-uns">Ü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>
|
||
|
||
<script src="assets/player.js" defer></script>
|
||
</body>
|
||
</html>
|