/* Facettenreich / SimplyBook v2 / Fotodesign Version 7
   In CSS der Buchungsseite einsetzen, ohne <style>-Tags.
   Rueckweg: diesen Block entfernen und vorherigen Inhalt wieder einsetzen.
   Keine externen Ressourcen. DM Sans nur, wenn bereits vorhanden.
*/
body #sb-main-container {
  --fr-pink: #cd0c64;
  --fr-pink-dark: #a50a50;
  --fr-ink: #221f21;
  background: radial-gradient(ellipse at 50% 0%, #301021 0%, #120910 45%, #050405 100%) !important;
  font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif !important;
}
body #sb-main-container #main { background: transparent !important; }

/* Vorhandenes Studiofoto mit ruhiger Typografie. */
body #main-buttons {
  position: relative !important;
  isolation: isolate;
  box-sizing: border-box;
  background-image: linear-gradient(90deg, rgba(18,9,16,.66), rgba(18,9,16,.08) 70%), url('/uploads/facettenreichkosmetik/image_files/background/6f36a391506660012860d8184acb5e4f.jpg') !important;
  background-size: cover !important;
  background-position: center 35% !important;
  height: auto !important;
  min-height: 0 !important;
  padding: 0 32px !important;
  border-bottom: 1px solid #ffffff20;
}
body #main-buttons::before,
body #main-buttons::after {
  content: none !important;
}
body #main-buttons .wrapper,
body #main-buttons .inner {
  height: auto !important;
  min-height: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  text-align: left !important;
}
body #main-buttons .wrapper {
  display: flex !important;
  align-items: flex-end !important;
  min-height: 440px !important;
  max-width: 1120px;
  margin: 0 auto;
  padding: 48px 0 !important;
  box-sizing: border-box;
}
body #main-buttons .inner { width: 100% !important; }
body #main-buttons .company-name::before {
  content: '';
  display: block;
  width: 48px;
  height: 3px;
  background: #e54a86;
  margin-bottom: 20px;
}
body #main-buttons .company-name {
  color: #fff !important;
  font-family: Georgia, 'Times New Roman', serif !important;
  font-size: clamp(32px, 4.3vw, 56px) !important;
  line-height: 1.12 !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: -0.025em !important;
  max-width: 440px;
  text-shadow: 0 2px 18px #00000040 !important;
  margin: 0 0 20px !important;
  animation: none !important;
}
body #main-buttons .bar { margin-top: 16px !important; }
body #main-buttons .btn {
  border-radius: 8px !important;
  animation: none !important;
}
body #main-buttons .btn.book {
  background: #cd0c64 !important;
  border-color: #cd0c64 !important;
}
body #main-buttons .btn.book a { color: #fff !important; }
body #main-buttons .btn.map {
  background: transparent !important;
  border-color: #f9b8ce !important;
}
body #main-buttons .btn.map a { color: #f9b8ce !important; }
body #main-buttons .btn a {
  min-height: 48px;
  padding: 14px 24px !important;
  font: 600 15px/1.4 'DM Sans', 'Segoe UI', Arial, sans-serif !important;
}

/* Dunkler Buchungsrahmen; keine globalen Eingriffe in Statusfarben. */
body #sb-timeline {
  width: calc(100% - 32px) !important;
  max-width: 1040px !important;
  box-sizing: border-box;
  margin: 28px auto 40px !important;
  background: #191319 !important;
  border: 1px solid #49303e;
  border-radius: 16px;
  box-shadow: 0 12px 40px #00000030;
}
/* SimplyBooks feste 1200px-Innenbreite an den Rahmen anpassen. */
body #sb-timeline .container-fluid.column {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body #sb-timeline #steps,
body #sb-timeline #steps-content { background: transparent !important; }
body #sb-timeline #steps-nav {
  margin-bottom: 24px !important;
  background: #251b23 !important;
  border-radius: 16px 16px 0 0;
}
body #steps-nav .title-small,
body #steps-nav .title-sub { color: #ded2d9 !important; }
body #steps-nav .active .title-small,
body #steps-nav .active .title-sub {
  color: #ffadd1 !important;
  font-weight: 700 !important;
}
body #sb-timeline .tab {
  background: linear-gradient(145deg, #30242d, #211a20) !important;
  border: 1px solid #59404f !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 16px #00000020 !important;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
@media (hover: hover) {
  body #sb-timeline .tab:hover {
    border-color: #d9699b !important;
    box-shadow: 0 12px 28px #00000035 !important;
  }
}
body #sb-timeline .tab .cap {
  color: #fff5fa !important;
  font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;
}
body #sb-timeline .tab .txt {
  color: #dfd1da !important;
  line-height: 1.6 !important;
}
body #sb_booking_company_time { color: #dfd1da !important; }
/* Zeitleiste im normalen Layout, ohne Ueberlagerung der Karten. */
body #sb-timeline #steps { position: relative !important; }
body #sb-timeline #time-settings {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
body #sb-timeline .tab .read-more {
  color: #ffadd1 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}
body #sb-timeline .tab .read-more:hover { color: #fff5fa !important; }
body #sb_booking_company_time .time {
  white-space: normal !important;
  overflow-wrap: anywhere;
}
/* Detaildialoge behalten eine helle, gut lesbare Flaeche. */
body #sb-timeline .full-info {
  background: #fffafd !important;
  color: #221f21 !important;
}
body #sb-timeline .full-info .cap { color: #221f21 !important; }
body #sb-timeline .full-info .txt { color: #5a5558 !important; }
body #sb_category_step_container .excerpt-info > .preloader,
body #sb_service_step_container .excerpt-info > .preloader {
  height: auto !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
  aspect-ratio: auto !important;
}
body #sb_category_step_container .excerpt-info > .preloader > a,
body #sb_service_step_container .excerpt-info > .preloader > a {
  display: block !important;
  position: static !important;
  height: auto !important;
}
body #sb_category_step_container .excerpt-info .user.img,
body #sb_service_step_container .excerpt-info .user.img {
  position: static !important;
  height: auto !important;
  min-height: 0 !important;
}
body #sb_category_step_container .excerpt-info .user.img img,
body #sb_service_step_container .excerpt-info .user.img img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 12px 12px 0 0;
}
body #sb-timeline .btn.select {
  background: #cd0c64 !important;
  border: 1px solid #cd0c64 !important;
  border-radius: 12px !important;
}
body #sb-timeline .btn.select a {
  color: #fff !important;
  min-height: 44px;
  line-height: 1.4 !important;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
body #sb-timeline .btn.select:hover { background: #a50a50 !important; }
body #sb-main-container a:focus-visible,
body #sb-main-container button:focus-visible,
body #sb-main-container input:focus-visible,
body #sb-main-container select:focus-visible {
  outline: 3px solid #cd0c64 !important;
  outline-offset: 3px !important;
}
@media (max-width: 767px) {
  body #main-buttons {
    padding: 0 22px !important;
    background-image: linear-gradient(0deg, rgba(18,9,16,.82), rgba(18,9,16,0) 85%), url('/uploads/facettenreichkosmetik/image_files/background/6f36a391506660012860d8184acb5e4f.jpg') !important;
    background-position: center 30% !important;
  }
  body #main-buttons .wrapper {
    min-height: 380px !important;
    padding: 30px 0 !important;
  }
  body #main-buttons .company-name { max-width: 300px; }
  body #sb-timeline {
    width: calc(100% - 20px) !important;
    margin: 16px auto 24px !important;
  }
  body #header,
  body #header .nav-wrapper {
    background: #191319 !important;
    color: #fffafd !important;
    border-color: #49303e !important;
  }
  body #header .nav-wrapper a { color: #fffafd !important; }
  body #header .nav-trigger {
    background: #cd0c64 !important;
    color: #fff !important;
    border-radius: 8px;
  }
  body #sb-timeline #steps-nav {
    background: #191319 !important;
    border-bottom: 1px solid #49303e !important;
    box-shadow: none !important;
  }
  body #steps-nav .step_info_item,
  body #steps-nav .step_info_item > a,
  body #steps-nav .step_info_item .content {
    border-color: #49303e !important;
  }
  body #steps-nav .title-small {
    font-family: 'Segoe UI', Arial, sans-serif !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: 0.02em !important;
  }
  body #sb-timeline input,
  body #sb-timeline select,
  body #sb-timeline textarea { font-size: 16px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body #sb-timeline .tab {
    transition: none !important;
    transform: none !important;
  }
}