<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>detailverliebt – Kunst, Mode & Design</title>
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<!-- PayPal SDK -->
<script src="https://www.paypal.com/sdk/js?client-id=YOUR_PAYPAL_CLIENT_ID¤cy=EUR"></script>
<style>
*{box-sizing:border-box}
body{margin:0;font-family:'Inter',sans-serif;background:#F5F0FF;color:#111}
header{padding:50px 20px 30px;text-align:center;border-bottom:1px solid #eee}
.logo{font-family:'Playfair Display',serif;font-size:36px;letter-spacing:6px;font-weight:600}
nav{margin-top:20px}
nav a{margin:0 18px;text-decoration:none;color:#666;font-size:14px;letter-spacing:1px}
nav a:hover{color:#000}
.hero{padding:140px 20px;text-align:center;max-width:900px;margin:auto;position:relative}
.hero img{width:100%;max-height:400px;object-fit:cover;border-radius:10px;margin-bottom:20px}
.hero h1{font-family:'Playfair Display',serif;font-size:46px;font-weight:400;margin-bottom:20px}
.hero p{color:#666;font-size:18px;line-height:1.6}
.gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;padding:60px 10%}
.gallery img{width:100%;border-radius:6px}
.shop-title{text-align:center;font-family:'Playfair Display',serif;font-size:32px;margin-top:40px}
.products{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:60px;padding:60px 10%}
.product{text-align:center}
.product img{width:100%;border-radius:6px;margin-bottom:15px}
.product h3{font-family:'Playfair Display',serif;margin:10px 0 6px;font-weight:500}
.price{color:#777;margin-bottom:15px}
.paypal-button{max-width:220px;margin:auto}
.about{max-width:750px;margin:auto;padding:100px 20px;text-align:center}
.about h2{font-family:'Playfair Display',serif;font-size:32px;margin-bottom:20px}
.about p{line-height:1.7;color:#555}
.about img{width:150px;border-radius:50%;margin-bottom:20px;display:block;margin-left:auto;margin-right:auto;}
.contact{text-align:center;padding:60px 20px 120px}
.contact h2{font-family:'Playfair Display',serif;font-size:28px}
footer{text-align:center;padding:40px;border-top:1px solid #eee;font-size:14px;color:#777}
</style>
</head>
<body>
<header>
<div class="logo">detailverliebt</div>
<nav>
<a href="#">Home</a>
<a href="#gallery">Galerie</a>
<a href="#shop">Shop</a>
<a href="#about">Über mich</a>
<a href="#contact">Kontakt</a>
</nav>
</header>
<section class="hero">
<img src="https://images.unsplash.com/photo-1586201375761-83865001b2b3?auto=format&fit=crop&w=1200&q=80" alt="Magnolien in Blüte">
<h1>Kunst, Mode & Design</h1>
<p>Minimalistische Kunstwerke und Designobjekte – inspiriert von Architektur, Struktur und präzisen Details.</p>
</section>
<section id="gallery" class="gallery">
<img src="https://via.placeholder.com/600x700" alt="Galerie Bild 1">
<img src="https://via.placeholder.com/600x700" alt="Galerie Bild 2">
<img src="https://via.placeholder.com/600x700" alt="Galerie Bild 3">
<img src="https://via.placeholder.com/600x700" alt="Galerie Bild 4">
</section>
<h2 id="shop" class="shop-title">Shop</h2>
<section class="products">
<div class="product">
<img src="https://via.placeholder.com/500" alt="Artwork">
<h3>Architectural Print 01</h3>
<div class="price">€35</div>
<div id="paypal-button-1" class="paypal-button"></div>
</div>
<div class="product">
<img src="https://via.placeholder.com/500" alt="Artwork">
<h3>Minimal Art Print 02</h3>
<div class="price">€45</div>
<div id="paypal-button-2" class="paypal-button"></div>
</div>
<div class="product">
<img src="https://via.placeholder.com/500" alt="Artwork">
<h3>Abstract Study 03</h3>
<div class="price">€55</div>
<div id="paypal-button-3" class="paypal-button"></div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1616474271127-7a614f2f63cb?auto=format&fit=crop&w=500&q=80" alt="Osterkarte 1">
<h3>Osterkarte Frühling 01</h3>
<div class="price">€5</div>
<div id="paypal-button-4" class="paypal-button"></div>
</div>
<div class="product">
<img src="https://images.unsplash.com/photo-1616474271165-d981d40d8d8b?auto=format&fit=crop&w=500&q=80" alt="Osterkarte 2">
<h3>Osterkarte Frühling 02</h3>
<div class="price">€5</div>
<div id="paypal-button-5" class="paypal-button"></div>
</div>
</section>
<section id="about" class="about">
<h2>Über mich</h2>
<img src="https://via.placeholder.com/200" alt="Foto von mir">
<p>Ich wurde in den 1970er Jahren geboren und lebe in Wien. Meine kreative Ausbildung begann an der Modeschule in Krems. Anschließend studierte ich Architektur an der Technischen Universität Wien und arbeite heute in einem Architekturbüro in der Stadt.</p>
<p>Neben meiner Arbeit verbinde ich Kunst, Design und Architektur in meinen eigenen Projekten. Unter dem Namen <strong>detailverliebt</strong> entstehen Werke mit besonderem Fokus auf Form, Material und präzise Details.</p>
<p>Sprachen: Deutsch & Englisch</p>
</section>
<section id="contact" class="contact">
<h2>Kontakt</h2>
<p>hello@detailverliebt.com</p>
<p>Wien · Österreich</p>
</section>
<footer>
© 2026 detailverliebt.com
</footer>
<script>
function initPayPalButtons(){
if(typeof paypal==='undefined'){console.error('PayPal SDK konnte nicht geladen werden.');return;}
paypal.Buttons({createOrder:function(d,a){return a.order.create({purchase_units:[{amount:{value:'35.00'}}]});}}).render('#paypal-button-1');
paypal.Buttons({createOrder:function(d,a){return a.order.create({purchase_units:[{amount:{value:'45.00'}}]});}}).render('#paypal-button-2');
paypal.Buttons({createOrder:function(d,a){return a.order.create({purchase_units:[{amount:{value:'55.00'}}]});}}).render('#paypal-button-3');
paypal.Buttons({createOrder:function(d,a){return a.order.create({purchase_units:[{amount:{value:'5.00'}}]});}}).render('#paypal-button-4');
paypal.Buttons({createOrder:function(d,a){return a.order.create({purchase_units:[{amount:{value:'5.00'}}]});}}).render('#paypal-button-5');
}
window.addEventListener('load',initPayPalButtons);
</script>
</body>
</html>