:root {
    --nord-blau: #2c3e50;
    --meer-hellblau: #7fa8b1;
    --sand-beige: #f8f9fa;
}

body {
    background-color: var(--sand-beige);
    color: #333;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Hero Section */
.hero-section {
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
                url('/images/ferienhof.jpg?w=1200');
    background-size: cover !important;
    background-position: center !important;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* UI Elemente */
.btn-nord-blau { background-color: var(--nord-blau); color: white; border: none; }
.btn-nord-blau:hover { background-color: #1a252f; color: white; }
.color-nord-blau { color: var(--nord-blau); }

.card { transition: transform 0.3s ease; border-radius: 12px; }
.card:hover { transform: translateY(-5px); }

.gallery-thumb { cursor: pointer; transition: 0.3s; aspect-ratio: 1/1; object-fit: cover; }
.gallery-thumb:hover { opacity: 0.8; transform: scale(1.02); }

/* Animation für Seitenwechsel */
#content-area { animation: fadeIn 0.4s ease-in; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.lead {text-align:center;}

.inline-header {
    text-align:center;
}
.inline-image {
width:300px; 
border-radius: 10px;
  background-color: #f3f3f3;
  padding: 2px;
}

.inline-image-container {
  position: relative;
  text-align: center;
  font-weight:bold;
  font-size:4vh;
  color: white;
}

.inline-header-centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centered 
{
text-align:center;
align:center;}

a { text-decoration:none;}

.nav-link {font-weight:bold;}
.nav-link:hover{color:var(--nord-blau); color: #4169E1;}



        /* 1. Sicherstellen, dass die Spalten in der Reihe gleich hoch sind */
    .equal-height-row {
        display: flex;
        flex-wrap: wrap;
    }

    /* 2. Die Karte muss die volle Höhe der Spalte einnehmen */
    .apartment-card {
        display: flex;
        flex-direction: column;
        height: 100%;
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    /* 3. Der Card-Body wird zum Flex-Container */
    .card-body {
        display: flex;
        flex-direction: column;
        flex: 1; /* Füllt den gesamten vertikalen Raum der Karte */
        padding: 1.5rem;
    }

    /* 4. Der Inhaltsbereich (Titel/Liste) */
    .card-content-wrapper {
        display:block;
        min-height:300px;
        overflow:auto;
    }

    /* 5. DER ANKER: Drückt alles unter ihm nach ganz unten */
    .price-section {
        display:block;
        overflow:auto;
        min-height:340px;
    }

    /* Tabellen-Feinschliff */
    .price-table {
        width: 100%;
        margin-bottom: 1.5rem;
        border-collapse: collapse;
    }
    .price-table th, .price-table td {
        border: 1px solid #eee;
        padding: 10px 5px;
        text-align: center;
        font-size: 0.9rem;
    }
    .price-table th {
        background-color: #f9f9f9;
        font-weight: 600;
    }
    .price-table tbody tr:nth-child(even) {
            background-color: #f9f9f9;
        }
    .season-header {
        font-size: 1rem;
        font-weight: bold;
        margin: 15px 0 10px 0;
        color: #333;
    }


    .highlight-box {padding-bottom: 20px;}


    .booking-container {
        background-color: #ffffff;
        padding: 40px;
        border-radius: 12px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        max-width: 800px;
        margin: 20px auto;
    }
    .form-header {
        text-align: center;
        margin-bottom: 30px;
        border-bottom: 2px solid #3498db;
        padding-bottom: 15px;
    }
    .form-group {
        margin-bottom: 20px;
    }
    .form-label {
        font-weight: 600;
        margin-bottom: 8px;
        display: block;
        color: #2c3e50;
    }
    .form-control, .form-select {
        border-radius: 8px;
        border: 1px solid #dce1e5;
        padding: 12px;
        width: 100%;
        transition: border-color 0.2s;
    }
    .form-control:focus {
        border-color: #3498db;
        outline: none;
        box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
    }
    .date-row {
        display: flex;
        gap: 20px;
    }
    .date-row > div {
        flex: 1;
    }
    .submit-btn {
        background-color: #3498db;
        color: white;
        border: none;
        padding: 15px 30px;
        border-radius: 8px;
        font-weight: bold;
        width: 100%;
        font-size: 1.1rem;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .submit-btn:hover {
        background-color: #2980b9;
    }
    .info-text {
        font-size: 0.9rem;
        color: #7f8c8d;
        margin-top: 15px;
        text-align: center;
    }


    body.modal-open {
        overflow: hidden;
    }

    /* Modal-Design Anpassung */
    .modal-header {
        border-bottom: none;
    }

    .modal-content {
        border-radius: 15px;
    }

    .form-control:focus, .form-select:focus {
        border-color: #3498db;
        box-shadow: 0 0 0 0.25 margin rgba(52, 152, 219, 0.25);
    }

.btn-primary { background-color:#c6c6c6;
    border: 1px solid grey;
}

.btn-primary:hover { background:grey;
    border: 1px solid grey;
}


/* Durch das Voranstellen von .modal-header wird dein Befehl stärker */
.modal-content .modal-header.bg-primary {
    background-color: #c6c6c6 !important;
    color:white;
    text-align:center;
}


.bg-grey {
background-color:#c6c6c6;}

.py-5 { padding-left:5rem;
padding-right:5rem;}