<!doctype html>

<head>

<title>Willkommen</title>

<style>

body {

box-sizing: border-box;

}

html, body {

scroll-behavior: smooth;

}

.font-display {

font-family: 'Exo 2', 'Arial Narrow', sans-serif;

}

.font-body {

font-family: 'Exo 2', 'Arial Narrow', sans-serif;

}

@keyframes fadeInUp {

from {

opacity: 0;

transform: translateY(30px);

}

to {

opacity: 1;

transform: translateY(0);

}

@keyframes scaleIn {

from {

opacity: 0;

transform: scale(0.9);

}

to {

opacity: 1;

transform: scale(1);

}

@keyframes float {

0%, 100% {

transform: translateY(0px);

}

50% {

transform: translateY(-10px);

}

.animate-fade-in-up {

animation: fadeInUp 0.8s ease-out forwards;

}

.animate-scale-in {

animation: scaleIn 0.6s ease-out forwards;

}

.animate-float {

animation: float 4s ease-in-out infinite;

}

.delay-100 { animation-delay: 0.1s; }

.delay-200 { animation-delay: 0.2s; }

.delay-300 { animation-delay: 0.3s; }

.delay-400 { animation-delay: 0.4s; }

.delay-500 { animation-delay: 0.5s; }

.gradient-text {

background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

}

.gallery-item {

position: relative;

overflow: hidden;

border-radius: 12px;

transition: transform 0.4s ease;

}

.gallery-item:hover {

transform: scale(1.05);

}

.gallery-overlay {

position: absolute;

inset: 0;

background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);

opacity: 0;

transition: opacity 0.4s ease;

display: flex;

align-items: flex-end;

padding: 1.5rem;

}

.gallery-item:hover .gallery-overlay {

opacity: 1;

}

</style>

</head>

<p class="font-display text-sm animate-fade-in-up" style="color: #ffffff; opacity: 0; animation-delay: 0.2s;">Mitglied im Kunstverein München</p>

</div>

<div class="flex items-center gap-8"><a href="#home" class="text-2xl font-medium transition-colors hover:opacity-70" style="color: #ffffff;">Home</a> <a href="#leistungen" class="text-2xl font-medium transition-colors hover:opacity-70" style="color: #ffffff;">Leistungen</a> <a href="#galerie" class="text-2xl font-medium transition-colors hover:opacity-70" style="color: #ffffff;">Galerie</a> <a href="#preise" class="text-2xl font-medium transition-colors hover:opacity-70" style="color: #ffffff;">Preise</a> <a href="#ueber-mich" class="text-2xl font-medium transition-colors hover:opacity-70" style="color: #ffffff;">Über mich</a> <a href="#kontakt" class="text-2xl font-medium transition-colors hover:opacity-70" style="color: #ffffff;">Kontakt</a>

</div>

</nav>

</svg><span class="text-sm font-medium" style="color: #1a1a2e;">Neu: entdecke unsere Möglichkeiten einer Auftragsarbeit.</span>

</div>

<h1 id="main-title" class="font-bold text-sm md:text-base lg:text-lg leading-tight mb-3 animate-fade-in-up delay-300 text-center whitespace-nowrap" style="font-family: 'Exo 2', 'Arial Narrow', sans-serif; color: #ffffff !important; opacity: 0;">Großformatige und handsignierte Unikate mieten oder <span id="kaufen-word" style="color: #ffffff !important;">kaufen</span></h1>

<p id="subtitle" class="text-lg md:text-xl mx-auto mb-10 leading-relaxed animate-fade-in-up delay-400 whitespace-nowrap" style="color: #000000 !important; opacity: 0;">Wir erschaffen digitale Erlebnisse, die begeistern und inspirieren. Entdecken Sie, wie wir Ihre Vision zum Leben erwecken.</p>

<p id="welcome-text" class="text-base mx-auto mb-12 animate-fade-in-up delay-500 whitespace-nowrap text-center" style="color: #000000 !important; opacity: 0;">Mit Leidenschaft und Präzision gestalte ich außergewöhnliche Projekte für kunstinteressierte Menschen.</p>

<div class="flex flex-col sm:flex-row items-center justify-center gap-4 animate-fade-in-up delay-500" style="opacity: 0;"><button id="cta-button" class="group relative px-8 py-4 rounded-full font-semibold text-white overflow-hidden transition-all duration-500 hover:shadow-2xl hover:scale-110 hover:-translate-y-1" style="background: linear-gradient(135deg, #1a1a2e 0%, #2d2d44 100%);"> <span class="relative z-10 transition-all duration-300 flex items-center gap-2"> Mehr erfahren zum Mietmodell

</svg></span>

<div class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-all duration-500" style="background: linear-gradient(135deg, #c9a87c 0%, #b8956d 100%);"></div></button> <a href="#galerie" class="group flex items-center gap-2 px-6 py-4 rounded-full font-medium transition-all duration-500 hover:gap-4 hover:scale-105" style="color: #1a1a2e;"> <span class="transition-all duration-300">Portfolio ansehen</span>

</svg></a>

</div>

</section>

<p class="font-display text-sm" style="color: #ffffff;">Mitglied im Kunstverein München</p>

</div>

<div class="flex items-center gap-8"><button id="back-to-home" class="text-2xl font-medium transition-colors hover:opacity-70" style="color: #ffffff; cursor: pointer;">← Zurück</button>

</div>

</nav>

<h1 class="font-display font-bold text-5xl md:text-6xl mb-4" style="color: #1a1a2e;">Unser Mietmodell</h1>

<p class="text-xl max-w-3xl mx-auto leading-relaxed" style="color: #6b6b7b;">Flexible Laufzeiten, erschwingliche Preise und die Möglichkeit, Kunst in Ihrem Raum zu erleben – ohne langfristige Verpflichtung.</p>

</div>

<h2 class="font-display font-bold text-3xl mb-8 text-center" style="color: #1a1a2e;">Warum Kunst mieten?</h2>

</svg>

</div>

<h3 class="font-display font-bold text-xl mb-3" style="color: #1a1a2e;">Geringe monatliche Kosten</h3>

<p style="color: #6b6b7b;">Genießen Sie großformatige Originale ohne hohe Anschaffungskosten. Ab nur 15€ pro Monat.</p>

</div>

</svg>

</div>

<h3 class="font-display font-bold text-xl mb-3" style="color: #1a1a2e;">Flexibilität</h3>

<p style="color: #6b6b7b;">Wechseln Sie Kunstwerke nach Belieben oder nutzen Sie die Kaufoption am Ende der Laufzeit.</p>

</div>

</svg>

</div>

<h3 class="font-display font-bold text-xl mb-3" style="color: #1a1a2e;">Rundum-Service</h3>

<p style="color: #6b6b7b;">Beratung, Lieferung und professionelle Montage – alles aus einer Hand.</p>

</div>

</div>

<h2 class="font-display font-bold text-3xl mb-8 text-center" style="color: #1a1a2e;">Unsere Mietoptionen</h2>

</svg>

</div>

<h3 class="font-display font-bold text-2xl mb-3" style="color: #1a1a2e;">Miete Standard</h3>

<p class="text-lg mb-4" style="color: #6b6b7b;">Ideal für langfristige Gestaltung Ihrer Räume mit Original-Kunstwerken.</p>

</svg>

<div>

<p class="font-semibold" style="color: #1a1a2e;">Laufzeit: 12, 24 oder 36 Monate</p>

<p class="text-sm" style="color: #6b6b7b;">Wählen Sie die für Sie passende Dauer</p>

</div>

</svg>

<div>

<p class="font-semibold" style="color: #1a1a2e;">Ab 15€ pro Monat</p>

<p class="text-sm" style="color: #6b6b7b;">Für Werke bis 120cm x 180cm</p>

</div>

</svg>

<div>

<p class="font-semibold" style="color: #1a1a2e;">Kaufoption</p>

<p class="text-sm" style="color: #6b6b7b;">Übernehmen Sie das Werk zum Vorzugspreis</p>

</div>

</svg>

<div>

<p class="font-semibold" style="color: #1a1a2e;">Austausch möglich</p>

<p class="text-sm" style="color: #6b6b7b;">Nach Ablauf können Sie ein neues Werk wählen</p>

</div>

</div><button class="px-6 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105" style="background: #1a1a2e; color: #ffffff;"> Jetzt anfragen </button>

</div>

</div>

</svg>

</div>

<h3 class="font-display font-bold text-2xl mb-3 text-white">Miete Flex</h3>

<p class="text-lg mb-4 text-gray-300">Perfekt für Events, Veranstaltungen oder temporäre Ausstellungen.</p>

</svg>

<div>

<p class="font-semibold text-white">Mindestlaufzeit: 24 Stunden</p>

<p class="text-sm text-gray-300">Kurzfristige Anmietung möglich</p>

</div>

</svg>

<div>

<p class="text-sm text-gray-300">Preise abhängig von Größe und Dauer</p>

</div>

</svg>

<div>

<p class="font-semibold text-white">Alle Formate verfügbar</p>

<p class="text-sm text-gray-300">Werke in allen Größen wählbar</p>

</div>

</svg>

<div>

<p class="font-semibold text-white">48h Vorlaufzeit</p>

<p class="text-sm text-gray-300">Schnelle Verfügbarkeit nach Absprache</p>

</div>

</div><button class="px-6 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105" style="background: #c9a87c; color: #ffffff;"> Jetzt anfragen </button>

</div>

</div>

<h2 class="font-display font-bold text-3xl mb-12 text-center" style="color: #1a1a2e;">So einfach funktioniert's</h2>

</div>

<h3 class="font-display font-bold text-lg mb-2" style="color: #1a1a2e;">Werk auswählen</h3>

<p class="text-sm" style="color: #6b6b7b;">Stöbern Sie in unserer Galerie und wählen Sie Ihr Lieblingswerk</p>

</div>

</div>

<h3 class="font-display font-bold text-lg mb-2" style="color: #1a1a2e;">Beratung</h3>

<p class="text-sm" style="color: #6b6b7b;">Wir beraten Sie zu Größe, Platzierung und Laufzeit</p>

</div>

</div>

<h3 class="font-display font-bold text-lg mb-2" style="color: #1a1a2e;">Lieferung & Montage</h3>

<p class="text-sm" style="color: #6b6b7b;">Wir liefern und montieren das Werk professionell bei Ihnen</p>

</div>

</div>

<h3 class="font-display font-bold text-lg mb-2" style="color: #1a1a2e;">Genießen</h3>

<p class="text-sm" style="color: #6b6b7b;">Erleben Sie Kunst in Ihrem Raum – flexibel und unkompliziert</p>

</div>

</div>

<h2 class="font-display font-bold text-3xl mb-4" style="color: #1a1a2e;">Bereit für Ihr erstes Kunstwerk?</h2>

<p class="text-lg mb-8 max-w-2xl mx-auto" style="color: #6b6b7b;">Lassen Sie uns gemeinsam das perfekte Werk für Ihre Räume finden. Kontaktieren Sie uns für eine unverbindliche Beratung.</p>

<div class="flex flex-col sm:flex-row gap-4 justify-center"><button class="px-8 py-4 rounded-full font-semibold transition-all duration-300 hover:scale-105" style="background: #1a1a2e; color: #ffffff;"> Jetzt Beratung vereinbaren </button> <button id="back-to-home-bottom" class="px-8 py-4 rounded-full font-semibold transition-all duration-300 hover:scale-105" style="background: transparent; border: 2px solid #1a1a2e; color: #1a1a2e;"> Zurück zur Startseite </button>

</div>

</section>

</div>

<div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 animate-fade-in-up" style="opacity: 0; animation-delay: 0.7s;"><span class="text-xs uppercase tracking-widest" style="color: #6b6b7b;">Scrollen</span>

</div>

</div>

<h2 class="font-display font-bold text-4xl md:text-5xl mb-4" style="color: #1a1a2e;">Meine Leistungen</h2>

</div>

</svg>

</div>

<h3 class="font-display font-bold text-2xl mb-3" style="color: #1a1a2e;">Kunstwerke Mieten</h3>

<p class="leading-relaxed mb-3" style="color: #6b6b7b;">Mieten Sie großformatige Unikate für 12, 24 oder 36 Monate im Standard mit anschließender Kaufoptions-Möglichkeit.</p>

<p class="leading-relaxed text-left" style="color: #6b6b7b;">Kurzfrist-Mieten ab 1 Tag sind nach vorheriger Absprache ebenfalls möglich.</p>

</div>

</svg>

</div>

<h3 class="font-display font-bold text-2xl mb-3" style="color: #1a1a2e;">Kunstwerke Kaufen</h3>

<p class="leading-relaxed" style="color: #6b6b7b;">Erwerben Sie handsignierte Unikate zu erschwinglichen Preisen.</p>

</div>

</svg>

</div>

<h3 class="font-display font-bold text-2xl mb-3" style="color: #1a1a2e;">Beratung</h3>

<p class="leading-relaxed mb-3 text-left" style="color: #6b6b7b;">Individuelle Beratung vom Entwurf des Bildes über die Proportion des Unikats bis hin zur Lieferung und Montage.</p>

<p class="leading-relaxed mb-3 text-left" style="color: #6b6b7b;">Auch Auftragsarbeiten sind im Rahmen meiner Stilrichtung möglich.</p>

<p class="leading-relaxed text-left" style="color: #6b6b7b;">Lassen Sie uns gerne darüber sprechen.</p>

</div>

</svg>

</div>

<h3 class="font-display font-bold text-2xl mb-3" style="color: #1a1a2e;">Lieferung und Installation</h3>

<p class="leading-relaxed mb-3 text-left" style="color: #6b6b7b;">Auf Wunsch und nach vorheriger Vereinbarung übernehmen wir den professionellen Transport für Sie.</p>

<p class="leading-relaxed text-left" style="color: #6b6b7b;">Die fachgerechte Montage vor Ort kann ebenfalls nach Absprache als Serviceleistung angeboten werden.</p>

</div>

</section>

<h2 class="font-display font-bold text-4xl md:text-5xl mb-4" style="color: #1a1a2e;">Galerie</h2>

<p class="text-lg max-w-2xl mx-auto" style="color: #1a1a2e;">Eine Auswahl meiner großformatigen, handsignierten Unikate</p>

</div>

<div>

<h3 class="font-display font-bold text-xl text-white mb-2">Shell</h3>

<p class="text-sm text-gray-300">170 × 130 cm • Acryl auf Keilrahmen mit Leinwand</p>

</div>

</div>

<div>

<h3 class="font-display font-bold text-xl text-white mb-2">Interconnected</h3>

<p class="text-sm text-gray-300">170 × 255 cm • Acryl auf Keilrahmen mit Leinwand</p>

</div>

</div>

<div>

<h3 class="font-display font-bold text-xl text-white mb-2">Block Mountain</h3>

<p class="text-sm text-gray-300">155 × 140 cm • Acryl auf Keilrahmen mit Leinwand</p>

</div>

</div>

<div>

<h3 class="font-display font-bold text-xl text-white mb-2">Bright Feathers</h3>

<p class="text-sm text-gray-300">200 × 150 cm • Acryl auf Keilrahmen mit Leinwand</p>

</div>

</div>

<div>

<h3 class="font-display font-bold text-xl text-white mb-2">Labyrinth</h3>

<p class="text-sm text-gray-300">150 × 170 cm • Acryl auf Keilrahmen mit Leinwand</p>

</div>

</div>

<div>

<h3 class="font-display font-bold text-xl text-white mb-2">Flatterig Banners</h3>

<p class="text-sm text-gray-300">120 × 180 cm • Acryl auf Keilrahmen mit Leinwand</p>

</div>

</section>

<h2 class="font-display font-bold text-4xl md:text-5xl mb-4" style="color: #1a1a2e;">Preise</h2>

<p class="text-lg max-w-2xl mx-auto" style="color: #1a1a2e;">Transparente Preisgestaltung für Miete und Kauf</p>

</div>

Beliebt

</div>

<h3 class="font-display font-bold text-2xl mb-2" style="color: #1a1a2e;">Miete Standard</h3>

€15<span class="text-xl font-normal">/Monat</span>

</div>

</svg><span style="color: #6b6b7b;">Mindestlaufzeit 12 Monate</span></li>

</svg><span style="color: #6b6b7b;">Werke bis 120cm x 180cm</span></li>

</svg><span style="color: #6b6b7b;">Kaufübernahme-Option</span></li>

</ul><a href="#kontakt" class="block w-full py-3 px-6 rounded-full font-semibold transition-all duration-300 hover:scale-105 text-center" style="background: #f3f4f6; color: #1a1a2e;"> Anfragen </a>

</div>

<h3 class="font-display font-bold text-2xl mb-2 text-white">Miete Flex</h3>

€11<span class="text-xl font-normal text-gray-300">/Tag</span>

</div>

</svg><span class="text-gray-300">Mindestlaufzeit 24 Stunden</span></li>

</svg><span class="text-gray-300">Werke aller Größen</span></li>

</svg><span class="text-gray-300">Vorlaufzeit 48 Stunden</span></li>

</ul><a href="#kontakt" class="block w-full py-3 px-6 rounded-full font-semibold transition-all duration-300 hover:scale-105 text-center" style="background: #c9a87c; color: #ffffff;"> Anfragen </a>

</div>

ab €490<span class="text-xl font-normal">/120cm x 180cm</span>

</div>

</svg><span style="color: #6b6b7b;">Handsignierte Originale</span></li>

</svg><span style="color: #6b6b7b;">Werke bis 150cm x 250cm möglich</span></li>

</svg><span style="color: #6b6b7b;">Echtheitszertifikat</span></li>

</ul><a href="#kontakt" class="block w-full py-3 px-6 rounded-full font-semibold transition-all duration-300 hover:scale-105 text-center" style="background: #f3f4f6; color: #1a1a2e;"> Anfragen </a>

</div>

<h3 class="font-display font-bold text-2xl mb-4" style="color: #1a1a2e;">Kunstwerke kaufen</h3>

<p class="mb-6 max-w-2xl mx-auto" style="color: #1a1a2e;">Alle Werke sind auch zum Kauf erhältlich. Preise auf Anfrage, abhängig von Format und Technik. Jedes Werk wird mit Echtheitszertifikat geliefert.</p><a href="#kontakt" class="inline-block px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105" style="background: #1a1a2e; color: #ffffff;"> Kontakt aufnehmen </a>

</div>

</section>

</div>

</div>

<p class="font-display font-bold text-2xl mt-6 text-center" style="color: #1a1a2e;">Bernhard Schuller</p>

</div>

<div>

<h3 class="font-display font-bold text-2xl mb-6" style="color: #1a1a2e;">Leidenschaft für großformatige Kunst</h3>

<p>Beeinflusst durch die Werke der Künstler Piet Mondrian, Victor Vasarely, Josef Albers, Frank Stella und Bridget Riley verleihe ich meiner Kreativität mit Hilfe von Acryl auf Keilrahmen Ausdruck.</p>

<p>Seit 2007 bringe ich zeitgenössische Kunst in private und geschäftliche Räume. Meine Mission ist es, hochwertige Originale für jeden zugänglich zu machen - sei es durch flexible Mietmodelle oder durch den direkten Erwerb einzigartiger Werke.</p>

<p>Mit BOOK A PICTURE verbinde ich meine Leidenschaft zur Kunst mit innovativen Konzepten die es jedem ermöglichen, Kunst zu erleben - ohne Kompromisse bei Qualität und Authentizität.</p>

</div>

</section>

<h2 class="font-display font-bold text-4xl md:text-5xl mb-4" style="color: #1a1a2e;">Kontakt</h2>

<p class="text-lg max-w-2xl mx-auto whitespace-nowrap" style="color: #1a1a2e;">Haben Sie Fragen oder möchten Sie ein Werk besichtigen? Ich freue mich auf Ihre Nachricht!</p>

</div>

<h3 class="font-display font-bold text-2xl mb-6" style="color: #1a1a2e;">Nachricht senden</h3>

</div>

</div>

<div><label for="phone" class="block text-sm font-semibold mb-2" style="color: #1a1a2e;">Telefon</label> <input type="tel" id="phone" name="phone" class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-300 focus:outline-none" style="border-color: #e5e7eb; background: #faf8f5;" onfocus="this.style.borderColor='#c9a87c'" onblur="this.style.borderColor='#e5e7eb'">

</div>

<div><label for="subject" class="block text-sm font-semibold mb-2" style="color: #1a1a2e;">Betreff *</label> <select id="subject" name="subject" required class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-300 focus:outline-none" style="border-color: #e5e7eb; background: #faf8f5;" onfocus="this.style.borderColor='#c9a87c'" onblur="this.style.borderColor='#e5e7eb'"> <option value="">Bitte wählen...</option> <option value="miete">Kunstwerk mieten</option> <option value="kauf">Kunstwerk kaufen</option> <option value="beratung">Beratungstermin</option> <option value="auftrag">Auftragsarbeit</option> <option value="sonstiges">Sonstiges</option> </select>

</div>

<div><label for="message" class="block text-sm font-semibold mb-2" style="color: #1a1a2e;">Nachricht *</label> <textarea id="message" name="message" required rows="5" class="w-full px-4 py-3 rounded-lg border-2 transition-all duration-300 focus:outline-none resize-none" style="border-color: #e5e7eb; background: #faf8f5;" onfocus="this.style.borderColor='#c9a87c'" onblur="this.style.borderColor='#e5e7eb'"></textarea>

</div>

<div id="form-message" class="hidden p-4 rounded-lg text-sm font-medium"></div><button type="submit" id="submit-btn" class="w-full py-4 rounded-full font-semibold transition-all duration-300 hover:scale-105" style="background: #1a1a2e; color: #ffffff;"> Nachricht senden </button>

</form>

</div>

<h3 class="font-display font-bold text-2xl mb-6" style="color: #1a1a2e;">Kontaktinformationen</h3>

</svg>

</div>

<div>

<p class="font-semibold mb-1" style="color: #1a1a2e;">Telefon</p><a href="tel:+4915168160066" class="text-lg transition-colors hover:opacity-70" style="color: #6b6b7b;">+49 (0) 151 68160066</a>

</div>

</svg>

</div>

<div>

<p class="font-semibold mb-1" style="color: #1a1a2e;">E-Mail</p><a href="mailto:info@bookapicture.de" class="text-lg transition-colors hover:opacity-70" style="color: #6b6b7b;">info@bookapicture.de</a>

</div>

</svg>

</div>

<div>

<p class="font-semibold mb-1" style="color: #1a1a2e;">Adresse</p>

<p class="text-lg" style="color: #6b6b7b;">Dompfaffweg 1A<br>

85591 Vaterstetten</p>

</div>

<h3 class="font-display font-bold text-2xl mb-4 text-white">Öffnungszeiten</h3>

<div class="flex justify-between"><span>Montag - Freitag</span> <span class="font-semibold">09:00 - 18:00 Uhr</span>

</div>

<div class="flex justify-between"><span>Samstag</span> <span class="font-semibold">Nach Vereinbarung</span>

</div>

<div class="flex justify-between"><span>Sonntag</span> <span class="font-semibold">Geschlossen</span>

</div>

</section>

<p class="mb-6" style="color: #ffffff;">Großformatige, handsignierte Kunstwerke zum Mieten und Kaufen</p>

<div class="flex justify-center gap-6 mb-6"><a href="#home" class="transition-colors hover:opacity-70" style="color: #c9a87c;">Home</a> <a href="#leistungen" class="transition-colors hover:opacity-70" style="color: #c9a87c;">Leistungen</a> <a href="#galerie" class="transition-colors hover:opacity-70" style="color: #c9a87c;">Galerie</a> <a href="#preise" class="transition-colors hover:opacity-70" style="color: #c9a87c;">Preise</a> <a href="#ueber-mich" class="transition-colors hover:opacity-70" style="color: #c9a87c;">Über mich</a> <a href="#kontakt" class="transition-colors hover:opacity-70" style="color: #c9a87c;">Kontakt</a> <a href="#impressum" class="impressum-link transition-colors hover:opacity-70" style="color: #c9a87c; cursor: pointer;">Impressum</a>

</div>

</footer>

</svg></button>

<h2 class="font-display font-bold text-4xl mb-8" style="color: #1a1a2e;">Impressum</h2>

<div>

<h3 class="font-display font-bold text-xl mb-2" style="color: #1a1a2e;">Angaben gemäß § 5 TMG</h3>

<p>Bernhard Schuller<br>

Dompfaffweg 1A<br>

85591 Vaterstetten</p>

</div>

<div>

<h3 class="font-display font-bold text-xl mb-2" style="color: #1a1a2e;">Kontakt</h3>

<p>Telefon: +49 (0) 151 68160066<br>

E-Mail: info@bookapicture.de</p>

</div>

<div>

<h3 class="font-display font-bold text-xl mb-2" style="color: #1a1a2e;">Umsatzsteuer-ID</h3>

<p>Umsatzsteuer-Identifikationsnummer gemäß § 27 a Umsatzsteuergesetz:<br>

Wird nicht erteilt, da Kleinunternehmer gemäß § 19 UStG</p>

</div>

<div>

<h3 class="font-display font-bold text-xl mb-2" style="color: #1a1a2e;">Verantwortlich für den Inhalt nach § 55 Abs. 2 RStV</h3>

<p>Bernhard Schuller<br>

Dompfaffweg 1A<br>

85591 Vaterstetten</p>

</div>

<div>

<h3 class="font-display font-bold text-xl mb-2" style="color: #1a1a2e;">Haftungsausschluss</h3>

<p class="mb-4"><strong>Haftung für Inhalte</strong><br>

Als Diensteanbieter sind wir gemäß § 7 Abs.1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>

<p class="mb-4"><strong>Haftung für Links</strong><br>

Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich.</p>

<p><strong>Urheberrecht</strong><br>

Die durch den Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht.<br>

Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechts bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers.<br>

Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.<br>

Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet.<br>

Sollten Sie trotzdem auf eine Urheberrechtsverletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis.<br>

Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p>

</div>

</div><button id="close-impressum-btn" class="mt-8 px-8 py-3 rounded-full font-semibold transition-all duration-300 hover:scale-105" style="background: #1a1a2e; color: #ffffff;"> Schließen </button>

</div>

const defaultConfig = {

main_title: 'Großformatige und handsignierte Unikate mieten oder kaufen',

subtitle: 'Zeitgenössische Kunst als Original mieten oder kaufen - zu erschwinglichen Preisen.',

welcome_text: 'Mit Leidenschaft und Präzision gestalte ich außergewöhnliche Projekte für kunstinteressierte Menschen.',

button_text: 'Mehr erfahren zum Mietmodell',

background_color: '#faf8f5',

surface_color: '#ffffff',

text_color: '#1a1a2e',

primary_action_color: '#1a1a2e',

secondary_action_color: '#c9a87c',

font_family: 'Exo 2',

font_size: 16

};

async function onConfigChange(config) {

const mainTitle = document.getElementById('main-title');

const subtitle = document.getElementById('subtitle');

const welcomeText = document.getElementById('welcome-text');

const ctaButton = document.getElementById('cta-button');

// Update text content

const titleText = config.main_title || defaultConfig.main_title;

const words = titleText.split(' ');

const lastWord = words[words.length - 1];

const restOfTitle = words.slice(0, -1).join(' ');

mainTitle.innerHTML = `${restOfTitle} <span id="kaufen-word" style="color: #ffffff !important;">${lastWord}</span>`;

subtitle.textContent = config.subtitle || defaultConfig.subtitle;

welcomeText.textContent = config.welcome_text || defaultConfig.welcome_text;

ctaButton.querySelector('span').textContent = config.button_text || defaultConfig.button_text;

// Update colors

const textColor = config.text_color || defaultConfig.text_color;

const primaryColor = config.primary_action_color || defaultConfig.primary_action_color;

const secondaryColor = config.secondary_action_color || defaultConfig.secondary_action_color;

mainTitle.style.color = '#ffffff';

mainTitle.style.setProperty('color', '#ffffff', 'important');

subtitle.style.setProperty('color', '#000000', 'important');

welcomeText.style.setProperty('color', '#000000', 'important');

ctaButton.style.background = `linear-gradient(135deg, ${primaryColor} 0%, ${adjustColor(primaryColor, 10)} 100%)`;

document.querySelectorAll('[style*="color: #c9a87c"]').forEach(el => {

el.style.color = secondaryColor;

});

// Update fonts

const fontFamily = config.font_family || defaultConfig.font_family;

const fontSize = config.font_size || defaultConfig.font_size;

document.querySelectorAll('.font-display').forEach(el => {

el.style.fontFamily = `${fontFamily}, 'Arial Narrow', sans-serif`;

});

document.querySelectorAll('.font-body').forEach(el => {

el.style.fontFamily = `${fontFamily}, 'Arial Narrow', sans-serif`;

});

mainTitle.style.fontSize = `${fontSize * 2}px`;

subtitle.style.fontSize = `${fontSize * 1.25}px`;

}

function adjustColor(hex, percent) {

const num = parseInt(hex.replace('#', ''), 16);

const amt = Math.round(2.55 * percent);

const R = Math.min(255, Math.max(0, (num >> 16) + amt));

const G = Math.min(255, Math.max(0, ((num >> 8) & 0x00FF) + amt));

const B = Math.min(255, Math.max(0, (num & 0x0000FF) + amt));

return '#' + (0x1000000 + R * 0x10000 + G * 0x100 + B).toString(16).slice(1);

}

function mapToCapabilities(config) {

return {

recolorables: [

{

get: () => config.background_color || defaultConfig.background_color,

set: (value) => { config.background_color = value; window.elementSdk.setConfig({ background_color: value }); }

{

get: () => config.surface_color || defaultConfig.surface_color,

set: (value) => { config.surface_color = value; window.elementSdk.setConfig({ surface_color: value }); }

{

get: () => config.text_color || defaultConfig.text_color,

set: (value) => { config.text_color = value; window.elementSdk.setConfig({ text_color: value }); }

{

get: () => config.primary_action_color || defaultConfig.primary_action_color,

set: (value) => { config.primary_action_color = value; window.elementSdk.setConfig({ primary_action_color: value }); }

{

get: () => config.secondary_action_color || defaultConfig.secondary_action_color,

set: (value) => { config.secondary_action_color = value; window.elementSdk.setConfig({ secondary_action_color: value }); }

}

borderables: [],

fontEditable: {

get: () => config.font_family || defaultConfig.font_family,

set: (value) => { config.font_family = value; window.elementSdk.setConfig({ font_family: value }); }

fontSizeable: {

get: () => config.font_size || defaultConfig.font_size,

set: (value) => { config.font_size = value; window.elementSdk.setConfig({ font_size: value }); }

}

};

}

function mapToEditPanelValues(config) {

return new Map([

['main_title', config.main_title || defaultConfig.main_title],

['subtitle', config.subtitle || defaultConfig.subtitle],

['welcome_text', config.welcome_text || defaultConfig.welcome_text],

['button_text', config.button_text || defaultConfig.button_text]

]);

}

if (window.elementSdk) {

window.elementSdk.init({

defaultConfig,

onConfigChange,

mapToCapabilities,

mapToEditPanelValues

});

}

// Page Navigation

const homePage = document.querySelector('.home-page');

const mietmodellPage = document.getElementById('mietmodell-page');

const ctaButton = document.getElementById('cta-button');

const backToHomeButton = document.getElementById('back-to-home');

const backToHomeBottomButton = document.getElementById('back-to-home-bottom');

const navSection = document.querySelector('nav');

const leistungenSection = document.getElementById('leistungen');

const galerieSection = document.getElementById('galerie');

const preiseSection = document.getElementById('preise');

const ueberMichSection = document.getElementById('ueber-mich');

const footerSection = document.querySelector('footer');

const scrollIndicator = document.querySelector('.absolute.bottom-8');

function showMietmodellPage() {

// Hide home page sections

homePage.style.display = 'none';

navSection.style.display = 'none';

leistungenSection.style.display = 'none';

galerieSection.style.display = 'none';

preiseSection.style.display = 'none';

ueberMichSection.style.display = 'none';

footerSection.style.display = 'none';

if (scrollIndicator) scrollIndicator.style.display = 'none';

// Show mietmodell page

mietmodellPage.style.display = 'block';

// Scroll to top

window.scrollTo(0, 0);

}

function showHomePage() {

// Show home page sections

homePage.style.display = 'flex';

navSection.style.display = 'flex';

leistungenSection.style.display = 'block';

galerieSection.style.display = 'block';

preiseSection.style.display = 'block';

ueberMichSection.style.display = 'block';

footerSection.style.display = 'block';

if (scrollIndicator) scrollIndicator.style.display = 'flex';

// Hide mietmodell page

mietmodellPage.style.display = 'none';

// Scroll to top

window.scrollTo(0, 0);

}

ctaButton.addEventListener('click', showMietmodellPage);

backToHomeButton.addEventListener('click', showHomePage);

backToHomeBottomButton.addEventListener('click', showHomePage);

// Impressum Modal Functionality

const impressumModal = document.getElementById('impressum-modal');

const impressumLink = document.querySelector('.impressum-link');

const closeImpressum = document.getElementById('close-impressum');

const closeImpressumBtn = document.getElementById('close-impressum-btn');

function openImpressum(e) {

e.preventDefault();

impressumModal.style.display = 'flex';

document.body.style.overflow = 'hidden';

}

function closeImpressumModal() {

impressumModal.style.display = 'none';

document.body.style.overflow = 'auto';

}

impressumLink.addEventListener('click', openImpressum);

closeImpressum.addEventListener('click', closeImpressumModal);

closeImpressumBtn.addEventListener('click', closeImpressumModal);

// Close modal when clicking outside

impressumModal.addEventListener('click', function(e) {

if (e.target === impressumModal) {

closeImpressumModal();

}

});

// Close modal with Escape key

document.addEventListener('keydown', function(e) {

if (e.key === 'Escape' && impressumModal.style.display === 'flex') {

closeImpressumModal();

}

});

// Contact Form Handler

const contactForm = document.getElementById('contact-form');

const formMessage = document.getElementById('form-message');

const submitBtn = document.getElementById('submit-btn');

contactForm.addEventListener('submit', async function(e) {

e.preventDefault();

// Show loading state

submitBtn.disabled = true;

submitBtn.style.opacity = '0.6';

submitBtn.textContent = 'Wird gesendet...';

// Get form values

const formData = new FormData();

formData.append('name', document.getElementById('name').value);

formData.append('email', document.getElementById('email').value);

formData.append('phone', document.getElementById('phone').value);

formData.append('subject', document.getElementById('subject').value);

formData.append('message', document.getElementById('message').value);

try {

// Send form data to PHP script

const response = await fetch('send-email.php', {

method: 'POST',

body: formData

});

const result = await response.json();

if (result.success) {

// Show success message

formMessage.className = 'p-4 rounded-lg text-sm font-medium';

formMessage.style.background = 'rgba(201, 168, 124, 0.15)';

formMessage.style.color = '#1a1a2e';

formMessage.textContent = '✓ Vielen Dank für Ihre Nachricht! Ich werde mich so schnell wie möglich bei Ihnen melden.';

// Reset form

contactForm.reset();

} else {

// Show error message

formMessage.className = 'p-4 rounded-lg text-sm font-medium';

formMessage.style.background = 'rgba(220, 38, 38, 0.15)';

formMessage.style.color = '#991b1b';

formMessage.textContent = '✗ Es gab ein Problem beim Senden Ihrer Nachricht. Bitte versuchen Sie es erneut oder kontaktieren Sie uns direkt per E-Mail.';

}

// Reset button

submitBtn.disabled = false;

submitBtn.style.opacity = '1';

submitBtn.textContent = 'Nachricht senden';

// Hide message after 8 seconds

setTimeout(() => {

formMessage.className = 'hidden p-4 rounded-lg text-sm font-medium';

}, 8000);

} catch (error) {

// Show error message

formMessage.className = 'p-4 rounded-lg text-sm font-medium';

formMessage.style.background = 'rgba(220, 38, 38, 0.15)';

formMessage.style.color = '#991b1b';

formMessage.textContent = '✗ Es gab ein Problem beim Senden Ihrer Nachricht. Bitte versuchen Sie es erneut oder kontaktieren Sie uns direkt per E-Mail.';

// Reset button

submitBtn.disabled = false;

submitBtn.style.opacity = '1';

submitBtn.textContent = 'Nachricht senden';

// Hide message after 8 seconds

setTimeout(() => {

formMessage.className = 'hidden p-4 rounded-lg text-sm font-medium';

}, 8000);

}

});

</script>

</html>