+
+
+
+
+ {{ range $i, $img := . }}
+
+ 
+
+ {{ end }}
+
+
+
+
+
+ ![]()
+
{{ end }}
diff --git a/static/css/style.css b/static/css/style.css
index b186431..66cadcc 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -12,11 +12,6 @@
--radius: 8px;
--max-width: 1100px;
--nav-height: 64px;
-
- /* ===== SCHALTER: Hintergrund hinter "Herzlich Willkommen" =====
- Genau EINE der beiden Zeilen aktiv lassen, die andere auskommentieren: */
- /* --welcome-bg: url('/images/haus/Wolframm-Fewo-Kaufbeuren-Ferienwohnung-Ferienwohnungen-Wohnungen-mieten-87600-allgaeu-Titel.jpg'); */ /* Biene */
- --welcome-bg: url('/images/background-flowers.jpg'); /* Blumen */
}
@media (prefers-color-scheme: dark) {
@@ -166,30 +161,24 @@ img { max-width: 100%; height: auto; display: block; }
/* ===== Willkommen ===== */
.welcome {
- background-image: var(--welcome-bg);
- background-size: cover;
- background-position: center;
- background-repeat: no-repeat;
+ background: var(--bg-alt);
padding: 5rem 1.5rem;
text-align: center;
}
.welcome-inner {
max-width: 720px;
margin: 0 auto;
- background: rgba(255,255,255,0.80);
- padding: 2.5rem 2rem;
- border-radius: var(--radius);
- color: #333;
+ color: var(--text);
}
.welcome h1 {
- color: #e08309;
+ color: var(--primary);
font-size: 2.6rem;
line-height: 1.15;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 0.25rem;
}
-.welcome-sub { font-size: 1.3rem; font-weight: 600; color: #333; margin-bottom: 1.5rem; }
+.welcome-sub { font-size: 1.3rem; font-weight: 600; color: var(--text); margin-bottom: 1.5rem; }
.welcome-text { font-size: 1.05rem; line-height: 1.7; }
.welcome-text p { margin-bottom: 1rem; }
.welcome-cta { margin-top: 1.5rem; }
@@ -398,21 +387,72 @@ img { max-width: 100%; height: auto; display: block; }
.slider--single .slider-slide { height: 280px; }
}
-/* ===== Galerie ===== */
-.galerie {
- display: grid;
- grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
- gap: 0.75rem;
- margin-bottom: 2rem;
+/* FeWo-Galerie: 4 Bilder nebeneinander, Klick öffnet Lightbox */
+.slider--quad { margin-bottom: 2rem; }
+.slider--quad .slider-slide {
+ flex: 0 0 calc((100% - 3 * 0.75rem) / 4);
+ width: calc((100% - 3 * 0.75rem) / 4);
+ height: 200px;
}
-.galerie-img {
- width: 100%;
- height: 160px;
- object-fit: cover;
- border-radius: var(--radius);
- transition: opacity 0.2s;
+@media (max-width: 900px) {
+ .slider--quad .slider-slide {
+ flex-basis: calc((100% - 0.75rem) / 2);
+ width: calc((100% - 0.75rem) / 2);
+ height: 180px;
+ }
+}
+@media (max-width: 480px) {
+ .slider--quad .slider-slide { flex-basis: 100%; width: 100%; height: 220px; }
+}
+
+/* Lightbox */
+.lightbox {
+ position: fixed;
+ inset: 0;
+ z-index: 1000;
+ background: rgba(0,0,0,0.92);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.lightbox[hidden] { display: none; }
+.lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius); }
+.lightbox-close {
+ position: absolute;
+ top: 1rem;
+ right: 1.25rem;
+ background: none;
+ border: none;
+ color: #fff;
+ font-size: 2.25rem;
+ line-height: 1;
+ cursor: pointer;
+}
+.lightbox-close:hover { color: var(--primary); }
+.lightbox-arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ border: none;
+ background: rgba(255,255,255,0.15);
+ color: #fff;
+ font-size: 1.25rem;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+.lightbox-arrow:hover { background: var(--primary); }
+.lightbox-prev { left: 1rem; }
+.lightbox-next { right: 1rem; }
+@media (max-width: 600px) {
+ .lightbox-arrow { width: 2.5rem; height: 2.5rem; }
+ .lightbox-prev { left: 0.5rem; }
+ .lightbox-next { right: 0.5rem; }
}
-.galerie-link:hover .galerie-img { opacity: 0.85; }
/* ===== Buchung ===== */
.buchung {
diff --git a/static/js/main.js b/static/js/main.js
index 034c56e..a1880ba 100644
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -25,3 +25,43 @@ document.querySelectorAll('.slider').forEach(slider => {
if (prev) prev.addEventListener('click', () => track.scrollBy({ left: -step(), behavior: 'smooth' }));
if (next) next.addEventListener('click', () => track.scrollBy({ left: step(), behavior: 'smooth' }));
});
+
+// Lightbox für Bildergalerien (Ferienwohnungen)
+const lightboxGallery = document.querySelector('.lightbox-gallery');
+const lightbox = document.querySelector('.lightbox');
+if (lightboxGallery && lightbox) {
+ const triggers = Array.from(lightboxGallery.querySelectorAll('.lightbox-trigger'));
+ const images = triggers.map(a => ({ src: a.href, alt: a.querySelector('img').alt }));
+ const imgEl = lightbox.querySelector('.lightbox-img');
+ const closeBtn = lightbox.querySelector('.lightbox-close');
+ const prevBtn = lightbox.querySelector('.lightbox-prev');
+ const nextBtn = lightbox.querySelector('.lightbox-next');
+ let current = 0;
+
+ const show = i => {
+ current = (i + images.length) % images.length;
+ imgEl.src = images[current].src;
+ imgEl.alt = images[current].alt;
+ };
+ const open = i => {
+ show(i);
+ lightbox.hidden = false;
+ document.body.style.overflow = 'hidden';
+ };
+ const close = () => {
+ lightbox.hidden = true;
+ document.body.style.overflow = '';
+ };
+
+ triggers.forEach((a, i) => a.addEventListener('click', e => { e.preventDefault(); open(i); }));
+ closeBtn.addEventListener('click', close);
+ prevBtn.addEventListener('click', () => show(current - 1));
+ nextBtn.addEventListener('click', () => show(current + 1));
+ lightbox.addEventListener('click', e => { if (e.target === lightbox) close(); });
+ document.addEventListener('keydown', e => {
+ if (lightbox.hidden) return;
+ if (e.key === 'Escape') close();
+ if (e.key === 'ArrowLeft') show(current - 1);
+ if (e.key === 'ArrowRight') show(current + 1);
+ });
+}