@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400&display=swap');

-----------------------------------------------------
/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}

------------------------------------------------------------

---------------------------------------------------------

 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}

/* "Über uns" Überschrift ausblenden */
#about-us .title-main {
    display: none !important;
}

--------------------------------------------------------
/* Widget-Buttons */
#main-buttons .btn,
#main-buttons .btn.custom,
#main-buttons .btn *,
#main-buttons .btn a {
    background-color: #8da898 !important;
    color: #ffffff !important; /* Haupt-Textfarbe (Weiß) */
    border-radius: 6px !important;
    border: none !important;
    font-family: 'Playfair Display', Georgia, serif !important;
    font-weight: 500 !important;
    font-size: 18px !important;
    box-shadow: 0 4px 12px rgba(141, 168, 152, 0.25) !important;
    transition: all 0.3s ease !important;
    
    /* Flexbox erzwingt, dass der Text exakt vertikal und horizontal zentriert ist */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 40px !important;
    height: auto !important;
    box-sizing: border-box !important;
}
-----------------------------------------------------------

/* 1. Die gesamte Pfeil-Leiste proportional schmaler skalieren */
#sb_booking_info,
#sb-timeline #steps-nav,
.menu-active-bg {
    transform: scaleY(0.65) !important; /* Passt die Höhe proportional an (~65%) */
    transform-origin: top center !important; /* Verhindert Lücken nach oben */
}

/* 2. Text und Inhalt wieder auf normale Höhe ausgleichend skalieren */
#sb-timeline #steps-nav li a .content,
#sb-timeline #steps-nav li a span {
    transform: scaleY(1.54) !important; /* Gleicht die Skalierung für die Schrift exakt aus (1 / 0.65) */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 3. Platz nach unten korrigieren, den der skalierten Container hinterlässt */
#sb_booking_info {
    margin-bottom: -25px !important;
}
-------------------------------------------------------------

/* 1. Ausgewählte und verfügbare Tage im Kalender abrunden */
div.calendar .date,
div.calendar .date a,
div.calendar .date.selected {
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* 2. Uhrzeit-Buttons (10:00, 13:00, 16:00 etc.) abrunden */
#sb_booking_content .datetime-step .col-md-4,
#sb_booking_content .datetime-step .inner,
#sb_booking_content .datetime-step a,
.datetime-step .inner {
    border-radius: 8px !important;
    overflow: hidden !important;
}

--------------------------------------------------------------

/* Zielgenaue Ansteuerung für "Willkommen in meinem Studio" */
#content-view #about-us .about-wrapper .about-header h2,
#about-us .about-header h2,
.about-header h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-weight: 500 !important;
  color: #3b4843 !important;
}

----------------------------------------------------

/* Hintergrundbild von Pexels mit 30% Transparenz / Deckkraft */
body, 
#main_page_wrapper, 
.main-wrapper, 
#content-view {
  background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), 
                    url('https://images.pexels.com/photos/8941369/pexels-photo-8941369.jpeg?auto=compress&cs=tinysrgb&w=1920') !important;
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}