.edel­fuchs-wrapper { width: 100%; margin: 0; padding: 0; posi­tion: rela­tive; } .edel­fuchs-carousel { posi­tion: rela­tive; width: 100%; over­flow: hidden; back­ground: #000; } .edel­fuchs-container { posi­tion: rela­tive; width: 100%; /* 100vh minus your header height */ height: calc(100vh – 180px); /* Adjust 180px to your header height */ over­flow: hidden; } /* For when header is scrolled (smaller) – optional enhance­ment */ body.header-scrolled .edel­fuchs-container { height: calc(100vh – 120px); /* Adjust 120px to your scrolled header height */ } .edel­fuchs-track { display: flex; posi­tion: abso­lute; top: 0; left: 0; width: 100%; height: 100%; tran­si­tion: trans­form 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .edel­fuchs-slide { min-width: 100%; height: 100%; posi­tion: rela­tive; opacity: 0; tran­si­tion: opacity 0.6s ease; } .edelfuchs-slide.active { opacity: 1; } .edel­fuchs-slide img { width: 100%; height: 100%; object-fit: cover; object-posi­tion: center; display: block; } /* Image Overlay for Better Text Contrast */ .edelfuchs-slide::after { content: ''; posi­tion: abso­lute; bottom: 0; left: 0; right: 0; height: 50%; back­ground: linear-gradient(to top, rgba(0,0,0,0.5), trans­pa­rent); pointer-events: none; } /* Optional Caption Styling */ .edel­fuchs-caption { posi­tion: abso­lute; bottom: 60px; left: 60px; right: 60px; color: white !important; z‑index: 2; text-shadow: 0 2px 8px rgba(0,0,0,0.5); max-width: 800px; } .edel­fuchs-caption h3 { font-size: 48px; font-weight: 600; margin: 0 0 12px 0; font-family: 'Georgia', serif; line-height: 1.2; color: white !important; } .edel­fuchs-caption p { font-size: 22px; margin: 0; opacity: 0.95; line-height: 1.4; color: white !important; } /* Navi­ga­tion Arrows */ .edel­fuchs-carousel .edel­fuchs-nav { posi­tion: abso­lute; top: 50%; trans­form: translateY(-50%); back­ground: rgba(139, 90, 43, 0.85); color: white; border: none; width: 60px; height: 60px; border-radius: 50%; cursor: pointer; font-size: 28px; display: flex; align-items: center; justify-content: center; tran­si­tion: all 0.3s ease; z‑index: 10; box-shadow: 0 4px 16px rgba(0,0,0,0.4); } .edel­fuchs-carousel .edelfuchs-nav:hover { back­ground: rgba(139, 90, 43, 1); trans­form: translateY(-50%) scale(1.1); } .edel­fuchs-carousel .edelfuchs-nav:active { trans­form: translateY(-50%) scale(0.95); } .edel­fuchs-carousel .edelfuchs-nav.prev { left: 40px; } .edel­fuchs-carousel .edelfuchs-nav.next { right: 40px; } /* Dot Indi­ca­tors – Posi­tioned at bottom */ .edel­fuchs-carousel .edel­fuchs-dots { posi­tion: abso­lute; bottom: 30px; left: 50%; trans­form: translateX(-50%); display: flex; justify-content: center; gap: 12px; z‑index: 10; } .edel­fuchs-carousel .edel­fuchs-dot { width: 12px; height: 12px; border-radius: 50%; back­ground: rgba(255, 255, 255, 0.5); border: none; cursor: pointer; tran­si­tion: all 0.3s ease; padding: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } .edel­fuchs-carousel .edelfuchs-dot:hover { back­ground: rgba(255, 255, 255, 0.8); trans­form: scale(1.2); } .edel­fuchs-carousel .edelfuchs-dot.active { back­ground: rgba(255, 255, 255, 1); width: 36px; border-radius: 6px; } /* Progress Bar */ .edel­fuchs-progress { posi­tion: abso­lute; bottom: 0; left: 0; height: 4px; back­ground: rgba(139, 90, 43, 1); width: 0; tran­si­tion: width 0.1s linear; z‑index: 5; } /* Scroll Down Indi­cator (Optional) */ .edel­fuchs-scroll-indi­cator { posi­tion: abso­lute; bottom: 80px; left: 50%; trans­form: translateX(-50%); z‑index: 10; display: flex; flex-direc­tion: column; align-items: center; gap: 10px; color: white; font-size: 14px; text-trans­form: upper­case; letter-spacing: 2px; anima­tion: edel­fuchs-bounce 2s infi­nite; cursor: pointer; } .edel­fuchs-scroll-indi­cator svg { width: 24px; height: 24px; opacity: 0.8; } @keyframes edel­fuchs-bounce { 0%, 20%, 50%, 80%, 100% { trans­form: translateX(-50%) translateY(0); } 40% { trans­form: translateX(-50%) translateY(-10px); } 60% { trans­form: translateX(-50%) translateY(-5px); } } /* Mobile Respon­sive */ @media (max-width: 1024px) { .edel­fuchs-carousel .edel­fuchs-caption { bottom: 80px; left: 40px; right: 40px; } .edel­fuchs-carousel .edel­fuchs-caption h3 { font-size: 36px; } .edel­fuchs-carousel .edel­fuchs-caption p { font-size: 18px; } .edel­fuchs-carousel .edel­fuchs-nav { width: 50px; height: 50px; font-size: 24px; } .edel­fuchs-carousel .edelfuchs-nav.prev { left: 30px; } .edel­fuchs-carousel .edelfuchs-nav.next { right: 30px; } } @media (max-width: 768px) { .edel­fuchs-carousel .edel­fuchs-container { /* Full height on mobile minus header */ height: calc(100vh – 161px); } .edel­fuchs-carousel .edel­fuchs-caption { bottom: 100px; left: 20px; right: 20px; } .edel­fuchs-carousel .edel­fuchs-caption h3 { font-size: 28px; } .edel­fuchs-carousel .edel­fuchs-caption p { font-size: 16px; } .edel­fuchs-carousel .edel­fuchs-nav { width: 45px; height: 45px; font-size: 22px; } .edel­fuchs-carousel .edelfuchs-nav.prev { left: 15px; } .edel­fuchs-carousel .edelfuchs-nav.next { right: 15px; } .edel­fuchs-carousel .edel­fuchs-dots { bottom: 70px; gap: 10px; } .edel­fuchs-carousel .edel­fuchs-dot { width: 10px; height: 10px; } .edel­fuchs-carousel .edelfuchs-dot.active { width: 28px; } .edel­fuchs-badge { bottom: 8px; right: 8px; padding: 3px 6px; font-size: 9px; } .edel­fuchs-carousel .edel­fuchs-scroll-indi­cator { display: none; } } @media (max-width: 480px) { .edel­fuchs-carousel .edel­fuchs-caption h3 { font-size: 24px; } .edel­fuchs-carousel .edel­fuchs-caption p { font-size: 14px; } .edel­fuchs-badge { bottom: 6px; right: 6px; padding: 2px 4px; font-size: 8px; } } /* Touch Feed­back */ .edel­fuchs-carousel .edelfuchs-container.dragging { cursor: grab­bing; } .edel­fuchs-carousel .edelfuchs-container.dragging .edel­fuchs-track { tran­si­tion: none; } /* Copy­right Badge */ .edel­fuchs-badge { posi­tion: abso­lute; bottom: 10px; right: 10px; back­ground: rgba(0, 0, 0, 0.7); color: white; padding: 4px 8px; border-radius: 4px; font-size: 10px; font-weight: 500; font-family: 'Arial', sans-serif; letter-spacing: 0.5px; z‑index: 3; back­drop-filter: blur(2px); border: 1px solid rgba(255, 255, 255, 0.2); } .edelfuchs-badge::before { content: ''; posi­tion: abso­lute; top: 0; left: 0; right: 0; bottom: 0; back­ground: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05)); border-radius: 4px; pointer-events: none; } .edel­fuchs-badge span { posi­tion: rela­tive; z‑index: 1; } 
Edelfuchs Lodge Exterior
© LichtFux Foto­grafie | Sven Killig

Will­kommen in der Edel­fuchs Lodge

Ihre Berg­oase im Herzen der Natur

Gemütlicher Innenbereich

Gemüt­liche Atmosphäre

Entspannen Sie in unseren stil­vollen Räumen

Panoramablick
© LichtFux Foto­grafie | Sven Killig

Gebor­gen­heit & Komfort

Genießen Sie den luxu­riösen Komfort unserer stil­voll einge­rich­teten Zimmer

Kulinarische Genüsse

Kuli­na­ri­sche Höhepunkte

Regio­nale Spezia­li­täten auf höchstem Niveau

Wellness & Entspannung
© LichtFux Foto­grafie | Sven Killig

Unver­gess­liche Momente

Erleben Sie glück­liche Stunden in unserer wunder­schönen Umgebung

Outdoor Aktivitäten

Fest­liche Veranstaltungen

Feiern Sie beson­dere Anlässe in unserem eleganten Ambiente

Scroll
(func­tion () { "use strict"; // Confi­gu­ra­tion const config = { auto­play­Speed: 5000, // 5 seconds per slide auto­play: true, // Set to false to disable auto­play pause­On­Hover: true, // Pause auto­play on hover swipe­Th­res­hold: 50, // Minimum swipe distance in pixels }; const carousel = document.querySelector(".edelfuchs-carousel"); const track = carousel.querySelector(".edelfuchs-track"); const slides = Array.from( carousel.querySelectorAll(".edelfuchs-slide"), ); const dots = Array.from(document.querySelectorAll(".edelfuchs-dot")); const prev­Button = carousel.querySelector(".edelfuchs-nav.prev"); const next­Button = carousel.querySelector(".edelfuchs-nav.next"); const progressBar = carousel.querySelector(".edelfuchs-progress"); const scroll­In­di­cator = carousel.querySelector( ".edel­fuchs-scroll-indi­cator", ); let current­Index = 0; let auto­play­In­terval; let progress­In­terval; let startX = 0; let currentX = 0; let isDrag­ging = false; // Update carousel posi­tion func­tion updateCarousel(index, skip­An­i­ma­tion = false) { // Remove active class from all slides and dots slides.forEach((slide) => slide.classList.remove("active")); dots.forEach((dot) => dot.classList.remove("active")); // Add active class to current slide and dot slides[index].classList.add("active"); dots[index].classList.add("active"); // Move track const offset = ‑index * 100; if (skip­An­i­ma­tion) { track.style.transition = "none"; } track.style.transform = `translateX(${offset}%)`; if (skip­An­i­ma­tion) { setTimeout(() => { track.style.transition = ""; }, 50); } current­Index = index; reset­Pro­gress(); } // Next slide func­tion nextSlide() { const next = (current­Index + 1) % slides.length; updateCarousel(next); } // Previous slide func­tion prevS­lide() { const prev = (current­Index – 1 + slides.length) % slides.length; updateCarousel(prev); } // Go to specific slide func­tion goToSlide(index) { updateCarousel(index); } // Progress bar anima­tion func­tion reset­Pro­gress() { if (!config.autoplay) return; clearInterval(progressInterval); progressBar.style.transition = "none"; progressBar.style.width = "0%"; setTimeout(() => { progressBar.style.transition = `width ${config.autoplaySpeed}ms linear`; progressBar.style.width = "100%"; }, 50); } // Auto­play func­tion start­Au­to­play() { if (!config.autoplay) return; stop­Au­to­play(); reset­Pro­gress(); auto­play­In­terval = setInterval(nextSlide, config.autoplaySpeed); } func­tion stop­Au­to­play() { clearInterval(autoplayInterval); clearInterval(progressInterval); } // Touch/Swipe support func­tion handleTouchStart(e) { startX = e.type.includes("mouse") ? e.pageX : e.touches[0].pageX; isDrag­ging = true; carousel .querySelector(".edelfuchs-container") .classList.add("dragging"); if (config.pauseOnHover) stop­Au­to­play(); } func­tion handleTouchMove(e) { if (!isDrag­ging) return; currentX = e.type.includes("mouse") ? e.pageX : e.touches[0].pageX; } func­tion hand­le­Tou­chEnd() { if (!isDrag­ging) return; const diff = startX – currentX; carousel .querySelector(".edelfuchs-container") .classList.remove("dragging"); if (Math.abs(diff) > config.swipeThreshold) { if (diff > 0) { nextSlide(); } else { prevS­lide(); } } isDrag­ging = false; if (config.pauseOnHover) start­Au­to­play(); } // Event listeners prevButton.addEventListener("click", () => { prevS­lide(); if (config.autoplay) start­Au­to­play(); }); nextButton.addEventListener("click", () => { nextSlide(); if (config.autoplay) start­Au­to­play(); }); dots.forEach((dot, index) => { dot.addEventListener("click", () => { goToSlide(index); if (config.autoplay) start­Au­to­play(); }); }); // Touch events const container = carousel.querySelector(".edelfuchs-container"); container.addEventListener("mousedown", hand­le­Touch­Start); container.addEventListener("mousemove", hand­le­Touch­Move); container.addEventListener("mouseup", hand­le­Tou­chEnd); container.addEventListener("mouseleave", hand­le­Tou­chEnd); container.addEventListener("touchstart", hand­le­Touch­Start); container.addEventListener("touchmove", hand­le­Touch­Move); container.addEventListener("touchend", hand­le­Tou­chEnd); // Pause on hover if (config.pauseOnHover) { carousel.addEventListener("mouseenter", stop­Au­to­play); carousel.addEventListener("mouseleave", start­Au­to­play); } // Keyboard navi­ga­tion document.addEventListener("keydown", (e) => { if (e.key === "Arrow­Left") prevS­lide(); if (e.key === "Arro­w­Right") nextSlide(); }); // Scroll indi­cator click if (scroll­In­di­cator) { scrollIndicator.addEventListener("click", () => { window.scrollTo({ top: window.innerHeight, beha­vior: "smooth", }); }); } // Initia­lize startAutoplay(); })(); 

Die Edel­fuchs-Lodge liegt male­risch im Schwarz­wald und bietet Entspan­nung und Wohl­be­finden. Ursprüng­lich als Ski-Hütte erbaut, wurde sie 2020 liebe­voll reno­viert. Seit Januar 2025 führen wir, Chris­tina Haungs und Kevin Schoe­nen­berg, die Lodge mit viel Herz­blut, um Gästen einen Ort des Will­kom­men­seins zu schaffen.

Schön, dass  du bei uns gelandet bist! Wir freuen uns schon, auf deinen nächsten Besuch in der Edel­fuchs-Lodge. Buch direkt deinen nächsten Aufent­halt oder reser­vier noch heute einen Tisch.

traum­lo­ca­tion

Der ideale Ort für jede Art von Veranstaltung

/* ================================= EDELFUCHS LODGE CARDS 5 Full-Width Cards with Hover Effects ================================= */ .edel­fuchs-cards-wrapper { width: 100%; margin: 0; padding: 0; back­ground: #f8f5f0; } .edel­fuchs-cards-container { display: grid; grid-temp­late-columns: repeat(5, 1fr); gap: 0; width: 100%; margin: 0; padding: 0; } .edel­fuchs-card { posi­tion: rela­tive; width: 100%; height: 500px; over­flow: hidden; cursor: pointer; back­ground: #1a1a1a; tran­si­tion: trans­form 0.3s ease; } .edelfuchs-card:hover { trans­form: scale(1.02); z‑index: 10; } /* Card Image */ .card-image { width: 100%; height: 100%; back­ground-size: cover !important; back­ground-posi­tion: center !important; back­ground-repeat: no-repeat !important; tran­si­tion: trans­form 0.5s ease; } .edelfuchs-card:hover .card-image { trans­form: scale(1.1); } /* Vignette Over­lays – Show on Hover */ .card-vignette-top, .card-vignette-bottom { posi­tion: abso­lute; left: 0; right: 0; height: 40%; pointer-events: none; opacity: 0; tran­si­tion: opacity 0.4s ease; z‑index: 2; } .card-vignette-top { top: 0; back­ground: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), trans­pa­rent); } .card-vignette-bottom { bottom: 0; back­ground: linear-gradient(to top, rgba(0, 0, 0, 0.8), trans­pa­rent); } .edelfuchs-card:hover .card-vignette-top, .edelfuchs-card:hover .card-vignette-bottom { opacity: 1; } /* Card Number – Top Right – Fade in from top */ .card-number { posi­tion: abso­lute; top: 30px; right: 30px; font-size: 72px; font-weight: 700; color: white; font-family: "Georgia", serif; line-height: 1; z‑index: 3; opacity: 0; trans­form: translateY(-30px); tran­si­tion: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); } .edelfuchs-card:hover .card-number { opacity: 1; trans­form: translateY(0); } /* Card Title – Bottom Left – Fade in from bottom */ .card-title { posi­tion: abso­lute; bottom: 40px; left: 40px; right: 40px; z‑index: 3; opacity: 0; trans­form: translateY(30px); tran­si­tion: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .edelfuchs-card:hover .card-title { opacity: 1; trans­form: translateY(0); } .card-title h3 { font-size: 28px; font-weight: 600; color: white; margin: 0 0 8px 0; font-family: "Georgia", serif; line-height: 1.2; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5); } .card-title p { font-size: 16px; color: rgba(255, 255, 255, 0.9); margin: 0 0 12px 0; line-height: 1.4; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } /* Learn More Link */ .card-link { display: inline-flex; align-items: center; gap: 8px; color: white; text-deco­ra­tion: none; font-size: 14px; font-weight: 600; text-trans­form: upper­case; letter-spacing: 1px; border-bottom: 2px solid #8b5a2b; padding-bottom: 2px; tran­si­tion: all 0.3s ease; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); } .card-link:hover { color: #d4a574; border-bottom-color: #d4a574; trans­form: translateX(5px); } .card-link-arrow { font-size: 16px; tran­si­tion: trans­form 0.3s ease; } .card-link:hover .card-link-arrow { trans­form: translateX(3px); } /* Accent Line – Optional deco­ra­tive element */ .card-accent { posi­tion: abso­lute; bottom: 0; left: 0; width: 0; height: 4px; back­ground: #8b5a2b; z‑index: 4; tran­si­tion: width 0.5s ease 0.1s; } .edelfuchs-card:hover .card-accent { width: 100%; } /* Mobile – Show Content by Default (No Click Needed) */ @media (max-width: 1024px) { .edel­fuchs-cards-container { grid-temp­late-columns: repeat(2, 1fr); gap: 2px; } .edel­fuchs-card { height: 400px; } /* On mobile/tablet, show content by default */ .card-vignette-top, .card-vignette-bottom { opacity: 1; } .card-number { opacity: 1; trans­form: translateY(0); } .card-title { opacity: 1; trans­form: translateY(0); } .card-accent { width: 100%; } .card-number { font-size: 56px; top: 20px; right: 20px; } .card-title { bottom: 30px; left: 30px; right: 30px; } .card-title h3 { font-size: 24px; } .card-title p { font-size: 14px; margin: 0 0 10px 0; } .card-link { font-size: 13px; } } @media (max-width: 768px) { .edel­fuchs-cards-container { grid-temp­late-columns: 1fr; gap: 1px; } .edel­fuchs-card { height: 350px; } .card-number { font-size: 48px; top: 15px; right: 15px; } .card-title { bottom: 20px; left: 20px; right: 20px; } .card-title h3 { font-size: 22px; } .card-title p { font-size: 13px; margin: 0 0 8px 0; } .card-link { font-size: 12px; } } /* Tablet – 3 columns */ @media (min-width: 769px) and (max-width: 1024px) { .edel­fuchs-cards-container { grid-temp­late-columns: repeat(3, 1fr); } } /* Loading State */ .card-image { back­ground: #2a2a2a; } /* Optional: Add subtle anima­tion on page load */ @keyframes fadeInUp { from { opacity: 0; trans­form: translateY(30px); } to { opacity: 1; trans­form: translateY(0); } } .edel­fuchs-card { anima­tion: fadeInUp 0.6s ease forwards; } .edelfuchs-card:nth-child(1) { anima­tion-delay: 0s; } .edelfuchs-card:nth-child(2) { anima­tion-delay: 0.1s; } .edelfuchs-card:nth-child(3) { anima­tion-delay: 0.2s; } .edelfuchs-card:nth-child(4) { anima­tion-delay: 0.3s; } .edelfuchs-card:nth-child(5) { anima­tion-delay: 0.4s; }
01

Hoch­zeits­lo­ca­tion

Traum­hoch­zeit im Schwarzwald

Mehr erfahren →
02

Tagungen

Produk­tive Tagungen im Schwarzwald

Mehr erfahren →
03

Firmen-events

Team­buil­ding im Schwarzwald

Mehr erfahren →
04

Kerzen­dinner

Roman­ti­sches Kerzendinner

Mehr erfahren →
05

Private Feiern

Unver­gess­liche Feiern im Schwarzwald

Mehr erfahren →
// ================================= // KARTEN JAVASCRIPT // Mobile: Inhalt stan­dard­mäßig sichtbar // Desktop: Hover-Effekte // ================================= (func­tion () { "use strict"; // Get all cards const cards = document.querySelectorAll(".edelfuchs-card"); // Optional: Lazy Load Bilder für bessere Perfor­mance if ("Inter­sec­tion­Ob­server" in window) { const image­Ob­server = new Inter­sec­tion­Ob­server( (entries, observer) => { entries.forEach((entry) => { if (entry.isIntersecting) { const img = entry.target; // Bild ist bereits über src geladen, aber Sie könnten hier Lazy Loading imple­men­tieren observer.unobserve(img); } }); }, ); document.querySelectorAll(".card-image").forEach((img) => { imageObserver.observe(img); }); } // Tastatur-Navi­ga­tion für Barrie­re­frei­heit hinzu­fügen cards.forEach((card, index) => { card.setAttribute("tabindex", "0"); card.setAttribute("role", "article"); card.setAttribute("aria-label", `Karte ${index + 1}`); // Erlauben Sie Enter/Space, um den Link inner­halb zu klicken card.addEventListener("keydown", func­tion (e) { if (e.key === "Enter" || e.key === " ") { e.preventDefault(); const link = this.querySelector(".card-link"); if (link) { link.click(); } } }); }); })();
Beson­dere Momente in einzig­ar­tiger Atmosphäre 

Erleben Sie Unvergessliches

/* ================================= EDELFUCHS LODGE ACTIVITIES SHOWCASE 2 Feature Acti­vi­ties with CTA Buttons ================================= */ .edel­fuchs-acti­vi­ties-wrapper { width: 100%; margin: 0; padding: 0; back­ground: #f8f5f0; } .acti­vi­ties-header h2 { font-size: 48px; font-weight: 600; color: #2a2a2a; margin: 0 0 15px 0; font-family: 'Georgia', serif; letter-spacing: ‑0.5px; } .acti­vi­ties-header p { font-size: 20px; color: #666; margin: 0; font-weight: 300; } /* Acti­vi­ties Container */ .edel­fuchs-acti­vi­ties-container { display: grid; grid-temp­late-columns: repeat(2, 1fr); gap: 0; width: 100%; margin: 0; padding: 0; } /* Indi­vi­dual Acti­vity Card */ .acti­vity-card { posi­tion: rela­tive; width: 100%; min-height: 600px; over­flow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; tran­si­tion: trans­form 0.4s ease; } .activity-card:hover { trans­form: scale(1.01); z‑index: 5; } /* Back­ground Image */ .acti­vity-back­ground { posi­tion: abso­lute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; object-fit: cover !important; ‑o-object-fit: cover !important; object-posi­tion: center !important; ‑o-object-posi­tion: center !important; tran­si­tion: trans­form 0.6s ease; } .activity-card:hover .acti­vity-back­ground { trans­form: scale(1.05); } /* Dark Overlay */ .acti­vity-overlay { posi­tion: abso­lute; top: 0; left: 0; width: 100%; height: 100%; back­ground: linear-gradient(135deg, rgba(0,0,0,0.5), rgba(0,0,0,0.7)); tran­si­tion: back­ground 0.4s ease; } .activity-card:hover .acti­vity-overlay { back­ground: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6)); } /* Content Container */ .acti­vity-content { posi­tion: rela­tive; z‑index: 3; text-align: center; padding: 40px; max-width: 500px; trans­form: translateY(0); tran­si­tion: trans­form 0.4s ease; } .activity-card:hover .acti­vity-content { trans­form: translateY(-10px); } /* Small Label/Tag */ .acti­vity-label { display: inline-block; back­ground: rgba(139, 90, 43, 0.9); color: white; padding: 8px 20px; font-size: 12px; font-weight: 700; text-trans­form: upper­case; letter-spacing: 2px; margin-bottom: 20px; border-radius: 30px; opacity: 0; trans­form: translateY(-20px); tran­si­tion: all 0.5s ease 0.1s; } .activity-card:hover .acti­vity-label { opacity: 1; trans­form: translateY(0); } /* Acti­vity Title */ .acti­vity-title { font-size: 56px; font-weight: 700; color: white; margin: 0 0 20px 0; font-family: 'Georgia', serif; line-height: 1.1; text-shadow: 0 4px 20px rgba(0,0,0,0.6); letter-spacing: ‑1px; } /* Acti­vity Descrip­tion */ .acti­vity-descrip­tion { font-size: 20px; color: rgba(255, 255, 255, 0.95); margin: 0 0 35px 0; line-height: 1.6; text-shadow: 0 2px 10px rgba(0,0,0,0.5); font-weight: 300; } /* Book Now Button */ .acti­vity-button { display: inline-flex; align-items: center; gap: 12px; back­ground: white; color: #2a2a2a; padding: 16px 40px; font-size: 16px; font-weight: 700; text-trans­form: upper­case; letter-spacing: 1.5px; border: none; border-radius: 8px; cursor: pointer; tran­si­tion: all 0.3s ease; text-deco­ra­tion: none; box-shadow: 0 8px 25px rgba(0,0,0,0.3); opacity: 0; trans­form: translateY(20px); tran­si­tion: all 0.5s ease 0.2s; } .activity-card:hover .acti­vity-button { opacity: 1; trans­form: translateY(0); } .activity-button:hover { back­ground: #8b5a2b; color: white; trans­form: translateY(-3px); box-shadow: 0 12px 35px rgba(139, 90, 43, 0.4); } .acti­vity-button-icon { font-size: 20px; tran­si­tion: trans­form 0.3s ease; } .activity-button:hover .acti­vity-button-icon { trans­form: translateX(5px); } /* Deco­ra­tive Elements */ .acti­vity-deco­ra­tion { posi­tion: abso­lute; bottom: 30px; left: 50%; trans­form: translateX(-50%); width: 60px; height: 4px; back­ground: #8b5a2b; opacity: 0; tran­si­tion: all 0.5s ease 0.3s; } .activity-card:hover .acti­vity-deco­ra­tion { opacity: 1; width: 100px; } /* Special Badge (Optional) */ .acti­vity-badge { posi­tion: abso­lute; top: 30px; right: 30px; back­ground: rgba(255, 255, 255, 0.95); color: #8b5a2b; padding: 12px 25px; font-size: 13px; font-weight: 700; text-trans­form: upper­case; letter-spacing: 1px; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,0.2); opacity: 0; trans­form: translateY(-20px); tran­si­tion: all 0.5s ease 0.15s; } .activity-card:hover .acti­vity-badge { opacity: 1; trans­form: translateY(0); } /* Mobile Respon­sive */ @media (max-width: 1024px) { .acti­vi­ties-header h2 { font-size: 38px; } .acti­vi­ties-header p { font-size: 18px; } .acti­vity-card { min-height: 500px; } .acti­vity-title { font-size: 42px; } .acti­vity-descrip­tion { font-size: 18px; } } @media (max-width: 768px) { .edel­fuchs-acti­vi­ties-container { grid-temp­late-columns: 1fr; gap: 2px; } .acti­vi­ties-header { padding: 60px 20px 40px; } .acti­vi­ties-header h2 { font-size: 32px; } .acti­vi­ties-header p { font-size: 16px; } .acti­vity-card { min-height: 450px; posi­tion: rela­tive !important; over­flow: hidden !important; } .acti­vity-back­ground { posi­tion: abso­lute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; ‑o-object-fit: cover !important; ‑webkit-object-fit: cover !important; object-posi­tion: center center !important; ‑o-object-posi­tion: center center !important; ‑webkit-object-posi­tion: center center !important; } .acti­vity-content { padding: 30px 20px; } .acti­vity-title { font-size: 36px; } .acti­vity-descrip­tion { font-size: 16px; margin-bottom: 25px; } .acti­vity-button { padding: 14px 32px; font-size: 14px; } /* On mobile, show content by default */ .acti­vity-label, .acti­vity-button, .acti­vity-badge { opacity: 1; trans­form: translateY(0); } .acti­vity-deco­ra­tion { opacity: 1; } } @media (max-width: 480px) { .acti­vity-card { min-height: 400px; posi­tion: rela­tive !important; over­flow: hidden !important; } .acti­vity-back­ground { posi­tion: abso­lute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; min-width: 100% !important; min-height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; ‑o-object-fit: cover !important; ‑webkit-object-fit: cover !important; object-posi­tion: center center !important; } .acti­vity-title { font-size: 28px; } .acti­vity-descrip­tion { font-size: 15px; } .acti­vity-badge { top: 20px; right: 20px; padding: 8px 16px; font-size: 11px; } } /* Loading Anima­tion */ @keyframes fadeInS­cale { from { opacity: 0; trans­form: scale(0.95); } to { opacity: 1; trans­form: scale(1); } } .acti­vity-card { anima­tion: fadeInS­cale 0.6s ease forwards; } .activity-card:nth-child(1) { anima­tion-delay: 0.1s; } .activity-card:nth-child(2) { anima­tion-delay: 0.2s; } /* Image Loading State */ .acti­vity-back­ground { back­ground: #2a2a2a; }
Edelfuchs Dome Glamping
Neu 2026
Glam­ping Erlebnis

EDELFUCHS-DOME

Bucht jetzt das neue Dome an der LODGE. Glam­ping mit super Aussicht. 

Jetzt buchen →
Kerzendinner
Termine 2026
Exklusiv

KERZENDINNER

Lasst euch verwöhnen und genießt dieses einma­lige Erlebnis. 

Jetzt buchen →
// ================================= // ACTIVITIES JAVASCRIPT // Smooth Scrol­ling for Anchor Links // ================================= (func­tion() { 'use strict'; // Get all acti­vity cards and buttons const acti­vi­ty­Cards = document.querySelectorAll('.activity-card'); const acti­vi­ty­But­tons = document.querySelectorAll('.activity-button'); // Add smooth scroll for anchor links activityButtons.forEach(button => { button.addEventListener('click', function(e) { const href = this.getAttribute('href'); // Only prevent default for anchor links (starting with #) if (href && href.startsWith('#')) { e.preventDefault(); const targetId = href.substring(1); const targe­t­Ele­ment = document.getElementById(targetId); if (targe­t­Ele­ment) { targetElement.scrollIntoView({ beha­vior: 'smooth', block: 'start' }); } } // For external links, let default beha­vior happen }); }); // Optional: Add keyboard navi­ga­tion activityCards.forEach((card, index) => { card.setAttribute('tabindex', '0'); card.setAttribute('role', 'article'); card.setAttribute('aria-label', `Acti­vity ${index + 1}`); card.addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); const button = this.querySelector('.activity-button'); if (button) { button.click(); } } }); }); // Optional: Lazy load images if ('Inter­sec­tion­Ob­server' in window) { const image­Ob­server = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; observer.unobserve(img); } }); }); document.querySelectorAll('.activity-background').forEach(img => { imageObserver.observe(img); }); } // Optional: Track button clicks (for analy­tics) activityButtons.forEach(button => { button.addEventListener('click', func­tion() { const acti­vi­ty­Title = this.closest('.activity-card') .querySelector('.activity-title') .text­Con­tent; // You can add Google Analy­tics or other tracking here console.log('Activity clicked:', acti­vi­ty­Title); // Example: gtag('event', 'activity_click', { activity_name: activityTitle }); }); }); })(); 

Traum­pro­jekt
Mit der EDELFUCHS-LODGE geht ein Traum in Erfül­lung, an dem wir euch teil­haben lassen wollen.

Chris­tina Haungs & Kevin Schoenenberg

Schwarz­wald – Über­nach­tung – airbnb – Restau­rant – Firmen­events – Hoch­zeiten – Zimmer