/* ==========================================================================   1. CSS Variables & Global Resets   ========================================================================== */:root {    --primary-color: #2c2c2c;      /* Deep obsidian gray */    --accent-color: #c5a072;       /* Warm almond gold */    --bg-color: #fdfbf7;           /* Soft ivory background */    --text-color: #4a4a4a;         /* Muted charcoal body text */    --font-heading: 'Playfair Display', serif;    --font-body: 'Inter', sans-serif;}
* {    margin: 0;    padding: 0;    box-sizing: border-box;}
html, body {    width: 100%;    margin: 0;    padding: 0;    overflow-x: hidden;}
body {    font-family: var(--font-body);    color: var(--text-color);    background-color: var(--bg-color);    line-height: 1.6;    -webkit-font-smoothing: antialiased;}
h1, h2, h3, h4, h5, h6 {    font-family: var(--font-heading);    color: var(--primary-color);    font-weight: 400;}
a {    text-decoration: none;    color: inherit;    transition: color 0.3s ease, border-color 0.3s ease;}
/* ==========================================================================   2. Navigation Header Overlay   ========================================================================== */nav {    position: absolute;    top: 0;    left: 0;    width: 100%;    padding: 2.5rem 5%;    display: flex;    justify-content: space-between;    align-items: center;    z-index: 1000;}
.logo {    font-family: var(--font-heading);    font-size: 1.5rem;    color: #ffffff;    font-weight: 600;    letter-spacing: 1px;}
.nav-links {    list-style: none;    display: flex;    gap: 2.5rem;}
.nav-links li a {    color: #ffffff;    font-size: 0.95rem;    text-transform: uppercase;    letter-spacing: 1px;    padding-bottom: 4px;    border-bottom: 1px solid transparent;}
.nav-links li a:hover, .nav-links li a.active {    color: var(--accent-color);    border-color: var(--accent-color);}
.menu-toggle {    display: none;    background: none;    border: none;    cursor: pointer;}
.hamburger {    display: block;    width: 25px;    height: 2px;    background-color: #ffffff;    position: relative;}
.hamburger::before, .hamburger::after {    content: '';    position: absolute;    width: 25px;    height: 2px;    background-color: #ffffff;    left: 0;}
.hamburger::before { top: -8px; }.hamburger::after { top: 8px; }
/* ==========================================================================   3. Locked Viewport Hero Sections (Curtain Slide Effect)   ========================================================================== */header {    width: 100%;    height: 100vh;    min-height: 620px;    display: flex;    align-items: center;    justify-content: center;    text-align: center;    color: #ffffff;    padding: 0 5%;    position: relative;    background-size: cover;    background-position: center center;    background-repeat: no-repeat;    background-attachment: fixed;}
.hero-index {    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('img/hero-background.jpg');}
.hero-map {    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('img/map30-60min.jpg');}
.hero-accommodations {    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('img/welcome.jpg');}
.hero-impressum {    background-image: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url('img/impressum.jpg');}
.hero-content {    max-width: 850px;    margin-top: 4rem;}
.hero-tagline {    font-size: 0.85rem;    text-transform: uppercase;    letter-spacing: 3px;    color: var(--accent-color);    margin-bottom: 1.5rem;    font-weight: 500;}
header h1 {    font-size: 4rem;    line-height: 1.25;    color: #ffffff;    margin-bottom: 1.75rem;}
.hero-p {    font-size: 1.15rem;    margin-bottom: 2.5rem;    font-weight: 300;    line-height: 1.7;}
.cta-group {    display: flex;    gap: 1.5rem;    justify-content: center;    align-items: center;}
.btn-primary {    background-color: var(--accent-color);    color: #ffffff;    padding: 15px 34px;    font-size: 0.9rem;    text-transform: uppercase;    letter-spacing: 1px;    border-radius: 2px;    font-weight: 500;    display: inline-block;    transition: background-color 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);}
.btn-primary:hover {    background-color: #b38f62;}
.link-secondary {    color: #ffffff;    font-size: 0.9rem;    text-transform: uppercase;    letter-spacing: 1px;    border-bottom: 1px solid rgba(255, 255, 255, 0.6);    padding-bottom: 4px;    display: inline-block;}
.link-secondary:hover {    color: var(--accent-color);    border-color: var(--accent-color);}
/* ==========================================================================   3a. Staggered Fluid Slide-In Animation Framework   ========================================================================== */.hero-content > * {    opacity: 0;    transform: translateY(40px);}
@keyframes slideUpFade {    0% {        opacity: 0;        transform: translateY(40px);    }    100% {        opacity: 1;        transform: translateY(0);    }}
.bg-loaded .hero-tagline {    animation: slideUpFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;    animation-delay: 0.1s;}
.bg-loaded h1 {    animation: slideUpFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;    animation-delay: 0.3s;}
.bg-loaded .hero-p {    animation: slideUpFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;    animation-delay: 0.5s;}
.bg-loaded .cta-group {    animation: slideUpFade 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;    animation-delay: 0.7s;}
/* ==========================================================================   4. Grid Layout Framework & Card Modules   ========================================================================== */.section-padding {    padding: 7rem 5%;    max-width: 1200px;    margin: 0 auto;}
.section-intro {    text-align: center;    margin-bottom: 4.5rem;}
.section-intro h2 {    font-size: 2.5rem;    margin-top: 0.5rem;}
.pillars-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));    gap: 2.5rem;}
.pillar-card {    background: #ffffff;    padding: 3.5rem 2.5rem;    text-align: center;    border: 1px solid #eeeeee;    transition: transform 0.3s ease, box-shadow 0.3s ease;}
.pillar-card:hover {    transform: translateY(-4px);    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);}
.pillar-meta {    font-size: 0.8rem;    text-transform: uppercase;    letter-spacing: 2px;    color: var(--accent-color);    display: block;    margin-bottom: 1.25rem;    font-weight: 500;}
.pillar-card h3 {    font-size: 1.45rem;    margin-bottom: 1.25rem;    line-height: 1.35;}
/* Personal Letter Structure */.letter-section {    padding: 7rem 5%;    background-color: var(--bg-color);}
.letter-container {    max-width: 780px;    margin: 0 auto;}
.letter-container h2 {    font-size: 2.5rem;    text-align: center;    margin-bottom: 3rem;    margin-top: 0.5rem;}
.letter-body {    text-align: left;}
.letter-body p {    font-size: 1.08rem;    margin-bottom: 1.75rem;    line-height: 1.85;}
.signature {    font-family: var(--font-heading);    font-size: 1.3rem;    font-style: italic;    color: var(--accent-color);    margin-top: 3.5rem;}
/* ==========================================================================   4b. Award Flex Display Layout & Frame Setup   ========================================================================== */.award-section {  padding: 4rem 1.5rem;}.award-container {  display: flex;  gap: 20px;  align-items: stretch;  justify-content: center;}.award-card {  flex: 1;  display: flex;  justify-content: center;  align-items: center;}.award-media {  max-width: 100%;  height: auto;  display: block;}.award-card-ranking {  background: linear-gradient(180deg, #003580 0%, #00224f 100%);  color: #fff;  padding: 1.15rem;}.ranking-title {  color: #fff;  margin: 0 0 1rem 0;  text-align: center;  font-size: 1rem;  font-weight: 700;  letter-spacing: 0.04em;}.booking-badge {  display: flex;  align-items: center;  gap: 12px;  position: relative;}.booking-badge::before {  content: "";  position: absolute;  inset: 0;  background: radial-gradient(circle at top left, rgba(255,255,255,0.12), transparent 35%);  pointer-events: none;}.booking-score {  width: 92px;  height: 92px;  border-radius: 50%;  background: #ffb700;  color: #003580;  display: flex;  align-items: center;  justify-content: center;  font-size: 2.05rem;  font-weight: 800;  box-shadow: 0 10px 22px rgba(0,0,0,0.18);  flex-shrink: 0;  position: relative;  z-index: 1;}.booking-meta {  position: relative;  z-index: 1;}.booking-label {  font-size: 1.35rem;  font-weight: 800;  line-height: 1.05;  color: #fff;}.booking-count {  margin-top: 0.35rem;  font-size: 0.95rem;  color: rgba(255,255,255,0.92);}
/* ==========================================================================   5. Map Grid Matrix, Reviews Grid & Dynamic Subpages   ========================================================================== */.matrix-grid, .reviews-grid {    display: grid;    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));    gap: 2rem;}
.matrix-card, .review-card {    background: #ffffff;    padding: 2.5rem 2rem;    border: 1px solid #eeeeee;    transition: transform 0.3s ease, box-shadow 0.3s ease;}
.matrix-card:hover, .review-card:hover {    transform: translateY(-4px);    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);}
.time-badge {    display: inline-block;    background-color: var(--primary-color);    color: #ffffff;    font-size: 0.75rem;    font-weight: 600;    text-transform: uppercase;    letter-spacing: 1px;    padding: 6px 14px;    border-radius: 2px;    margin-bottom: 1.5rem;}
.matrix-card h3 {    font-size: 1.35rem;    margin-bottom: 1rem;}
/* Review Specific Elements */.review-source {    font-size: 0.8rem;    text-transform: uppercase;    letter-spacing: 2px;    color: var(--accent-color);    display: block;    margin-bottom: 1rem;    font-weight: 600;}
.review-quote {    font-size: 1.05rem;    font-style: italic;    margin-bottom: 1.5rem;    line-height: 1.7;    color: var(--text-color);}
.review-author {    font-family: var(--font-heading);    font-size: 1.25rem;    color: var(--primary-color);}
/* Local Expertise & Impressum Block */.local-expertise-section {    background-color: #ffffff;    padding: 7rem 5%;    border-top: 1px solid #eaeaea;    border-bottom: 1px solid #eaeaea;}
.expertise-content {    max-width: 800px;    margin: 0 auto;    text-align: center;}
.expertise-content h2 {    font-size: 2.5rem;    margin-bottom: 1.5rem;}
.accent-divider {    width: 50px;    height: 2px;    background-color: var(--accent-color);    border: none;    margin: 0 auto 2.5rem auto;}
.expertise-content p {    font-size: 1.1rem;    margin-bottom: 1.75rem;    line-height: 1.85;}
.host-signature {    font-family: var(--font-heading);    font-size: 1.35rem !important;     font-style: italic;    color: var(--accent-color) !important;    margin-top: 3.5rem;}
.legal-notice {    text-align: left;    margin-top: 2rem;}
.legal-notice h3 {    font-size: 1.5rem;    margin-bottom: 1rem;}
.legal-notice p {    font-size: 1.05rem;    margin-bottom: 0.75rem;}
.legal-notice a {    color: var(--accent-color);    text-decoration: underline;}
/* ==========================================================================   6. Borderless Popup (Lightbox) Styles   ========================================================================== */.lightbox-overlay {    display: none;    position: fixed;    z-index: 2000;    left: 0;    top: 0;    width: 100%;    height: 100%;    background-color: rgba(15, 15, 15, 0.9);    backdrop-filter: blur(4px);    opacity: 0;    transition: opacity 0.3s ease;}
.lightbox-overlay.active {    display: flex;    justify-content: center;    align-items: center;    opacity: 1;}
.lightbox-content {    position: relative;    max-width: 90vw;    max-height: 90vh;    display: flex;    justify-content: center;    align-items: center;}
.lightbox-content img {    max-width: 100%;    max-height: 90vh;    width: auto;    height: auto;    object-fit: contain;    border: none;    outline: none;    border-radius: 2px;    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);}
.lightbox-close {    position: absolute;    top: -40px;    right: 0;    color: #ffffff;    font-size: 2.5rem;    font-weight: 300;    cursor: pointer;    line-height: 1;    transition: color 0.3s ease;}
.lightbox-close:hover {    color: var(--accent-color);}
/* ==========================================================================   7. Global Footer Interface   ========================================================================== */footer {    background-color: var(--primary-color);    color: #ffffff;    padding: 5rem 5% 2.5rem 5%;}
.footer-content {    max-width: 1200px;    margin: 0 auto 4rem auto;    display: grid;    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));    gap: 3rem;}
.footer-brand h3 {    color: #ffffff;    font-size: 1.4rem;    margin-bottom: 1.25rem;}
.footer-brand p {    color: #b0b0b0;    font-size: 0.95rem;    line-height: 1.6;}
.footer-links h4, .footer-social h4 {    font-family: var(--font-heading);    color: var(--accent-color);    margin-bottom: 1.5rem;    font-size: 1.15rem;    font-weight: 400;}
.footer-links a, .footer-social a {    display: block;    color: #cccccc;    margin-bottom: 0.9rem;    font-size: 0.95rem;    width: fit-content;}
.footer-links a:hover, .footer-social a:hover {    color: var(--accent-color);}
.footer-bottom {    text-align: center;    padding-top: 2.5rem;    border-top: 1px solid rgba(255, 255, 255, 0.08);    font-size: 0.85rem;    color: #888888;    letter-spacing: 0.5px;}
/* ==========================================================================   8. Device Fluidity & Media Breakpoints   ========================================================================== */@media (max-width: 992px) {    header h1 {        font-size: 3.25rem;    }}
@media (max-width: 768px) {    nav {        padding: 1.75rem 5%;    }
    .menu-toggle {        display: block;        z-index: 1001;    }        .nav-links {        position: fixed;        top: 0;        right: -100%;        width: 75%;        height: 100vh;        background-color: var(--primary-color);        flex-direction: column;        justify-content: center;        align-items: center;        gap: 3rem;        transition: right 0.4s cubic-bezier(0.16, 1, 0.3, 1);        z-index: 1000;        box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);    }
    .nav-links.active {        right: 0;    }
    .nav-links li a {        font-size: 1.1rem;    }
    header {        min-height: 560px;    }
    header h1 {        font-size: 2.5rem;    }        .hero-p {        font-size: 1.05rem;        margin-bottom: 2rem;    }
    .cta-group {        flex-direction: column;        gap: 1.25rem;        width: 100%;        max-width: 320px;        margin: 0 auto;    }
    .btn-primary, .link-secondary {        width: 100%;        text-align: center;    }        .link-secondary {        border-bottom: none;        padding: 12px;        background: rgba(255, 255, 255, 0.08);        border-radius: 2px;    }
    .section-padding, .letter-section, .local-expertise-section {        padding: 4.5rem 5%;    }
    .section-intro {        margin-bottom: 3rem;    }
    .section-intro h2, .letter-container h2, .expertise-content h2 {        font-size: 2rem;    }
    .pillars-grid {        grid-template-columns: 1fr;    }
    .award-container {        flex-direction: column;    }
    .award-card {        width: 100%;    }    .location-badge {  display: inline-flex;  align-items: center;  gap: 0.4rem;  padding: 0.7rem 1rem;  border-radius: 999px;  background: rgba(255, 255, 255, 0.08);  color: #fff;  text-decoration: none;  border: 1px solid rgba(255, 255, 255, 0.18);  width: fit-content;}    .location-badge:hover {  background: rgba(255, 255, 255, 0.14);}}
/* ==========================================================================   9. AVAILABILITY CALENDAR SECTION   ========================================================================== */
.availability-calendar-wrapper {    max-width: 900px;    margin: 0 auto;    background: #ffffff;    padding: 3rem 2.5rem;    border: 1px solid #eeeeee;    border-radius: 4px;    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);}
.room-selector {    margin-bottom: 2.5rem;    text-align: center;}
.room-selector label {    font-family: var(--font-heading);    font-size: 1.1rem;    color: var(--primary-color);    margin-right: 1rem;    font-weight: 500;}
.room-selector select {    padding: 0.8rem 1.5rem;    font-size: 1rem;    border: 1px solid #cccccc;    border-radius: 4px;    background-color: #ffffff;    color: var(--primary-color);    cursor: pointer;    font-family: var(--font-body);    transition: border-color 0.3s ease, box-shadow 0.3s ease;}
.room-selector select:hover,.room-selector select:focus {    border-color: var(--accent-color);    outline: none;    box-shadow: 0 0 0 3px rgba(197, 160, 114, 0.1);}
.calendar-container {    margin: 2.5rem 0;}
.calendar-header {    display: flex;    justify-content: space-between;    align-items: center;    margin-bottom: 2rem;}
.calendar-header h3 {    font-size: 1.5rem;    color: var(--primary-color);    margin: 0;    flex: 1;    text-align: center;}
.nav-button {    background-color: var(--accent-color);    color: #ffffff;    border: none;    padding: 10px 20px;    font-size: 0.9rem;    border-radius: 2px;    cursor: pointer;    transition: background-color 0.3s ease;    font-weight: 500;    font-family: var(--font-body);}
.nav-button:hover {    background-color: #b38f62;}
.weekdays-header {    display: grid;    grid-template-columns: repeat(7, 1fr);    gap: 8px;    margin-bottom: 1rem;}
.weekday {    text-align: center;    font-weight: 600;    font-size: 0.9rem;    color: var(--primary-color);    text-transform: uppercase;    letter-spacing: 0.5px;    padding: 0.75rem 0;}
.calendar-grid {    display: grid;    grid-template-columns: repeat(7, 1fr);    gap: 8px;    margin-bottom: 2rem;}
.calendar-day {    aspect-ratio: 1;    display: flex;    align-items: center;    justify-content: center;    border: 1px solid #eeeeee;    border-radius: 4px;    font-size: 0.9rem;    cursor: pointer;    transition: all 0.3s ease;    background-color: #fafafa;    color: var(--text-color);    font-weight: 500;}
.calendar-day.empty {    background-color: transparent;    border: none;    cursor: default;}
.calendar-day.available {    background-color: #f0f8f4;    border-color: #4caf50;    cursor: pointer;}
.calendar-day.available:hover {    background-color: #e0f2ea;    border-color: #45a049;    transform: scale(1.05);}
.calendar-day.booked {    background-color: #ffebee;    border-color: #f44336;    color: #c62828;    cursor: not-allowed;    opacity: 0.6;}
.calendar-day.booked:hover {    transform: none;}
.calendar-day.checking {    background-color: #fff3e0;    border-color: #ff9800;    animation: pulse 1.5s infinite;}
.calendar-day.selected {    background-color: var(--accent-color);    color: #ffffff;    border-color: var(--accent-color);    font-weight: 700;}
.calendar-day.in-range {    background-color: rgba(197, 160, 114, 0.2);    border-color: var(--accent-color);}
@keyframes pulse {    0%, 100% {        opacity: 1;    }    50% {        opacity: 0.7;    }}
.availability-legend {    display: flex;    justify-content: center;    gap: 2.5rem;    margin-bottom: 2rem;    flex-wrap: wrap;}
.legend-item {    display: flex;    align-items: center;    gap: 0.75rem;    font-size: 0.95rem;    color: var(--text-color);}
.legend-box {    width: 20px;    height: 20px;    border-radius: 2px;    border: 1px solid #cccccc;}
.legend-box.available {    background-color: #f0f8f4;    border-color: #4caf50;}
.legend-box.booked {    background-color: #ffebee;    border-color: #f44336;}
.legend-box.checking {    background-color: #fff3e0;    border-color: #ff9800;}
.selected-dates {    text-align: center;    padding: 1.5rem;    background-color: var(--bg-color);    border-radius: 4px;    margin-bottom: 2rem;}
.selected-dates p {    font-size: 1rem;    color: var(--text-color);    margin: 0;}
.availability-cta {    display: flex;    justify-content: center;    margin-bottom: 2rem;}
.availability-cta .btn-primary {    min-width: 200px;}
.availability-cta .btn-primary:disabled {    background-color: #cccccc;    cursor: not-allowed;    opacity: 0.6;}
.sync-info {    text-align: center;    padding-top: 1.5rem;    border-top: 1px solid #eeeeee;    font-size: 0.85rem;    color: #888888;}
.sync-info p {    margin: 0.25rem 0;}
.sync-status {    font-weight: 500;    color: var(--accent-color);}
/* Mobile Responsiveness */@media (max-width: 768px) {    .availability-calendar-wrapper {        padding: 2rem 1.5rem;    }
    .calendar-header {        flex-wrap: wrap;        gap: 1rem;    }
    .calendar-header h3 {        width: 100%;        order: 2;    }
    .nav-button {        flex: 1;        padding: 8px 12px;        font-size: 0.85rem;    }
    .calendar-day {        font-size: 0.8rem;    }
    .availability-legend {        gap: 1.5rem;    }
    .legend-item {        font-size: 0.85rem;    }}

PART 3: Calendar JavaScript Logic

Create a new file called calendar.js and add this code:
javascript

// =================================================================// AVAILABILITY CALENDAR SYSTEM// Real-time sync with Airbnb & Booking.com// =================================================================
class AvailabilityCalendar {    constructor() {        this.currentDate = new Date();        this.checkInDate = null;        this.checkOutDate = null;        this.selectedRoom = 'all';        this.availabilityData = {};        this.lastSyncTime = null;        this.syncInterval = 3 * 60 * 1000; // 3 minutes in milliseconds
        this.initElements();        this.initEventListeners();        this.syncAvailability();        this.startAutoSync();    }
    initElements() {        this.roomSelect = document.getElementById('room-select');        this.calendarMonthYear = document.getElementById('calendar-month-year');        this.calendarGrid = document.getElementById('calendar-grid');        this.prevMonthBtn = document.getElementById('prev-month');        this.nextMonthBtn = document.getElementById('next-month');        this.checkAvailabilityBtn = document.getElementById('check-availability-btn');        this.dateSelectionInfo = document.getElementById('date-selection-info');        this.lastSyncTimeSpan = document.getElementById('last-sync-time');    }
    initEventListeners() {        this.prevMonthBtn.addEventListener('click', () => this.previousMonth());        this.nextMonthBtn.addEventListener('click', () => this.nextMonth());        this.roomSelect.addEventListener('change', (e) => {            this.selectedRoom = e.target.value;            this.renderCalendar();        });        this.checkAvailabilityBtn.addEventListener('click', () => this.proceedToBooking());    }
    previousMonth() {        this.currentDate.setMonth(this.currentDate.getMonth() - 1);        this.renderCalendar();    }
    nextMonth() {        this.currentDate.setMonth(this.currentDate.getMonth() + 1);        this.renderCalendar();    }
    // Sync availability data from backend    async syncAvailability() {        try {            const response = await fetch('/api/sync-availability.php', {                method: 'POST',                headers: {                    'Content-Type': 'application/json',                },                body: JSON.stringify({                    rooms: ['room1', 'room2', 'room4'],                    timestamp: new Date().toISOString()                })            });
            if (response.ok) {                this.availabilityData = await response.json();                this.lastSyncTime = new Date();                this.updateSyncTime();                this.renderCalendar();            }        } catch (error) {            console.error('Sync error:', error);            // Fallback to demo data if sync fails            this.loadDemoData();        }    }