/* ------------ Icons obere Leiste ---------- */
.bootstrap-clock {
  display: inline-block;
  transition: transform 0.3s ease;
}

.bootstrap-telephone {
  display: inline-block;
  transition: transform 0.3s ease;
}

.bootstrap-envelope {
  display: inline-block;
  transition: transform 0.3s ease;
}

.bootstrap-clock:hover {
  animation: wiggle 0.4s ease;
}

.bootstrap-telephone:hover {
  animation: wiggle 0.4s ease;
}

.bootstrap-envelope:hover {
  animation: wiggle 0.4s ease;
}

@keyframes wiggle {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(15deg); }
  50%  { transform: rotate(-10deg); }
  75%  { transform: rotate(8deg); }
  100% { transform: rotate(0deg); }
}
/* ------------ Icons obere Leiste ENDE ---------- */

/* ------------ Logo abgerundete Ecken ---------- */
#item-17635669770801 {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}
/* ------------ Logo abgerundete Ecken ENDE ---------- */

/* ------------ Fixierte Leiste unten ---------- */
#item-1762298160572,
#item-17623546109400,
#item-17623557770320,
#item-17623575049260 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
}
/* ------------ Fixierte Leiste unten ENDE ---------- */

/* ------------ Close Icon ---------- */
.ba-icons.ba-icon-close.ba-overlay-section-close {
  display: inline-block; /* notwendig für transform */
  transition: transform 0.3s ease; /* weiche Animation */
  font-size: 4rem;
  font-weight: 600;
}

.ba-icons.ba-icon-close.ba-overlay-section-close:hover {
  transform: rotate(180deg);
}

.ba-icon-close {
  display: inline-block; /* wichtig, damit transform funktioniert */
  transition: transform 0.3s ease;
  font-weight: 600;
}

.ba-icon-close:hover {
  transform: rotate(180deg);
}
/* ------------ Close Icon ENDE ---------- */

/* ------------ Hot Spot ---------- */
@media (max-width: 1280px) {
.ba-hotspot-backdrop {
  background-color: #ffffff80;
  transition: opacity .3s ease-in-out !important;
  opacity: 1 !important;
  visibility: visible !important;
}
}
/* ------------ Hot Spot ENDE ---------- */

/* ------------ Buchungskalender ---------- */

.ba-form-message-popup.ba-forms-modal-wrapper .ba-forms-modal {
  top: calc(20% - (var(--popup-modal-height)/2) ) !important;
  }

.reservierungsanfrage {
  font-size: 20px;
}

.ba-forms-calendar {
  background: #fff !important;
  border-radius: 15px !important;
  padding: 2rem !important;
}

.disable-previous-date .ba-previous-date {
  color: #aaa !important;
}

.ba-date-cell:hover,
.ba-forms-calendar-body .ba-date-cell.ba-curent-date {
  background: var(--secondary) !important;
}

body .ba-date-cell {
  color: #333333 !important;
  font-size: 18px !important;
  height: 50px !important;
  padding: 10px !important;
  width: 44px !important;
  font-weight: lighter !important;
}

.ba-forms-calendar-title {
  color: #333 !important;
}

.ba-forms-calendar-title-wrapper i {
  background: #fff !important;
  color: #333 !important;
  border: 1px solid #ccc !important;
  padding: 5px !important;
}

option {
  font-size: 18px !important;
  font-family: 'Comfortaa', sans-serif !important;
}

@media (max-width: 768px) {
  .ba-form-field-item.ba-form-headline-field .ba-input-wrapper {
  	--label-typography-text-align: center !important;
	}
  
/* 1) Die ganze Gruppe (Icon + Input) zentrieren */
.ba-field-container {
  text-align: center;
}

/* 2) Wrapper kompakt & als Bezug für absolute Positionierung */
.calendar-field-wrapper {
  display: inline-block;
  position: relative;
  vertical-align: middle;
}

/* 3) Input mittig ausrichten und Platz fürs Icon lassen */
.calendar-field-wrapper input[type="text"] {
  display: inline-block;
  text-align: center;
  width: auto !important;     /* überschreibt evtl. width:100% */
  max-width: 100%;
  min-width: 240px;           /* optional, damit es nicht zu schmal wird */
  padding-left: 2.2rem;       /* Platz für das Icon links */
  box-sizing: border-box;
}

/* 4) Icon INS Feld linksbündig, vertikal mittig */
.calendar-field-wrapper .ba-form-icons {
  position: absolute !important;
  left: 20px;                 /* Icon-Abstand vom linken Rand */
  pointer-events: none;       /* Klicks gehen weiterhin an das Input */
}

.ba-form-field-item.ba-form-text-field .text-content-wrapper,
.ba-form-field-item.ba-form-text-field .text-content-wrapper p,
.ba-form-field-item.ba-form-text-field .text-content-wrapper a {
  text-align: center !important;
  display: block;
  margin: 0 auto;
  padding: 10px 5px;
  border-radius: 15px;
}

.ba-field-container {
  text-align: center !important;
}

.ba-field-container select {
  display: inline-block;
  width: auto !important;     /* überschreibt 100% aus Gridbox */
  min-width: 250px !important;           /* optional, damit es nicht zu klein ist */
  text-align: center !important;         /* Text im Feld mittig */
  text-align-last: center !important;    /* Text im aktiven Auswahlfeld mittig */
}

option {
  text-align: center !important;         /* Text im Feld mittig */
  text-align-last: center !important;    /* Text im aktiven Auswahlfeld mittig */
}

/* 1) Gesamte Gruppe mittig ausrichten */
.ba-input-wrapper {
  text-align: center;
}

/* 2) Label-Bereich mittig setzen */
.ba-field-label-wrapper {
  display: inline-block;
  text-align: center;
  margin-bottom: 5px;
}

/* 3) Eingabefeld mittig darstellen */
.ba-field-container input[type="text"] {
  display: inline-block;
  width: auto !important;     /* sonst 100% breit */
  text-align: center;         /* Text im Feld mittig */
}
  
}

/* ------------ Buchungskalender ENDE ---------- */