/* Grundlegende Einstellungen */
body {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: #f0f0f0;
    background-color: #2F3828; 
    line-height: 1.6;
}

/* Links */
a { color: #A8C69F; text-decoration: none; transition: 0.3s; }
a:hover { color: #fff; }

/* Navigation */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background: rgba(47, 56, 40, 0.95);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #3E4A36;
}
.logo { font-weight: bold; letter-spacing: 2px; font-size: 1.2rem; }
.nav-links { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
.nav-links li a { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #f0f0f0; }
.nav-links li a:hover { color: #A8C69F; }

/* Hero Section */
.hero {
    height: 80vh;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('hero.jpg') no-repeat center center/cover;
    background-color: #262e21; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}
.hero h1 { font-size: 3.5rem; margin-bottom: 10px; font-weight: 300; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hero p { font-size: 1.2rem; margin-bottom: 30px; color: #eee; text-shadow: 0 1px 3px rgba(0,0,0,0.5); }
.btn {
    padding: 12px 30px;
    border: 1px solid #fff;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.8rem;
    background: rgba(0,0,0,0.2);
}
.btn:hover { background: #fff; color: #2F3828; }

/* Sektionen */
.container { max-width: 1000px; margin: 0 auto; padding: 80px 20px; }
.dark-section { background-color: #262e21; }

h2 { font-size: 2rem; margin-bottom: 40px; font-weight: 300; border-bottom: 1px solid #3E4A36; display: inline-block; padding-bottom: 10px; }
h3 { font-size: 1.3rem; margin-bottom: 15px; color: #A8C69F; }

/* Grid Layouts */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }

/* MOSAIK GALERIE (NEU) */
.gallery-mosaic {
    display: grid;
    /* Bilder sind jetzt sehr klein (min. 120px) und füllen den Platz aus */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
    gap: 8px; /* Kleiner Abstand für Mosaik-Effekt */
}

.gallery-mosaic img {
    width: 100%;
    height: 120px; /* Quadratische Kacheln */
    object-fit: cover; /* Wichtig: Schneidet Bilder zu, damit sie gleich gross sind */
    border-radius: 2px;
    transition: transform 0.2s ease;
    opacity: 0.85; /* Leicht transparent für coolen Look */
}

.gallery-mosaic img:hover {
    transform: scale(1.1); /* Zoomt stärker heran */
    opacity: 1; /* Wird hell beim Drüberfahren */
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* Karten & Boxen */
.card, .info-box {
    background: #36402E;
    padding: 30px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}

/* KALENDER (NEU) */
.calendar-wrapper {
    background: #fff; /* Google Kalender braucht einen weissen Hintergrund, damit er gut aussieht */
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* Preislisten Design */
.price-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #4a5740;
    padding: 10px 0;
    margin-bottom: 10px;
}
.price { font-weight: bold; color: #fff; }
.small-text { font-size: 0.9rem; color: #ccc; margin-top: 10px; display: block; }
.cost-list, .room-list { list-style: none; padding: 0; }
.cost-list li { margin-bottom: 8px; border-bottom: 1px solid #4a5740; padding-bottom: 8px; }
.room-list li { margin-bottom: 10px; }

/* Bilder allgemein */
.image-block img { max-width: 100%; border-radius: 4px; }

/* Footer */
footer { background: #1E241A; padding: 60px 0; text-align: center; border-top: 1px solid #3E4A36; }
.contact-large { font-size: 1.5rem; margin: 10px 0; font-weight: bold; color: #fff; }

/* Mobile Anpassung */
@media (max-width: 768px) {
    .grid, .grid-3 { grid-template-columns: 1fr; }
    .hero h1 { font-size: 2.5rem; }
    .nav-links { display: none; } 
    .container { padding: 40px 20px; }
    /* Auf dem Handy noch kleinere Kacheln, damit 3-4 nebeneinander passen */
    .gallery-mosaic { grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 4px; } 
    .gallery-mosaic img { height: 80px; }
    /* Kalender auf dem Handy etwas kürzer machen */
    .calendar-wrapper iframe { height: 450px; }
}