/* ===================
   1) Container Layout
   =================== */
body.booking-page {
    text-align: left;
}

.booking-outer {
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    background-color: #fff;
    border-radius: 10px;
}

/* Dominante Überschrift */
.dominant-heading {
    font-size: 2.5em; 
    text-align: center;
    margin-bottom: 25px;
}

/* ===================
   2) Steps
   =================== */
.steps-container {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    text-align: center;
    flex-wrap: wrap;
}

.step-box {
    flex: 1 1 30%;
    margin: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-number {
    font-size: 2em;
    font-weight: bold;
    margin-right: 8px; 
}

.step-1 .step-number { color: #FF6F00; }
.step-2 .step-number { color: #00ACC1; }
.step-3 .step-number { color: #8BC34A; }

/* ===================
   3) Zweispalten Layout
   =================== */
.booking-columns {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    max-width: 100%;
}
.calendar-section, 
.form-section {
    flex: 1 1 calc(50% - 20px);
}
.calendar-section {
    margin-top: 45px;
    display: flex;
    align-items: top;
    justify-content: center;
}

/* ===================
   4) Kalender
   =================== */
.calendar-wrapper {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: transparent;
    padding: 15px;
}

.calendar-controls {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
    margin-bottom: 10px;
}

.ghost-button {
    background: transparent;
    color: #007b8a;
    border: 1px solid #007b8a;
    border-radius: 4px;
    padding: 5px 5px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 0.7em;
}
.ghost-button:hover {
    background-color: #5bc0de;
    color: #fff;
    border-color: #5bc0de;
}

#toggleOptionalFieldsButton {
    display: inline-block;    /* oder block, je nachdem wie du es haben möchtest */
    margin-bottom: 10px;      /* größerer Abstand nach unten */
    margin-top: 15px;      /*optional auch nach oben */
}

.calendar-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    justify-content: center;
    margin-bottom: 5px;
    font-size: 0.8em;
    color: #666;
    text-align: center;
}
.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    justify-content: center;
    margin: 0 auto;
}
.calendar-cell {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 15px 10px;
    text-align: center;
    border-radius: 6px;
    transition: background-color 0.3s, box-shadow 0.3s;
}
.calendar-cell.empty {
    background-color: #fafafa;
    border-color: #eee;
    color: #aaa;
}
.calendar-cell:hover {
    background-color: #e0f7fa;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.day-cell {
    cursor: pointer;
}
/* Selektierter Tag => babyrosa */
.calendar-cell.selected {
    background-color: #ffc0cb !important;
    box-shadow: 0 0 0 2px #fca4b7 inset;
}

/* ===================
   5) Formular
   =================== */
label {
    font-weight: bold;
    text-align: left;
    font-size: 0.75em; /* oder 0.8em, je nachdem wie klein du es möchtest */
}
.required {
    color: red;
}
#bookingMessage {
    margin-bottom: 15px;
    color: red;
    font-weight: bold;
}
.form-field {
  margin-bottom: 15px; /* oder 20px, nach Wunsch */
}

input,
textarea,
select {
    margin-top: 5px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}
#package {
    font-size: 1.1em;
    border: 1px solid #007b8a;
    background-color: #f4f9fd;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: border-color 0.3s, box-shadow 0.3s;
}
#package:focus {
    border-color: #5bc0de;
    box-shadow: 0 0 6px rgba(91,192,222,0.5);
}
/* Senden-Button */
button {
    background-color: #007b8a;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
}
button:hover {
    background-color: #5bc0de;
}
button:disabled {
    background-color: #ccc !important;
    cursor: not-allowed;
}
/* Spinner */
.loading-spinner {
    display: none;
    margin-top: 20px;
    text-align: center;
}
.loading-spinner img {
    width: 40px;
    height: 40px;
}

/* ===================
   6) Event-Buttons
   =================== */
#additionalEvents {
    display: none;
    flex-wrap: wrap;
    margin-top: 10px;
}
.event-buttons button {
    background-color: #b3d9ff;
    color: #333;
    border: none;
    padding: 6px 12px;
    border-radius: 12px;
    margin: 5px 5px 0 0;
    cursor: pointer;
    transition: background-color 0.3s;
    font-size: 0.9em;
}
.event-buttons button:hover {
    background-color: #a3d0ff;
}
.moreEventsButton {
    background-color: #f0f0f0;
    color: #007b8a;
    border: 1px solid #007b8a;
    transition: all 0.3s;
    font-size: 0.9em;
}
.moreEventsButton:hover {
    background-color: #5bc0de;
    color: #fff;
}
/* Geklickter Event-Button => babyrosa */
.event-button-selected {
    background-color: #ffc0cb !important;
    color: #fff !important;
}
.info-text {
    font-size: 80%; 
}

/* ===================
   7) Responsive
   =================== */
@media (max-width: 600px) {
  .steps-container {
    flex-direction: column;
    align-items: flex-start;
  }
  .step-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: left;
  }
  .step-number {
    margin-right: 12px;
    margin-bottom: 0;
    font-size: 1.8em;
  }
  .step-text {
    flex-grow: 1;
    text-align: left;
  }

  .booking-columns {
    flex-direction: column;
  }
  .calendar-section {
    margin-top: 0px;
    align-items: flex-start;
  }
  .calendar-wrapper {
    width: 100%;
    max-width: 100%;
    padding: 10px;
  }
  .calendar-header {
    grid-template-columns: repeat(7, 1fr);
  }
  .calendar-grid {
    grid-template-columns: repeat(7, 1fr);
  }
  .calendar-cell {
    padding: 5px;
  }

  .booking-button {
    background-color: #00ACC1; /* Türkisblau */
  }
  button {
    margin: 10px 0;
  }
}

/* Grundstil der Textarea */
.expandable-textarea {
    width: 200px;
    height: 30px;
    padding: 5px;
    font-family: Arial, sans-serif;
    resize: none;
    transition: all 0.3s ease;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.expandable-textarea:focus {
    width: 100%;
    height: 100px;
    border-color: #007bff;
    outline: none;
}

.sendForm-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.sendForm-container > * {
    flex: 1 1 calc(50% - 10px);
    box-sizing: border-box;
}

.plzEmail-container {
  display: flex;
  gap: 20px;         /* Abstand zwischen PLZ und E-Mail-Spalte */
  align-items: flex-start; /* Falls Du möchtest, dass die Labels oben beginnen */
  width: 100%;
}

.plz-container,
.email-container {
  display: flex;
  flex-direction: column;  /* Label über Input */
}

/* Die E-Mail-Spalte soll sich den restlichen Platz nehmen */
.email-container {
  flex: 1;
}

/* Beide Inputs sollen im jeweiligen Container die gesamte Breite nutzen */
.plzEmail-input {
  width: 100%;
  box-sizing: border-box;
}

/* Die PLZ hat weiterhin eine feste Breite */
#postalCode {
  width: 5.5em;
  text-align: center;
}


/* Eingeklappter Bereich (Optionals) */
.optional-fields {
    display: none;      /* Eingeklappter Bereich standardmäßig versteckt */
    margin-top: 10px;   /* Du kannst den Abstand lassen, wenn du willst */
    /* Entferne Rand, Hintergrundfarbe, extra Padding usw.: */
    /* border: none; */
    /* padding: 0; */
    /* background-color: transparent; */
}

/* Beim Aufklappen */
.optional-fields.show {
    display: block;
}


/*Drop Down Karten Design - Pakete*/
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.package-card {
  border: 2px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #fff;
}
.package-card:hover {
  border-color: #007b8a;
  background-color: #f0fbff;
}
.package-card.selected {
  border-color: #007b8a;
  background-color: #e0f7fa;
}
.package-card .title {
  font-weight: bold;
  font-size: 1em;
  margin-bottom: 4px;
}
.package-card .price {
  font-size: 1.1em;
  color: #007b8a;
  margin-bottom: 2px;
}
.package-card .details {
  font-size: 0.85em;
  color: #fff;
}

/* 🧾 Standard-Textfarbe für nicht-selektierte Karten */
.package-card .title,
.package-card .price,
.package-card .details {
  color: #333; /* Dunkelgrau für gute Lesbarkeit auf blassem Hintergrund */
}

/* 🟢 Wenn Karte ausgewählt: Text hell auf kräftigem Hintergrund */
.package-card.selected .title,
.package-card.selected .price,
.package-card.selected .details {
  color: #fff !important;
}

.review-optin {
  margin-top: 20px;
  padding: 12px;
  background-color: #f7fbff;
  border-left: 4px solid #00ACC1;
  border-radius: 6px;
  font-size: 0.85em;
}

/*BEWERTUNG EINWILLIGUNG*/
.review-optin-line {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  font-size: 0.85em;
  flex-wrap: nowrap; /* WICHTIG: Kein Umbruch auch bei kleinen Screens */
}

.review-optin-checkbox {
  flex: 0 0 24px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.review-optin-text {
  flex: 1;
  padding-left: 5px;
  color: #333;
  line-height: 1.4;
}

.review-optin-text label {
  cursor: pointer;
}

.review-optin-line input[type="checkbox"] {
  transform: scale(1.2);
  accent-color: #00ACC1;
}



@media (max-width: 600px) {
  .package-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* 🟦 Grundzustand: blasse Originalfarben */
.package-card.cheap {
  background-color: rgba(142, 68, 173, 0.08); /* Violett */
}
.package-card.premium {
  background-color: rgba(246, 202, 11, 0.08); /* Goldgelb */
}
.package-card.deluxeMidrange {
  background-color: rgba(192, 200, 210, 0.08); /* Silbergrau */
}

.package-card.cheap,
.package-card.premium,
.package-card.deluxeMidrange {
  opacity: 0.6;
  transition: opacity 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

/* Hover: etwas mehr Sichtbarkeit */
.package-card:hover:not(.selected) {
  opacity: 0.8;
}

/* ✅ Selektierte Karte: volle Farbe/Verlauf + sichtbarer Rahmen */
.package-card.selected.cheap {
  background-color: #8e44ad;
  color: #fff;
}
.package-card.selected.deluxeMidrange {
  background: linear-gradient(
    135deg,
    #e0e0e0 0%,     
    #cfd8dc 20%,    
    #b0bec5 40%,    
    #cfd8dc 60%,    
    #e0e0e0 80%,    
    #cfd8dc 100%
  );
  color: #000;
}
.package-card.selected.premium {
  background: linear-gradient(
    135deg,
    #f9e784 0%,    
    #f6ca0b 20%,   
    #f1b600 40%,   
    #f6ca0b 60%,   
    #f9e784 80%,   
    #f6ca0b 100%
  );
  color: #000;
}

.package-card.selected {
  opacity: 1 !important;
  box-shadow: 0 0 0 3px rgba(0, 123, 138, 0.4);
}

/*Bestseller eticket*/
.package-card .badge {
  position: absolute;
  top: -10px;
  right: -10px;
  background: #f6ca0b;
  color: #000;
  font-weight: bold;
  padding: 2px 5px;
  font-size: 0.7em;
  border-radius: 2px;
  box-shadow: 0 0 3px rgba(0,0,0,0.2);
  z-index: 2;
}
.package-card.bestseller {
  position: relative; /* notwendig für .badge */
}
/*ENDE Bestseller eticket*/