/* 
    1. Allgemein
    2. Banner
    3. Datepicker
    4. Header
    5. Footer
    6. Buchen
    7. Buchungsbestätigung
*/

/* 1. Allgemein */

.btn-primary {
    background-color: #622850;
    border-color: #622850;
    color: #ffffff;
}

.btn-primary:hover {
    background-color: #411a34;
    border-color: #411a34;
    color: #ffffff;
}

.mt-20 {
    margin-top: 20px!important;
}

.mt-70 {
    margin-top: 70px!important;
}

.mb-20 {
    margin-bottom: 20px!important;
}

.card-header {
    background-color: #f3eee2!important;
}

.card-header .card-title {
    margin-bottom: 0!important;
}


/* 2. Banner */

.banner-wrapper {
    background-color: #ffffff;
    padding: 130px 0;
}

.banner-wrapper .banner-titel {
    margin-bottom: 25px;
    font-weight: 700;
    font-size: 40px;
    color: #622850;
}

.banner-wrapper .banner-text {
    font-size: 20px;
    color: #333;
}

.banner-wrapper .preis-wrapper {
    display: flex;
    align-items: end;
    justify-content: center;
}

.banner-wrapper .preis-wrapper p {
    font-weight: 700;
    font-size: 25px;
    color: #622850;
}

.banner-wrapper button#zur_buchungsseite {
    font-weight: bold;
}

.banner-wrapper span.required {
    display: none;
}

.banner-wrapper .banner-form-card {
    background-color: #f3eee2;
}

/* 3. Datepicker */

.ui-datepicker {
    background-color: #ffffff;
    border: 1px solid #ced4da;
    border-radius: 4px;
    padding: 10px;
}

.ui-datepicker th{
    padding: 5px;
}

.ui-datepicker td {
    border-radius: 5px;
    padding: 5px;
}

.ui-datepicker td:hover {
    background-color: #f2f3f1;
    color: #333;
}

.ui-datepicker td.ui-datepicker-current-day {
    background-color: #622850;
}

.ui-datepicker td a{
    color: #333;
}

.ui-datepicker td a:hover {
    text-decoration: none;
}

.ui-datepicker td.ui-datepicker-current-day a{
    color: #ffffff!important;
}

.ui-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ui-datepicker-title {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0;
}

.ui-datepicker-prev,
.ui-datepicker-next {
    position: static !important;
    cursor: pointer;
}


/* 4. Header */

.header {
    width: 100%;
    background: #3c1028;
    z-index: 999;
    top: 0;
    padding: 15px 0;
    position: sticky;
}

.site-menu-main .nav-item {
    list-style: none;
    float: left;
    display: flex;
    align-items: center;
}

.site-menu-main .nav-link-item {
    font-size: 20px;
    padding: 10px 20px;
    color: #f3eee2;
}

.site-menu-main .nav-link-item:hover {
    text-decoration: none;
}


/* 5. Footer */

.footer {
    background-color: #444444;
    color: #ffffff;
    padding: 100px 0 20px 0;
    font-size: 14px;
}

.footer .row_kontakt p {
    margin-top: 20px;
}

.footer .row_kontakt p i {
    margin-right: 5px;
    background-color: #622850;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.footer .row_navigation ul {
    list-style-type: none;
    padding-left: 0;
}

.footer .row_navigation ul li a{
    color: #ffffff!important;
}

.footer .row_navigation ul li{
    padding-bottom: 8px;
}

/* 6. Buchen */

.buchen-wrapper {
    padding-top: 100px;
    padding-bottom: 100px;
}

.buchen-wrapper .buchungsdetails {
    list-style: none;
    padding-left: 0;
}

.buchen-wrapper .buchungsdetails li p {
    margin-top: 5px;
}

.buchen-wrapper .buchungsdetails li {
    border-bottom: 1px solid rgba(128, 137, 150, 0.1);
    padding-top: 10px;
}

.buchen-wrapper .preis-wrapper {
    font-weight: 700;
    font-size: 25px;
    color: #622850;
}

.buchen-wrapper button#buchen {
    font-weight: bold;
}


/* 7. Buchungsbestätigung */

.buchungsbestaetigung-wrapper {
    padding-top: 100px;
    padding-bottom: 100px;
}