/* === BAUTRAEGER PAGE === */

.bt-wrap {
  padding-top: 100px;
  padding-bottom: 100px;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* HERO */
.bt-hero {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
}

.bt-hero__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 96px;
  line-height: 96px;
  letter-spacing: -0.01em;
  color: var(--color-text-heading);
  margin: 0;
  white-space: pre-line;
  overflow-wrap: break-word;
}

.bt-hero__intro {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 19.2px;
  line-height: 26.88px;
  color: var(--color-text-heading);
  max-width: 540px;
  margin: 0;
}

.bt-hero__media {
  position: relative;
  width: 100%;
  height: 581px;
  border-radius: 25px;
  background: url('../assets/bautraeger/image-1.webp') center/cover no-repeat, var(--color-surface-muted);
  margin-top: 20px;
  margin-bottom: 40px;
}

.bt-hero__quote {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -40px;
  background: var(--color-surface);
  border-radius: 20px;
  padding: 28px 32px;
  width: 460px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bt-hero__quote-text {
  font-family: var(--font-sans);
  font-size: 17.6px;
  line-height: 24.64px;
  color: var(--color-text-heading);
  margin: 0;
  text-align: center;
}

.bt-hero__quote-author {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.bt-hero__quote-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: url('../assets/bautraeger/alexander.png') center/cover no-repeat;
  flex: 0 0 44px;
}

.bt-hero__quote-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  line-height: 22.4px;
  color: var(--color-text-heading);
  margin: 0;
}

.bt-hero__quote-role {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  color: var(--color-text-heading);
  margin: 0;
}

/* PHOTO + TEXT BLOCKS */
.bt-block {
  background: var(--color-surface-muted);
  border-radius: 25px;
  padding: 35px;
  display: grid;
  grid-template-columns: 410px 1fr;
  gap: 50px;
  align-items: center;
}

.bt-block--reverse {
  grid-template-columns: 1fr 410px;
  background: transparent;
  padding: 0;
}

.bt-block__media {
  width: 100%;
  height: 360px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--color-bg-muted) center/cover no-repeat;
}

.bt-block__media--house  { background-image: url('../assets/bautraeger/image-2.webp'); }
.bt-block__media--smile  { background-image: url('../assets/bautraeger/image-3.webp'); }

.bt-block__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 33.2px;
  line-height: 39.82px;
  color: var(--color-text-heading);
  margin: 0 0 16px;
}

.bt-block__body {
  display: flex;
  flex-direction: column;
}

.bt-block__body p {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22.4px;
  color: var(--color-text-heading);
  margin: 0;
}

/* LEISTUNGEN (accordion) */
.bt-leist__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 33.2px;
  line-height: 33.18px;
  color: var(--color-text-heading);
  text-align: center;
  margin: 0 0 50px;
}

.bt-leist__list {
  max-width: 1000px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bt-leist__item {
  border-top: 1px solid var(--color-border-light);
  padding: 22px 0;
}

.bt-leist__item:last-child { border-bottom: 1px solid var(--color-border-light); }

.bt-leist__head {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.bt-leist__head::-webkit-details-marker { display: none; }

.bt-leist__num {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text-heading);
}

.bt-leist__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 24px;
  color: var(--color-text-heading);
}

.bt-leist__chev {
  display: none;
}

.bt-leist__panel {
  display: grid;
  grid-template-columns: 305px 1fr;
  gap: 30px;
  margin-top: 20px;
  padding: 15px;
  background: var(--color-surface-muted);
  border-radius: 20px;
}

.bt-leist__media {
  width: 100%;
  height: 174px;
  border-radius: 15px;
  overflow: hidden;
  background: var(--color-bg-muted) center/cover no-repeat;
}

.bt-leist__media--01 { background-image: url('../assets/bautraeger/image-01.webp'); }
.bt-leist__media--02 { background-image: url('../assets/bautraeger/image-02.webp'); }
.bt-leist__media--03 { background-image: url('../assets/bautraeger/image-03.webp'); }
.bt-leist__media--04 { background-image: url('../assets/bautraeger/image-04.webp'); }
.bt-leist__media--05 { background-image: url('../assets/bautraeger/image-05.webp'); }
.bt-leist__media--06 { background-image: url('../assets/bautraeger/image-06.webp'); }

.bt-leist__text {
  font-family: var(--font-sans);
  font-size: 17.6px;
  line-height: 24.64px;
  color: var(--color-text-heading);
  margin: 0;
  align-self: center;
}

.bt-leist__panel > .bt-leist__text:only-child {
  grid-column: 1 / -1;
}

/* DARK CHIP CTA */
.bt-chips {
  background: var(--color-section-dark);
  border-radius: 25px;
  padding: 50px 40px;
  text-align: center;
}

.bt-chips__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 33px;
  line-height: 42.9px;
  color: var(--color-text-on-dark);
  margin: 0 0 20px;
}

.bt-chips__intro {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22.4px;
  color: var(--color-text-on-dark);
  margin: 0 auto 32px;
  max-width: 600px;
}

.bt-chips__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.bt-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--color-surface);
  border: none;
  border-radius: 57px;
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1;
  color: var(--color-text-heading);
}

.bt-chip__icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-heading);
}

/* CONTACT FORM */
.bt-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.bt-contact__media {
  width: 100%;
  height: 480px;
  border-radius: 20px;
  overflow: hidden;
  background: url('../assets/bautraeger/image-kontaktformular.jpg') center/cover no-repeat, var(--color-bg-muted);
}

.bt-contact__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 50px;
  line-height: 56px;
  color: var(--color-text-heading);
  margin: 60px 0 0;
  white-space: pre-line;
}

.bt-contact__form-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 25.6px;
  line-height: 33.28px;
  color: var(--color-text-heading);
  margin: 0 0 20px;
}

.bt-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.bt-form__field { display: flex; flex-direction: column; }
.bt-form__field--full { grid-column: span 2; }

.bt-form__input,
.bt-form__select,
.bt-form__textarea {
  border: 1px solid var(--color-border-input);
  border-radius: 20px;
  padding: 14px 18px;
  background: var(--color-surface);
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-text-heading);
  width: 100%;
  appearance: none;
  outline: none;
}

.bt-form__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23002D2D' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1.5 6 6.5 11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 12px;
  padding-right: 44px;
}

/* Custom-select inside bt-form — match input border-radius */
.bt-form__field .custom-select__trigger { border-radius: 20px; }
.bt-form__field .custom-select__dropdown { border-radius: 16px; }

.bt-form__textarea { min-height: 100px; resize: vertical; }

.bt-form__check {
  grid-column: span 2;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 22.4px;
  color: var(--color-text-heading);
}

.bt-form__check input { margin-top: 2px; }

.bt-form__submit {
  grid-column: span 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  border: 0;
  border-radius: 55px;
  padding: 14px 32px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 14.4px;
  cursor: pointer;
  width: max-content;
}


/* RESPONSIVE */
@media (max-width: 1100px) {
  .bt-hero__title { font-size: 72px; line-height: 1; }
  .bt-hero__media { height: 420px; }
  .bt-block { grid-template-columns: 1fr; gap: 24px; }
  .bt-block--reverse { grid-template-columns: 1fr; }
  .bt-block__media { height: 280px; }
  .bt-contact { grid-template-columns: 1fr; gap: 40px; }
  .bt-contact__media { width: 100%; height: 320px; }
}

@media (max-width: 720px) {
  .bt-wrap { gap: 60px; padding: 60px 0; }
  .bt-hero__title { font-size: 44px; }
  .bt-hero__media { height: 280px; }
  .bt-hero__quote { left: 16px; right: 16px; bottom: 16px; width: auto; padding: 18px 20px; transform: none; }
  .bt-leist__head { grid-template-columns: 32px 1fr; gap: 8px; }
  .bt-leist__num { font-size: 16px; }
  .bt-leist__name { font-size: 16px; }
  .bt-leist__panel { grid-template-columns: 1fr; padding: 20px; }
  .bt-leist__media { width: 100%; height: 200px; }
  .bt-chips { padding: 30px 20px; }
  .bt-chips__title { font-size: 24px; line-height: 1.2; }
  .bt-form { grid-template-columns: 1fr; }
  .bt-form__field--full, .bt-form__check, .bt-form__submit, .bt-contact__form-title { grid-column: span 1 !important; }
  .bt-contact__title { font-size: 32px; line-height: 1.1; margin-top: 24px; }
}

/* === DARK MODE === */
[data-theme="dark"] .bt-form__select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23e0e8e8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='1 1.5 6 6.5 11 1.5'/></svg>")}
[data-theme="dark"] .bt-chip__icon svg path {
  fill: #00e8a2;
}
[data-theme="dark"] .bt-chip__icon svg circle,
[data-theme="dark"] .bt-chip__icon svg line,
[data-theme="dark"] .bt-chip__icon svg polyline,
[data-theme="dark"] .bt-chip__icon svg rect {
  stroke: #00e8a2;
}