.bh-form {
    max-width: 600px;
    margin: auto;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 8px;
}

/* Einheitliches Styling fr Inputs, Textareas und SELECT */
.bh-form input[type="text"],
.bh-form input[type="number"],
.bh-form input[type="email"],
.bh-form input[type="time"],
.bh-form input[type="tel"],
.bh-form select,
.bh-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: #fff;
}


#datepicker {
    margin-bottom: 10px;
}

.et_pb_button_module_wrapper {
    text-align: center;
    margin-top: 15px;
}

.et_pb_button {
    color: #FFFFFF !important;
    border-width: 0px !important;
    border-radius: 8px;
    letter-spacing: 1px;
    font-size: 18px;
    font-family: 'Unica One', display !important;
    padding-right: 0.7em;
    padding-left: 2em;
    background-color: #8084C0;
    margin-left: 0;
}

/* Custom Style fr den jQuery UI Datepicker Header */
.ui-datepicker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

/* Optional: Entfernt zustzlichen Abstand oder Rnder */
.ui-datepicker-prev,
.ui-datepicker-next {
    margin: 0;
    padding: 0 5px;
    cursor: pointer;
}

/* Falls du die Pfeile noch weiter anpassen mchtest */
.ui-icon, .ui-datepicker-title {
    font-size: 18px;
}

.ui-datepicker-unselectable {
    color: lightgray;
    text-decoration-line: line-through;
    cursor: not-allowed;
}

a.ui-state-default {
    color: #D0AD54;
    font-weight: 700;
    padding: 3px;
}

/* Markierung des ausgewhlten Datums */
.ui-datepicker td.ui-datepicker-current-day a {
    background-color: #8084C0;   /* Dein gewnschter Farbton */
    color: #ffffff;              /* Textfarbe */
    border-radius: 50%;          /* Kreisfrmige Darstellung */
    font-weight: bold;
    transition: background-color 0.3s ease;
    padding: 3px;
}

/* Optional: Hover-Effekt fr alle Tage */
.ui-datepicker td a:hover {
    background-color: #c2c5e0;
    color: #000;
    border-radius: 50%;
    padding: 3px;
}


.reserve-btn {
  background-color: #8084C0 !important;
  cursor: pointer;
}

.reserve-btn:hover {
  background-color: #6b70bf !important;
  cursor: pointer;
}

.bh-form-row {
    display: flex;
    gap: 10px; /* Regel: Abstand zwischen Feldern */
}

/* 2) Verstecken/Einblenden */
.bh-hidden {
    display: none;
}