/* Container */
.bb-kalkulator-container {
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  padding: 20px;
  margin: 0 auto 30px;
  max-width: 1200px;
}

/* Titel */
.bb-kalkulator-title {
  margin-bottom: 30px;
  font-size: 1.8em;
  text-align: center;
  font-weight: 600;
}

/* Schritte */
.bb-step {
  margin: 0 20px 30px;
  padding: 20px;
  background: #fafafa;
}
.bb-step-title {
  margin-bottom: 20px;
  font-size: 1.3em;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

/* Form-Abstand */
.elementor-form,
.elementor-form .elementor-form-fields-wrapper {
  padding: 0 20px 20px !important;
}

.elementor-form {
  padding: 0 !important;
  margin: 0 !important;
}

/* Inputs allgemein */
.bb-label,
.elementor-field-label {
  display: block;
  margin-top: 12px;
  margin-bottom: 8px;
  font-weight: 600;
}

.elem

.bb-input,
.elementor-form .elementor-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  outline: none;
  border-radius: 0;
}
.bb-input:focus,
.elementor-form .elementor-field:focus {
  border-color: #e07110;
}

/* Button-Gruppe */
.bb-buttons-group {
  margin: 0 0px 20px;
  margin-top: 20px;
  display: flex;
  gap: 10px;
}
.bb-btn {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  cursor: pointer;
  background: #fff;
  color: #e07110 !important;
  border: 2px solid #e07110;
  border-radius: 0;
  font-size: 1em;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.bb-btn:hover {
  background: #e07110;
  color: #ffffff !important;
}

/* Offerten-Form Submit-Button */
.elementor-form .elementor-button {
  width: calc(100% - 40px);
  margin: 0 20px 00px;
  // padding: 12px 0;
  background: #fff;
  color: #e07110;
  border: 2px solid #e07110;
  border-radius: 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.elementor-form .elementor-button:hover {
  background: #e07110;
  color: #fff;
}

/* Offerten-Liste */
#bb_offerte_container {
  margin: 30px 20px 0;
}
.bb-offerte-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
.bb-offerte-table th,
.bb-offerte-table td {
  padding: 8px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

/* Gewebe- und Farbe-Grid */
.bb-gewebe-options,
.bb-farbe-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  margin: 20px;
}
.bb-gewebe-option,
.bb-farbe-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px;
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
  border-radius: 0;
}
.bb-gewebe-option:hover,
.bb-farbe-option:hover {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.bb-gewebe-option.selected,
.bb-farbe-option.selected {
  border-color: #e07110;
  box-shadow: 0 0 0 2px #e07110;
}

/* Bilder und Swatches */
.bb-gewebe-image img,
.bb-farbe-image img,
.color-swatch {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 4px;
  margin-bottom: 12px;
}

/* Farb-Labels + Excerpt */
.bb-farbe-label {
  font-size: 0.95em;
  font-weight: 600;
  text-align: center;
  margin-bottom: 6px;
}
.bb-farbe-excerpt {
  font-size: 0.85em;
  color: #666;
  text-align: center;
}
/* 1) Abstand links/rechts um das Formular */
.elementor-form.bb-offerte-form {
  margin: 0 40px; /* je nach Wunsch */
}

/* 2) Abstand zwischen den Feldgruppen */
.elementor-form .elementor-field-group {
  padding: 0 10px; /* links/rechts Puffer */
  margin-bottom: 30px; /* vertikaler Abstand */
}

/* 3) Entferne alle Rundungen und setze weiße Buttons mit orangem Rahmen/Text */
.elementor-form .elementor-button {
  background-color: #fff !important;
  color: var(--e-global-color-e07110f) !important; /* euer Orange */
  border: 2px solid var(--e-global-color-e07110f) !important;
  border-radius: 0 !important;
  font-weight: 700 !important;
}

/* 4) Hover-Zustand: oranger Hintergrund, weißer Text */
.elementor-form .elementor-button:hover {
  background-color: var(--e-global-color-e07110f) !important;
  color: #fff !important;
}

/* 5) Inputs eckig statt abgerundet */
.elementor-form .elementor-field,
.elementor-form .elementor-field input,
.elementor-form .elementor-field textarea {
  border-radius: 0 !important;
}

/* 6) Feld-Labels etwas schwerer und mit Abstand */
.elementor-form .elementor-field-label {
  font-weight: 600;
  margin-bottom: 8px;
}

/* 7) Für Mobile: zwei Spalten untereinander */
@media (max-width: 767px) {
  .elementor-form .elementor-column {
    width: 100% !important;
    display: block !important;
  }
}

#bb_offerte_form_submit {
  width: calc(100% - 40px);
  // margin: 0 20px 20px;
  padding: 12px 0;
  color: #fff;
  background: #e07110;
  border: 2px solid #e07110;
  border-radius: 0;
  text-align: center;
  font-size: 1em;
  font-weight: 700;
  transition: background 0.2s, color 0.2s;
}

/* Hover: oranger Hintergrund & weißer Text */
#bb_offerte_form_submit:hover {
  color: #e07110;
  background: #fff;
}

/* 1) Flex-Verteilung + Ausrichtung */
.bb-buttons-group {
  display: flex;
  justify-content: space-between; /* Buttons links + rechts ausrichten */
  gap: 10px;
}

/* 2) Buttons gleich breit, kein Umbruch, Border/Padding in der Breite */
.bb-buttons-group .bb-btn {
  flex: 1 1 0; /* alle Buttons bekommen den gleichen Anteil */
  box-sizing: border-box; /* width/flex-basis = Padding + Border + Inhalt */
  white-space: nowrap; /* kein Zeilenumbruch im Button-Text */
}

/* 1) Wrappers nicht mehr horizontal ausdehnen lassen */
.bb-button-container,
#bb_offerte_container {
  /* entferne die alten horizontalen Margins (ursprünglich 20px links/rechts) */
  margin: 30px 0 0; /* nur oben Margin behalten */

  /* stattdessen 20px Innen-Abstand, damit Buttons im Pufferbereich der Step-Box bleiben */
  padding: 0 20px;

  /* sicherstellen, dass Padding in die Breiten-Berechnung mit reingeht */
  box-sizing: border-box;
}