Pension | Doppelzimmer Komfort – der Steinbock

/* --- BRANDING VARIABLES --- */ :root { --brand-pink: #975B63; /* Primary Action */ --brand-dark: #373746; /* Card Background / Headlines */ --brand-accent: #FFA503; /* Icons / Highlights */ --bg-light: #f9f9f9; --text-dark: #333333; --text-grey: #666666; --font-main: 'Open Sans', sans-serif; --radius: 6px; --shadow-card: 0 15px 35px rgba(55, 55, 70, 0.15); --shadow-hover: 0 25px 50px rgba(151, 91, 99, 0.25); } /* --- RESET --- */ body { margin: 0; padding: 0; font-family: var(--font-main); background-color: #fff; color: var(--text-dark); } .crs-wrapper { max-width: 1400px; margin: 0 auto; padding: 60px 20px; box-sizing: border-box; } .crs-wrapper * { box-sizing: border-box; } /* --- HEADER SECTION --- */ .crs-header { text-align: center; max-width: 800px; margin: 0 auto 50px auto; } .crs-header h2 { font-size: 2.5rem; font-weight: 300; /* Magazine Style Thin Header */ color: var(--brand-dark); margin: 0 0 15px 0; text-transform: uppercase; letter-spacing: 2px; } .crs-header-line { width: 60px; height: 3px; background-color: var(--brand-pink); margin: 0 auto 20px auto; } .crs-header p { font-size: 1.1rem; color: var(--text-grey); line-height: 1.6; } /* --- SLIDER CONTAINER --- */ .crs-slider-container { position: relative; /* Padding allows shadows to show without being cut off */ padding: 20px 10px 50px 10px; overflow: hidden; } .crs-track { display: flex; gap: 30px; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); will-change: transform; } /* --- ROOM CARD (MAGAZINE STYLE) --- */ .crs-card { flex: 0 0 100%; /* Default Mobile */ background-color: var(--brand-dark); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow-card); transition: all 0.4s ease; position: relative; } /* Responsive Flex Basis */ @media (min-width: 768px) { .crs-card { flex: 0 0 calc(50% - 15px); } } @media (min-width: 1100px) { .crs-card { flex: 0 0 calc(33.333% - 20px); } } .crs-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-hover); } /* Image Area */ .crs-img-wrap { height: 260px; overflow: hidden; position: relative; } .crs-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s ease; } .crs-card:hover .crs-img { transform: scale(1.1); } .crs-badge { position: absolute; top: 20px; left: 20px; background: rgba(255, 255, 255, 0.95); color: var(--brand-pink); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 6px 12px; border-radius: 2px; letter-spacing: 1px; z-index: 2; } /* Content Area */ .crs-body { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; color: white; } .crs-title { font-family: var(--font-main); font-size: 1.4rem; font-weight: 400; margin: 0 0 15px 0; color: white; line-height: 1.3; } /* Meta Row */ .crs-meta { display: flex; gap: 20px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 0.9rem; color: rgba(255,255,255,0.8); } .crs-meta div { display: flex; align-items: center; gap: 8px; } .crs-meta svg { width: 18px; height: 18px; fill: var(--brand-accent); } /* Description */ .crs-desc { font-size: 0.95rem; line-height: 1.6; color: rgba(255,255,255,0.7); margin-bottom: 25px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Footer */ .crs-footer { margin-top: auto; } .crs-price-group { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; } .crs-label { font-size: 0.7rem; text-transform: uppercase; color: rgba(255,255,255,0.5); display: block; } .crs-price { font-size: 1.6rem; font-weight: 700; color: white; } /* Tooltip */ .crs-tooltip-trigger { position: relative; font-size: 0.8rem; color: var(--brand-accent); text-decoration: underline dotted; cursor: pointer; } .crs-tooltip-text { visibility: hidden; opacity: 0; width: 160px; background: white; color: var(--brand-dark); text-align: center; padding: 8px; border-radius: 4px; position: absolute; bottom: 140%; right: 0; transition: 0.3s; box-shadow: 0 5px 15px rgba(0,0,0,0.2); pointer-events: none; font-weight: 600; font-size: 0.75rem; z-index: 10; } .crs-tooltip-trigger:hover .crs-tooltip-text { visibility: visible; opacity: 1; bottom: 120%; } /* Buttons */ .crs-btn-row { display: flex; gap: 10px; } .crs-btn { flex: 1; padding: 12px 0; text-align: center; text-decoration: none; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; border-radius: 2px; transition: 0.3s; } .crs-btn-outline { border: 1px solid rgba(255,255,255,0.3); color: white; } .crs-btn-outline:hover { background: rgba(255,255,255,0.1); border-color: white; } .crs-btn-fill { background: var(--brand-pink); color: white; border: 1px solid var(--brand-pink); } .crs-btn-fill:hover { background: #7a4950; border-color: #7a4950; } /* --- CONTROLS --- */ .crs-nav-row { display: flex; justify-content: center; gap: 20px; margin-top: 20px; } .crs-arrow { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--brand-dark); background: transparent; color: var(--brand-dark); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.3s; } .crs-arrow:hover { background: var(--brand-dark); color: white; } /* --- WHY BOOK DIRECT SECTION --- */ .crs-usp-section { margin-top: 80px; background-color: white; border-radius: var(--radius); box-shadow: 0 10px 40px rgba(0,0,0,0.05); display: flex; overflow: hidden; border: 1px solid #eee; } .crs-usp-img { flex: 1; min-height: 400px; background-image: url('https://www.diearlbergerin.com/wp-content/uploads/2026/01/DSC2829-1.webp'); background-size: cover; background-position: center; } .crs-usp-content { flex: 1.3; padding: 50px; } .crs-usp-header h3 { font-size: 2rem; font-weight: 300; color: var(--brand-pink); margin-top: 0; margin-bottom: 30px; text-transform: uppercase; } /* USP Grid */ .crs-usp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .crs-usp-card { background: #fff; padding: 25px; border-radius: 4px; border-left: 4px solid var(--brand-pink); box-shadow: 0 5px 15px rgba(0,0,0,0.03); transition: 0.3s; } .crs-usp-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.08); } .crs-usp-icon { width: 24px; height: 24px; fill: var(--brand-accent); margin-bottom: 15px; display: block; } .crs-usp-card h4 { margin: 0 0 10px 0; color: var(--brand-dark); font-size: 1.1rem; font-weight: 600; } .crs-usp-card p { margin: 0; color: var(--text-grey); font-size: 0.9rem; line-height: 1.5; } /* Responsive */ @media (max-width: 900px) { .crs-usp-section { flex-direction: column; } .crs-usp-img { height: 250px; } .crs-usp-content { padding: 30px; } } @media (max-width: 600px) { .crs-usp-grid { grid-template-columns: 1fr; } .crs-header h2 { font-size: 1.8rem; } } // --- 1. DATA CONFIGURATION (Correct Links & Prices) --- const roomsData = [ { id: 7, title: "Double Room Panorama", priceFrom: 260, occupancy: "1-2", area: "28", desc: "Spacious rooms with a magnificent view of the Tyrolean mountains from your bed.", img: "https://booking.diearlbergerin.com/websLINE-ABM/Assets/doppelzimmer-panorama-2.64.jpg", badge: "Hotel", detailsUrl: "https://www.diearlbergerin.com/de/hotel-rooms/doppelzimmer-panorama-hotel/", bookUrl: "https://booking.diearlbergerin.com/Websline-ABM/Homepage/Booking/Preset?roomCategoryId=7&languageIso=en" }, { id: 8, title: "Double Room Superior", priceFrom: 236, occupancy: "1-2", area: "25", desc: "Elegant south-facing double rooms located on the 2nd floor with balcony.", img: "https://booking.diearlbergerin.com/websLINE-ABM/Assets/doppelzimmer-superior-2.86.jpg", badge: "Hotel", detailsUrl: "https://www.diearlbergerin.com/de/hotel-rooms/doppelzimmer-superior-hotel/", bookUrl: "https://booking.diearlbergerin.com/Websline-ABM/Homepage/Booking/Preset?roomCategoryId=8&languageIso=en" }, { id: 9, title: "Double Room Zirbe", priceFrom: 250, occupancy: "1-2", area: "26", desc: "Natural rooms furnished with high-quality and allergy-friendly Swiss pine wood.", img: "https://booking.diearlbergerin.com/websLINE-ABM/Assets/diearlbergerin-386.80.jpg", badge: "Hotel", detailsUrl: "https://www.diearlbergerin.com/de/hotel-rooms/doppelzimmer-zirbe-hotel/", bookUrl: "https://booking.diearlbergerin.com/Websline-ABM/Homepage/Booking/Preset?roomCategoryId=9&languageIso=en" }, { id: 16, title: "Tirol Suite", priceFrom: 240, occupancy: "2-4", area: "40", desc: "Large suite for families with separate living room and wooden furnishings.", img: "https://booking.diearlbergerin.com/websLINE-ABM/Assets/die-arlbergerin-20.224.jpg", badge: "Hotel", detailsUrl: "https://www.diearlbergerin.com/hotel-rooms/tirol-suite-stammhaus/", bookUrl: "https://booking.diearlbergerin.com/Websline-ABM/Homepage/Booking/Preset?roomCategoryId=16&languageIso=en" }, { id: 17, title: "Comfort Room Steinbock", priceFrom: 160, occupancy: "1-2", area: "24", desc: "Cozy rooms in our pension 'Der Steinbock' with fantastic views to the east.", img: "https://booking.diearlbergerin.com/websLINE-ABM/Assets/der-steinbock-19.231.jpg", badge: "Pension", detailsUrl: "https://www.diearlbergerin.com/de/hotel-rooms/pension-doppelzimmer-komfort-der-steinbock/", bookUrl: "https://booking.diearlbergerin.com/Websline-ABM/Homepage/Booking/Preset?roomCategoryId=17&languageIso=en" }, { id: 23, title: "Triple Room Superior", priceFrom: 236, occupancy: "2-3", area: "25", desc: "New triple room located in the new building with spacious bathroom and rainshower.", img: "https://booking.diearlbergerin.com/websLINE-ABM/Assets/zimmer-8-2.95.JPG", badge: "Hotel", detailsUrl: "https://www.diearlbergerin.com/de/hotel-rooms/dreibettzimmer-superior-hotel/", bookUrl: "https://booking.diearlbergerin.com/Websline-ABM/Homepage/Booking/Preset?roomCategoryId=23&languageIso=en" } ]; // --- 2. RENDER LOGIC --- const track = document.getElementById('crs-track'); const currency = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR', maximumFractionDigits: 0 }); roomsData.forEach(room => { const card = document.createElement('article'); card.className = 'crs-card'; card.innerHTML = ` `; track.appendChild(card); }); // --- 3. SLIDER FUNCTIONALITY --- const prevBtn = document.getElementById('crs-prev'); const nextBtn = document.getElementById('crs-next'); let currentIndex = 0; function getItemsPerScreen() { if (window.innerWidth >= 1100) return 3; if (window.innerWidth >= 768) return 2; return 1; } function updateSlider() { const itemsPerScreen = getItemsPerScreen(); const maxIndex = roomsData.length - itemsPerScreen; if (currentIndex maxIndex) currentIndex = maxIndex; // Move by percentage const percentMove = currentIndex * (100 / itemsPerScreen); // CSS Gap compensation (30px gap) const gapCompensation = currentIndex * 30; const totalGapAdjustment = gapCompensation / itemsPerScreen; // Distribute adjustment // Note: Using pixel based calc for gap accuracy const trackWidth = track.parentElement.offsetWidth; const cardWidth = (trackWidth - ((itemsPerScreen - 1) * 30)) / itemsPerScreen; const moveAmount = (cardWidth + 30) * currentIndex; track.style.transform = `translateX(-${moveAmount}px)`; // Opacity controls prevBtn.style.opacity = currentIndex === 0 ? '0.5' : '1'; prevBtn.style.pointerEvents = currentIndex === 0 ? 'none' : 'auto'; nextBtn.style.opacity = currentIndex === maxIndex ? '0.5' : '1'; nextBtn.style.pointerEvents = currentIndex === maxIndex ? 'none' : 'auto'; } nextBtn.addEventListener('click', () => { currentIndex++; updateSlider(); }); prevBtn.addEventListener('click', () => { currentIndex--; updateSlider(); }); window.addEventListener('resize', () => { currentIndex = 0; updateSlider(); }); // Init setTimeout(updateSlider, 100);