| Server IP : 85.155.190.233 / Your IP : 216.73.216.103 Web Server : nginx/1.24.0 System : Linux antigravity-cli 6.8.0-31-generic #31-Ubuntu SMP PREEMPT_DYNAMIC Sat Apr 20 00:40:06 UTC 2024 x86_64 User : wp-moonbloom ( 1001) PHP Version : 8.3.6 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : OFF | Sudo : ON | Pkexec : OFF Directory : /var/www/moonbloom/wp-content/themes/kadence-child/page-templates/ |
Upload File : |
<?php
/* Template Name: Alltowall Bear Landing */
?>
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Personalisierte Bär Tapete mit Name — MoonBloom Walls</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
:root {
--font-family: 'Montserrat', sans-serif;
--color-primary: #5c9c4a;
--color-primary-hover: #4e873e;
--color-dark: #2e334c;
--color-gray-bg: #f5f6f8;
--color-gray-border: #e0e4e8;
--color-text-muted: #7b8290;
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: var(--font-family); }
body { background-color: #fcfcfd; color: var(--color-dark); overflow-x: hidden; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 20px; }
/* TOP BAR */
.top-bar { background: #f1f3f5; padding: 10px 0; font-size: 13px; color: var(--color-text-muted); }
.top-bar .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.top-links a { color: var(--color-text-muted); text-decoration: none; margin-right: 15px; font-weight: 500; }
.top-tag { background: #e65c5c; color: #fff; padding: 2px 8px; border-radius: 12px; font-size: 11px; font-weight: 700; }
header { background: #fff; border-bottom: 1px solid var(--color-gray-border); padding: 16px 0; }
header .container { display: flex; justify-content: space-between; align-items: center; }
.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-dark); font-weight: 800; font-size: 22px; }
.logo-badge { font-size: 11px; color: var(--color-text-muted); font-weight: 500; }
.phone-block { text-align: right; }
.phone-block b { display: block; font-size: 16px; }
.nav-bar { background: var(--color-dark); color: #fff; }
.nav-bar .container { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.catalog-btn { background: #3e4460; color: #fff; padding: 12px 20px; font-weight: 700; font-size: 14px; cursor: pointer; border-radius: 6px; }
.nav-menu { display: flex; gap: 16px; list-style: none; font-size: 13px; font-weight: 600; overflow-x: auto; padding-bottom: 4px; }
.nav-menu a { color: #d1d5db; text-decoration: none; whitespace: nowrap; }
.btn-pick { margin-left: auto; background: var(--color-primary); color: #fff; padding: 12px 20px; font-weight: 700; font-size: 13px; border: none; cursor: pointer; border-radius: 6px; }
.breadcrumbs { padding: 16px 0; font-size: 12px; color: var(--color-text-muted); overflow-x: auto; whitespace: nowrap; }
.breadcrumbs a { color: var(--color-text-muted); text-decoration: none; }
/* HERO PRODUCT BLOCK */
.product-hero { display: grid; grid-template-columns: 720px 1fr; gap: 40px; margin-bottom: 40px; }
.gallery-box { position: relative; border-radius: 16px; overflow: hidden; }
.main-img { width: 100%; height: 520px; object-fit: cover; border-radius: 16px; display: block; }
.video-preview { width: 100%; height: 520px; border-radius: 16px; object-fit: cover; display: none; }
.gallery-thumbs { display: flex; gap: 12px; margin-top: 12px; }
.thumb-img { width: 90px; height: 70px; border-radius: 8px; object-fit: cover; cursor: pointer; border: 2px solid transparent; }
.thumb-img.active { border-color: var(--color-primary); }
.art-badge { display: inline-block; background: var(--color-gray-bg); color: var(--color-text-muted); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; margin-bottom: 12px; }
.product-title { font-size: 30px; font-weight: 800; margin-bottom: 16px; line-height: 1.25; }
.product-desc { font-size: 14px; color: #4b5563; line-height: 1.6; margin-bottom: 24px; }
/* ADVANTAGES GRID */
.advantages-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 50px; }
.adv-card { background: #fff; border-radius: 16px; padding: 20px; display: flex; align-items: center; gap: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.02); border: 1px solid var(--color-gray-border); }
.adv-icon { width: 44px; height: 44px; border-radius: 50%; background: var(--color-gray-bg); display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.adv-card b { font-size: 13px; line-height: 1.4; display: block; }
/* CALCULATOR */
.calc-container { max-width: 1280px; margin: 0 auto 60px; background: #fff; border-radius: 24px; padding: 40px; box-shadow: 0 10px 40px rgba(46, 51, 76, 0.05); display: grid; grid-template-columns: 1fr 380px; gap: 40px; border: 1px solid var(--color-gray-border); }
.calc-header h2 { font-size: 28px; font-weight: 800; margin-bottom: 6px; }
.calc-header p { color: var(--color-text-muted); font-size: 14px; margin-bottom: 24px; }
.section-title { font-size: 16px; font-weight: 700; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
.section-title::after { content: ''; flex: 1; height: 1px; background: var(--color-gray-border); }
.size-inputs { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.input-group { display: flex; flex-direction: column; gap: 6px; }
.input-group label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); }
.input-group input { width: 140px; height: 48px; border: 1px solid var(--color-gray-border); border-radius: 8px; padding: 0 16px; font-size: 18px; font-weight: 700; outline: none; }
.sq-badge { display: flex; align-items: center; gap: 8px; background: var(--color-gray-bg); padding: 12px 18px; border-radius: 8px; font-weight: 700; font-size: 18px; }
.personalization-box { background: #fdf8f4; border: 1px dashed #e4b896; border-radius: 12px; padding: 20px; margin: 24px 0; }
.personalization-box label { display: block; font-size: 13px; font-weight: 700; color: #8c532b; margin-bottom: 8px; }
.personalization-box input { width: 100%; height: 44px; border: 1px solid #dca982; border-radius: 8px; padding: 0 16px; font-size: 15px; font-weight: 600; outline: none; }
.materials-list { display: flex; flex-direction: column; gap: 12px; }
.mat-card { display: grid; grid-template-columns: 80px 1fr auto 48px; align-items: center; gap: 16px; border: 1px solid var(--color-gray-border); border-radius: 12px; padding: 16px; cursor: pointer; background: #fff; }
.mat-card.active { border: 2px solid var(--color-primary); background: #f8fbf7; }
.mat-img { width: 80px; height: 80px; border-radius: 8px; object-fit: cover; }
.mat-info h4 { font-size: 16px; font-weight: 800; }
.mat-tag { font-size: 11px; background: var(--color-gray-bg); color: var(--color-text-muted); padding: 3px 8px; border-radius: 4px; }
.mat-info p { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
.mat-price b { font-size: 18px; font-weight: 800; display: block; }
.check-icon { width: 32px; height: 32px; border-radius: 50%; background: var(--color-gray-bg); display: flex; align-items: center; justify-content: center; }
.mat-card.active .check-icon { background: var(--color-primary); color: #fff; }
.summary-card { background: var(--color-gray-bg); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; justify-content: space-between; }
.total-price { font-size: 36px; font-weight: 800; color: var(--color-dark); margin-bottom: 16px; }
.btn-submit { width: 100%; height: 56px; background: var(--color-primary); color: #fff; border: none; border-radius: 12px; font-size: 16px; font-weight: 800; cursor: pointer; margin-bottom: 16px; }
/* SEO TEXT BOX SECTION */
.seo-text-section { background: #fff; border-radius: 20px; padding: 40px; border: 1px solid var(--color-gray-border); margin-bottom: 60px; }
.seo-text-section h2 { font-size: 24px; font-weight: 800; margin-bottom: 16px; color: var(--color-dark); }
.seo-text-section h3 { font-size: 18px; font-weight: 700; margin: 24px 0 12px; color: var(--color-dark); }
.seo-text-section p { font-size: 14px; color: #4b5563; line-height: 1.7; margin-bottom: 16px; }
.seo-text-section ul { margin-left: 20px; margin-bottom: 20px; }
.seo-text-section li { font-size: 14px; color: #4b5563; margin-bottom: 8px; line-height: 1.5; }
/* OTHER PRODUCTS SLIDER SECTION */
.other-products-section { margin-bottom: 60px; }
.slider-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.slider-header h2 { font-size: 26px; font-weight: 800; }
.slider-arrows { display: flex; gap: 12px; }
.arrow-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-gray-border); background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; font-weight: 700; }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.prod-card { background: #fff; border-radius: 16px; overflow: hidden; border: 1px solid var(--color-gray-border); transition: transform 0.2s; }
.prod-card:hover { transform: translateY(-4px); }
.prod-card img { width: 100%; height: 260px; object-fit: cover; }
.prod-card-body { padding: 16px; }
.prod-card-title { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.prod-card-price { font-size: 14px; font-weight: 800; color: var(--color-primary); }
/* FOOTER */
footer { background: var(--color-dark); color: #fff; padding: 60px 0 30px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 320px repeat(3, 1fr); gap: 40px; margin-bottom: 40px; }
.footer-col h4 { font-size: 15px; font-weight: 700; margin-bottom: 16px; color: #e5e7eb; }
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 10px; }
.footer-col a { color: #9ca3af; text-decoration: none; font-size: 13px; }
.footer-bottom { border-top: 1px solid #374151; padding-top: 30px; font-size: 12px; color: #9ca3af; display: flex; justify-content: space-between; }
/* ======================================================== */
/* RESPONSIVE MOBILE & TABLET MEDIA QUERIES (MAX-WIDTH: 1024px) */
/* ======================================================== */
@media (max-width: 1024px) {
.product-hero { grid-template-columns: 1fr; gap: 24px; }
.main-img, .video-preview { height: 380px; }
.calc-container { grid-template-columns: 1fr; padding: 24px; gap: 28px; }
.advantages-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.products-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.footer-grid { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 640px) {
.container { padding: 0 14px; }
.top-bar { display: none; }
.logo { font-size: 18px; }
.logo-badge { display: none; }
.phone-block b { font-size: 14px; }
.product-title { font-size: 22px; }
.main-img, .video-preview { height: 280px; }
.gallery-thumbs { overflow-x: auto; padding-bottom: 6px; }
.thumb-img { width: 70px; height: 55px; flex-shrink: 0; }
.advantages-grid { grid-template-columns: 1fr; gap: 10px; }
.adv-card { padding: 14px; }
.calc-container { padding: 18px; border-radius: 16px; }
.calc-header h2 { font-size: 22px; }
.size-inputs { flex-direction: column; align-items: stretch; gap: 10px; }
.input-group input { width: 100%; height: 44px; }
.sq-badge { justify-content: center; }
.mat-card { grid-template-columns: 60px 1fr auto; padding: 12px; gap: 10px; }
.mat-img { width: 60px; height: 60px; }
.mat-info h4 { font-size: 14px; }
.mat-info p { display: none; }
.mat-price b { font-size: 15px; }
.check-icon { display: none; }
.seo-text-section { padding: 20px; }
.seo-text-section h2 { font-size: 20px; }
.products-grid { grid-template-columns: 1fr; }
.prod-card img { height: 220px; }
.footer-bottom { flex-direction: column; gap: 10px; text-align: center; }
}
</style>
</head>
<body>
<!-- TOP BAR -->
<div class="top-bar">
<div class="container">
<div class="top-links">
<a href="#">Für Designer</a>
<a href="#">Händler</a>
<a href="#">Kundeninfo</a>
<a href="#">Geschäftskunden</a>
<a href="#">Kinderwelt <span class="top-tag">NEW</span></a>
</div>
<div>Studio | Galerie | Blog | Kontakt</div>
</div>
</div>
<!-- HEADER -->
<header>
<div class="container">
<a href="#" class="logo">
<span>MoonBloom</span>
<span class="logo-badge">Premium Nursery<br>Wall Murals</span>
</a>
<div class="phone-block">
<span>Kostenfreie Beratung</span>
<b>+49 (0) 800 551-10-76</b>
</div>
</div>
</header>
<!-- NAV -->
<div class="nav-bar">
<div class="container">
<div class="catalog-btn">Tapeten-Katalog ☰</div>
<ul class="nav-menu">
<li><a href="#">Kindertapeten</a></li>
<li><a href="#">Babyzimmer</a></li>
<li><a href="#">Scandi & Boho</a></li>
<li><a href="#">Bewertungen</a></li>
<li><a href="#">Service & Muster</a></li>
</ul>
<button class="btn-pick">Tapete auswählen</button>
</div>
</div>
<div class="container">
<div class="breadcrumbs">
<a href="#">Startseite</a> → <a href="#">Kindertapeten</a> → <span>Personalisierte Bär Tapete mit Name</span>
</div>
<!-- HERO SECTION WITH ETSY MEDIA -->
<div class="product-hero">
<div>
<div class="gallery-box">
<img class="main-img" id="mainImg" src="https://i.etsystatic.com/64001040/r/il/bfd2ce/7759594900/il_1140xN.7759594900_a082.jpg" alt="Personalisierte Bär Tapete mit Name">
<video class="video-preview" id="videoPreview" controls loop muted autoplay src="https://v.etsystatic.com/video/upload/ac_none,du_15,q_auto:good/gb4dm9aw2q2uukgg0akm.mp4"></video>
</div>
<!-- THUMBNAILS -->
<div class="gallery-thumbs">
<img class="thumb-img active" onclick="switchMedia(this, 'img', 'https://i.etsystatic.com/64001040/r/il/bfd2ce/7759594900/il_1140xN.7759594900_a082.jpg')" src="https://i.etsystatic.com/64001040/r/il/bfd2ce/7759594900/il_1140xN.7759594900_a082.jpg" alt="Mockup 1">
<img class="thumb-img" onclick="switchMedia(this, 'img', 'https://i.etsystatic.com/64001040/r/il/5bc4e8/7807581433/il_1140xN.7807581433_m0ks.jpg')" src="https://i.etsystatic.com/64001040/r/il/5bc4e8/7807581433/il_1140xN.7807581433_m0ks.jpg" alt="Mockup 2">
<div class="thumb-img" onclick="switchMedia(this, 'video', '')" style="background:#2e334c; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px;">▶ VIDEO</div>
</div>
</div>
<div>
<div class="art-badge">ID: 4465016269 / SKU: MB-TEDDY-01</div>
<h1 class="product-title">Personalisierte Bär Tapete mit Name</h1>
<p class="product-desc">
Verwandeln Sie das Babyzimmer oder Kinderzimmer in eine sanfte Traumwelt mit unserer personalisierten Fototapete Bär mit Wunschname. Das süße Motiv zeigt einen niedlichen Teddybären, der entspannt auf einer weichen Wolke zwischen zarten Sternen träumt.
</p>
<div style="background:#f9fafb; padding:16px; border-radius:12px; margin-bottom:20px; font-size:13px; color:#374151;">
🌿 <b>Greenguard Gold zertifiziert:</b> Ungiftige, geruchsneutrale Farben auf Wasserbasis. Perfekt fürs Babyzimmer.
</div>
</div>
</div>
<!-- ADVANTAGES -->
<div class="advantages-grid">
<div class="adv-card"><div class="adv-icon">📐</div><b>Maßanfertigung exakt nach Ihren Wandmaßen</b></div>
<div class="adv-card"><div class="adv-icon">✨</div><b>Kostenlose Personalisierung mit Wunschname</b></div>
<div class="adv-card"><div class="adv-icon">🌿</div><b>Ungiftiges Premium Vlies-Material & abwischbar</b></div>
<div class="adv-card"><div class="adv-icon">✈️</div><b>Schneller Versand nach Deutschland & EU</b></div>
</div>
<!-- CALCULATOR -->
<div class="calc-container" id="calc">
<div>
<div class="calc-header">
<h2>Wandpreis berechnen</h2>
<p>Der Preis richtet sich nach Ihren individuellen Wandmaßen und dem gewählten Material</p>
</div>
<div class="section-title">Wandmaße eingeben</div>
<div class="size-inputs">
<div class="input-group">
<label for="w">Breite, cm</label>
<input type="number" id="w" value="300">
</div>
<div style="font-size:20px; padding-bottom:12px; color:#9c9ca0;">×</div>
<div class="input-group">
<label for="h">Höhe, cm</label>
<input type="number" id="h" value="250">
</div>
<div class="sq-badge"><span id="sq">7.5</span> м²</div>
</div>
<!-- PERSONALIZATION FIELD -->
<div class="personalization-box">
<label for="childName">✏️ Wunschname für das Wolken-Motiv:</label>
<input type="text" id="childName" placeholder="Z.B. Noah / Emma / Mia">
</div>
<div class="section-title">Material wählen</div>
<div class="materials-list">
<div class="mat-card active" data-price="34" data-name="PREMIUM VLIES">
<img class="mat-img" src="https://i.etsystatic.com/64001040/r/il/5bc4e8/7807581433/il_1140xN.7807581433_m0ks.jpg" alt="Vlies">
<div class="mat-info">
<h4>PREMIUM VLIES <span class="mat-tag">Bahnenware</span></h4>
<p>Formstabile Vliestapete mit matten Farben. Kleister direkt auf die Wand.</p>
</div>
<div class="mat-price"><b>34 €</b><span>pro m²</span></div>
<div class="check-icon">✓</div>
</div>
<div class="mat-card" data-price="42" data-name="NAHTLOS TEXTIL">
<img class="mat-img" src="https://i.etsystatic.com/64001040/r/il/bfd2ce/7759594900/il_1140xN.7759594900_a082.jpg" alt="Textil">
<div class="mat-info">
<h4>NAHTLOS TEXTIL <span class="mat-tag">Nahtlos</span></h4>
<p>Nahtloses Gewebe aus einem Stück ohne vertikale Stöße.</p>
</div>
<div class="mat-price"><b>42 €</b><span>pro m²</span></div>
<div class="check-icon">✓</div>
</div>
</div>
</div>
<div class="summary-card">
<div>
<div style="font-size:13px; color:#7b8290; margin-bottom:8px;">Gesamtpreis</div>
<div class="total-price" id="tot">255 €</div>
<div style="border-top:1px solid #e0e4e8; padding-top:16px; margin-bottom:24px; font-size:13px;" id="summary">
<b>Wand 1</b> — 255 € - PREMIUM VLIES, 300 x 250 cm
</div>
<button class="btn-submit">IN DEN WARENKORB →</button>
</div>
</div>
</div>
<!-- SEO TEXT BOX SECTION (FULL GERMAN DESCRIPTION FROM ETSY LISTING 29) -->
<div class="seo-text-section">
<h2>Bären Fototapete mit Name — Traumhafte Aquarell-Illustration fürs Babyzimmer</h2>
<p>
Verwandeln Sie das Babyzimmer oder Kinderzimmer in eine sanfte Traumwelt mit unserer personalisierten Fototapete Bär mit Wunschname. Das süße Motiv zeigt einen niedlichen Teddybären, der entspannt auf einer weichen Wolke zwischen zarten Sternen träumt – individuell mit dem Namen Ihres Kindes gestaltet.
</p>
<p>
Im Gegensatz zu knalligen Kinderzimmer-Motiven schafft diese Aquarell-Illustration in sanften Cremetönen, warmem Beige und feinem Salbeigrün eine beruhigende, geborgene Atmosphäre. Ideal für Scandi-, Boho- und geschlechtsneutrale Babyzimmer.
</p>
<h3>🎨 Personalisierung & Raumdesign</h3>
<ul>
<li>Fügen Sie einfach den Wunschnamen Ihres Kindes bei der Bestellung hinzu</li>
<li>Perfekt als liebevolles Geschenk zur Geburt, Taufe oder zum 1. Geburtstag</li>
<li>Harmoniert perfekt mit natürlichen Holzmöbeln und Pastell-Textilien</li>
</ul>
<h3>🌿 Premium-Material: Vinyl auf Vliesbasis</h3>
<p>Unsere Kinderzimmertapeten sind speziell für Familien entwickelt:</p>
<ul>
<li><b>Waschbar & abwischbar:</b> leicht zu reinigen mit einem feuchten Tuch</li>
<li><b>Langlebig & lichtbeständig:</b> Farben bleiben über Jahre hinweg brillant</li>
<li><b>Ungiftig & allergiefrei:</b> Greenguard Gold zertifizierte Tinten auf Wasserbasis</li>
<li><b>Paste-the-Wall:</b> Kleister direkt auf die Wand auftragen</li>
<li><b>Einfache Montage:</b> nummerierte Bahnen für fehlerloses Anbringen</li>
<li><b>Formstabil:</b> hochwertige matte Oberfläche ohne Spiegelung</li>
</ul>
<h3>Musterdruck & Farbmuster — Perfekte Farbabstimmung</h3>
<p>
Um sicherzustellen, dass die Farben und die feine Struktur unseres Vlies-Materials perfekt zu Ihren Möbeln und Vorhängen passen, bieten wir einen gedruckten Musterdruck (60×40 cm) an. So prüfen Sie die Farbwirkung bei Tageslicht und Abendbeleuchtung direkt vor Ort.
</p>
<h3>Individuelle Motiv-Anpassung nach Wunsch</h3>
<p>
Wir passen die Platzierung des Bären und des Wunschnamens exakt an Ihre Raumsituation an. Steht ein Bettchen oder Schrank vor der Wand? Wir rücken das Motiv so, dass keine wichtigen Elemente verdeckt werden.
</p>
</div>
<!-- OTHER PRODUCTS SLIDER SECTION -->
<div class="other-products-section">
<div class="slider-header">
<h2>Weitere Tapeten aus unserer Kollektion</h2>
<div class="slider-arrows">
<div class="arrow-btn">‹</div>
<div class="arrow-btn">›</div>
</div>
</div>
<div class="products-grid">
<div class="prod-card">
<img src="https://alltowall.ru/upload/shop_5/7/8/6/item_7862/small_s491_interior.jpg" alt="Scandi Berge">
<div class="prod-card-body">
<div class="prod-card-title">Scandi Berge Tapete</div>
<div class="prod-card-price">34 € / m²</div>
</div>
</div>
<div class="prod-card">
<img src="https://alltowall.ru/upload/shop_5/6/0/6/item_6062/small_s159_int.jpg" alt="Heißluftballon">
<div class="prod-card-title">Heißluftballons & Wolken</div>
<div class="prod-card-price">34 € / m²</div>
</div>
<div class="prod-card">
<img src="https://alltowall.ru/upload/shop_5/6/7/0/item_6707/small_s359_int.jpg" alt="Aquarell Waldtiere">
<div class="prod-card-title">Aquarell Waldtiere</div>
<div class="prod-card-price">34 € / m²</div>
</div>
<div class="prod-card">
<img src="https://alltowall.ru/upload/shop_5/1/3/5/item_13529/small_s759_interior.jpg" alt="Weltkarte Kinder">
<div class="prod-card-title">Scandi Weltkarte Tiere</div>
<div class="prod-card-price">34 € / m²</div>
</div>
</div>
</div>
</div>
<!-- FOOTER -->
<footer>
<div class="container">
<div class="footer-grid">
<div>
<h3 style="font-weight:800; font-size:22px; margin-bottom:16px;">MoonBloom</h3>
<p style="font-size:13px; color:#9ca3af; line-height:1.6;">Hochwertige personalisierte Kindertapeten & Wandbilder für traumhafte Babyzimmer.</p>
</div>
<div class="footer-col">
<h4>Kategorien</h4>
<ul>
<li><a href="#">Kindertapeten Bär</a></li>
<li><a href="#">Weltkarte Babyzimmer</a></li>
<li><a href="#">Waldtiere Scandi</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Kundenservice</h4>
<ul>
<li><a href="#">Versand & Lieferung</a></li>
<li><a href="#">Muster bestellen</a></li>
<li><a href="#">Montageanleitung</a></li>
</ul>
</div>
<div class="footer-col">
<h4>Kontakt</h4>
<ul>
<li>+49 (0) 800 551-10-76</li>
<li>hello@moonbloomwalls.com</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div>© 2026 MoonBloom Walls. Alle Rechte vorbehalten.</div>
<div>Datenschutz | Impressum | AGB</div>
</div>
</div>
</footer>
<script>
const w = document.getElementById('w');
const h = document.getElementById('h');
const sq = document.getElementById('sq');
const tot = document.getElementById('tot');
const summary = document.getElementById('summary');
const matCards = document.querySelectorAll('.mat-card');
const mainImg = document.getElementById('mainImg');
const videoPreview = document.getElementById('videoPreview');
let pricePerM2 = 34;
let matName = 'PREMIUM VLIES';
function switchMedia(el, type, src) {
document.querySelectorAll('.thumb-img').forEach(t => t.classList.remove('active'));
el.classList.add('active');
if (type === 'img') {
videoPreview.style.display = 'none';
mainImg.style.display = 'block';
mainImg.src = src;
} else {
mainImg.style.display = 'none';
videoPreview.style.display = 'block';
}
}
function calc() {
let width = parseFloat(w.value) || 0;
let height = parseFloat(h.value) || 0;
let realSq = (width / 100) * (height / 100);
sq.textContent = realSq.toFixed(1);
let billableSq = Math.max(realSq, 3);
let total = Math.round(billableSq * pricePerM2);
let formatted = total.toLocaleString('de-DE') + ' €';
tot.textContent = formatted;
summary.innerHTML = `<b>Wand 1</b> — ${formatted} - ${matName}, ${width} x ${h.value} cm`;
}
matCards.forEach(c => {
c.addEventListener('click', () => {
matCards.forEach(card => card.classList.remove('active'));
c.classList.add('active');
pricePerM2 = parseInt(c.dataset.price);
matName = c.dataset.name;
calc();
});
});
w.addEventListener('input', calc);
h.addEventListener('input', calc);
calc();
</script>
</body>
</html>