/* ==========================================
   JUSTFEMME – CUSTOM CSS
   Tattoo & Piercing Studio Winterthur
   ========================================== */


/* 1. SCHWARZER HEADER */

header,
.header,
.header__content {
    background-color: #000000 !important;
}

.header__content {
    background-image: none !important;
}

header {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* 2. LOGO – DESKTOP */

.header__logo-image {
    height: 100px !important;
    max-height: 100px !important;
    max-width: none !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important;
}

/* 3. LOGO UND HEADER – SMARTPHONE */
@media (max-width: 768px) {

    #header,
    #header > .container-fluid,
    #header .header__content {
        height: 80px !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    #header .header__content {
        display: flex !important;
        align-items: center !important;
padding-top: 8px !important;
box-sizing: border-box !important;
    }

    #header .header__logo-wrapper,
    #header .header__logo-link {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

#header .header__logo-image {
    display: block !important;
    height: 85px !important;
    max-height: 95px !important;
    width: auto !important;
    margin: 0 !important;
}
}

/* 4. PREIS-BADGES AUSBLENDEN */

.badge {
    display: none !important;
}


/* 5. CONTRAST-THEME-BUTTON AUSBLENDEN */

.ada-compliance__btn {
    display: none !important;
}


/* 6. ZUSÄTZLICHE STUDIOÜBERSCHRIFT AUSBLENDEN */

h3.title.title--h3 {
    display: none !important;
}


/* 7. GOTHIC-BANNER – GRUNDEINSTELLUNGEN */

.wrapper {
    position: relative !important;
}


/* 8. BUCHUNGSBUTTONS LINKS UNTEN IM BANNER */

.wrapper .btn-bar.bar {
    position: absolute !important;
    bottom: 25px !important;
    left: 15px !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    z-index: 10 !important;
}


/* 9. BUCHUNGSBUTTONS – SMARTPHONE */

@media (max-width: 768px) {

    .wrapper .btn-bar.bar {
        bottom: 10px !important;
        left: 10px !important;
        right: auto !important;
    }
}


/* JUSTFEMME – Gothic-Banner Desktop korrigieren */

@media (min-width: 1200px) {

    .wrapper {
        position: relative !important;
        min-height: 640px !important;

        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }

    /* Buttons unten links */
    .wrapper .btn-bar.bar {
        position: absolute !important;
        bottom: 20px !important;
        left: 20px !important;
        right: auto !important;
    }
}



/* 11. HOMEPAGE – SCHWARZER HINTERGRUND */

section.page-content.page-content--index {
    background-color: #000000 !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* 12. INHALTSBOXEN SCHWARZ */

section.page-content.page-content--index .section-pd {
    background-color: #000000 !important;
    background-image: none !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
}


/* 13. WEITERE SECTIONS SCHWARZ */

section.section {
    background-color: #000000 !important;
}


/* 14. HOMEPAGE-TEXTE HELL */

section.page-content.page-content--index p,
section.page-content.page-content--index li {
    color: #E5DCEC !important;
}


/* 15. ÜBERSCHRIFTEN VIOLETT */

section.page-content.page-content--index h1,
section.page-content.page-content--index h2,
section.page-content.page-content--index .section-pd h3 {
    color: #A51DE6 !important;
}


/* 16. KONTAKTBEREICH SCHWARZ */

section.index__item.index__item--about-us {
    background-color: #000000 !important;
    background-image: none !important;
}


/* 17. KONTAKTLINKS VIOLETT */

section.index__item.index__item--about-us a {
    color: #B77AFF !important;
}


/* 18. KONTAKTTEXTE UND SYMBOLE HELL */

section.index__item.index__item--about-us p,
section.index__item.index__item--about-us i {
    color: #E5DCEC !important;
}


/* 19. KONTAKTDATEN – DESKTOP */

@media (min-width: 769px) {

    section.index__item.index__item--about-us {
        padding-top: 25px !important;
    }
}


/* 20. FOOTER SCHWARZ */

footer#footer.footer {
    background-color: #000000 !important;
    background-image: none !important;
}


/* 21. FOOTER-TEXTE HELL */

footer#footer.footer,
footer#footer.footer p,
footer#footer.footer span {
    color: #E5DCEC !important;
}


/* 22. FOOTER-LINKS VIOLETT */

footer#footer.footer a {
    color: #B77AFF !important;
}


/* 23. ABSTAND UNTER DEM BANNER – DESKTOP */

@media (min-width: 769px) {

    section.page-content.page-content--index {
        padding-top: 19px !important;
    }

}


/* 24. WILLKOMMENSTEXT HÖHER POSITIONIEREN */

@media (min-width: 769px) {

    section.index__item.index__item--about-us {
        margin-top: -25px !important;
    }

}

@media (max-width: 767px) {
  a.btn.map[href="#show-on-map/yes"] {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .btn-bar.bar a.btn.book {
    padding: 5px 10px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: auto !important;
    height: auto !important;
  }
}

@media (max-width: 767px) {
  .btn-bar.bar {
    display: flex !important;
    justify-content: flex-end !important;
    padding-right: 15px !important;
  }

  .btn-bar.bar a.btn.book {
    margin-left: auto !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 767px) {
  #main-buttons .btn-bar.bar {
    left: auto !important;
    right: 15px !important;
    width: auto !important;
    transform: none !important;
  }
}


/* 25. BILDER IN DEN KARTEN */

[class*="item__image"],
[class*="item__img"],
[class*="item__picture"] {

  margin-top: 0 !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

[class*="item__image"] img,
[class*="item__img"] img,
[class*="item__picture"] img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#sb_category_step_container .item__picture-wrapper img {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  transform: none !important;
}


/* 26. "MEHR ERFAHREN" */

button.item__read-more {
  font-size: 12px !important;
  line-height: 1 !important;
  padding: 0 !important;
  color: #1a73e8 !important;
  text-decoration: underline !important;
}


/* 27. TITEL UND TEXT IN DEN KARTEN */

[class*="item__title"] {
  margin-top: 0 !important;
  margin-bottom: 4px !important;
}

[class*="item__description"] ul,
[class*="item__description"] p {
  margin-top: 0px !important;
}

.category-item .item__content {
  padding-top: 0px !important;
}


/* 28. KATEGORIE-BILDER */

.category-item *:has(> img[alt^="image_for_category"]) {
  height: auto !important;
  max-height: none !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

.category-item img[alt^="image_for_category"] {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 3 !important;
  object-fit: cover !important;
  object-position: center 45% !important;
  transform: none !important;
}

/* ZURÜCK-KNOPF IM POPUP */
[class*="modal"] [class*="close"] {
  position: absolute !important;
  top: auto !important;
  bottom: 12px !important;
  right: 12px !important;
  width: auto !important;
  height: auto !important;
  padding: 8px 18px !important;
  background: #A51DE6 !important;
  border-radius: 4px !important;
  font-size: 0 !important;
}

[class*="modal"] [class*="close"] * {
  display: none !important;
}

[class*="modal"] [class*="close"]::after {
  content: "Zurück";
  font-size: 15px;
  color: #ffffff;
}

/* PIERCING-BILDER KLEINER */
*:has(> img[alt^="image_for_service"]) {
  height: auto !important;
  max-height: none !important;
  padding-bottom: 0 !important;
}

img[alt^="image_for_service"] {
  display: block !important;
  width: 100% !important;
  height: 150px !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* ZEILENABSTAND IN DEN KARTEN */
[class*="item__description"] li {
  line-height: 1.2 !important;
  margin-bottom: 10px !important;
}

/* Buchungsformular: sichtbare Feldreihenfolge */
.detail-step__item.left-side .add-details {
  display: flex !important;
  flex-direction: column !important;
}

/* Verschachtelte Feldgruppen gemeinsam sortieren */
.detail-step__item.left-side .add-details > .custom-form,
#sb_client_info_container,
#sb_additional_fields_container,
#sb_additional_fields_container > div,
#sb_additional_fields {
  display: contents !important;
}

/* 1. Vorname */
#sb_client_info_container > .form-client-name {
  order: 1 !important;
}

/* 2.–5. Familienname, Adresse, PLZ/Ort, Geburtsdatum */
#sb_additional_fields > .form-group:nth-child(1) {
  order: 2 !important;
}

#sb_additional_fields > .form-group:nth-child(2) {
  order: 3 !important;
}

#sb_additional_fields > .form-group:nth-child(3) {
  order: 4 !important;
}

#sb_additional_fields > .form-group:nth-child(4) {
  order: 5 !important;
}

/* 6. Telefonnummer */
#sb_client_info_container > .form-client-phone {
  order: 6 !important;
}

/* 7. E-Mail */
#sb_client_info_container > .form-client-email {
  order: 7 !important;
}

/* Übrige Bereiche danach anzeigen */
.detail-step__item.left-side .add-details > .login-bar,
#sb_membership_container,
#sb_promo_container {
  order: 8 !important;
}

section.page-content.page-content--index,
section.page-content.page-content--index .section-pd {
    background-color: #000 !important;
    background-image: none !important;
}

/* Willkommenstext: schwarzer Hintergrund */
#about-us,
#about-us > .section-pd {
    background-color: #000000 !important;
    background-image: none !important;
}

/* Zeitanzeige des Studios entfernen */
#sb_booking_company_time {
    display: none !important;
}

/* Abstand unter der Kategorie-Leiste entfernen */
#sb-timeline #steps-nav {
    margin-bottom: 0 !important;
}

/* Logo vor dem Titelbild anzeigen */
#header {
    position: relative !important;
    z-index: 100 !important;
}

#header,
#header > .container-fluid,
#header .header__content,
#header .header__logo-wrapper,
#header .header__logo-link {
    overflow: visible !important;
}

/* Kategorie- und Dienstleistungsboxen weiss */
#sb_booking_content .category-item,
#sb_booking_content .service-item {
    background-color: #ffffff !important;
    background-image: none !important;
    opacity: 1 !important;
}

/* Dienstleistungsbilder auf dem Handy quadratisch */
@media (max-width: 768px) {

    #sb_booking_content .service-item .user.img {
        width: 70px !important;
        height: 70px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        flex-shrink: 0 !important;
    }

    #sb_booking_content .service-item img[alt^="image_for_service"] {
        display: block !important;
        position: static !important;
        width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        object-fit: cover !important;
        object-position: center !important;
        transform: none !important;
    }
}

/* Zurückknopf unten mittig fixieren */
#sb_back_button {
    position: fixed !important;
    top: auto !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    margin: 0 !important;
    z-index: 1000 !important;
}

#sb_back_button > div {
    float: none !important;
    width: auto !important;
    padding: 0 !important;
}

#sb_back_button a.btn--link:not(.hidden) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    min-height: 36px !important;
    padding: 5px 14px !important;
    background: #ffffff !important;
    color: #7010cf !important;
    border: 2px solid #7010cf !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    box-shadow: 0 2px 10px #00000055 !important;
}

#sb_back_button a.btn--link span,
#sb_back_button a.btn--link i {
    color: inherit !important;
}


/* Footer-Text oberhalb des Zurückknopfs halten */
#footer {
    padding-top: 15px !important;
    padding-bottom: calc(85px + env(safe-area-inset-bottom)) !important;
    height: auto !important;
    min-height: 0 !important;
    box-sizing: border-box !important;
margin-top: 0 !important;
padding-top: 0 !important;
}

/* Button "Auf Karte zeigen" ausblenden */
a[href*="map"],
a[href*="maps.google"],
button[class*="map"],
a[class*="map"] {
    display: none !important;
}

/* ==========================================
   ENDE – JUSTFEMME CUSTOM CSS
   ========================================== */