/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/

/* Importiere Google Font Nunito */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap');

/* Globale Schriftdefinition */
body {
	font-family: 'Nunito', sans-serif !important;
	font-weight: 400;
	color: #333;
	background-color: #fff;
}

/* Überschriften */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Nunito', sans-serif !important;
	font-weight: 700;
	color: #222;
}

/* Allgemeine Textabsätze */
p {
	font-family: 'Nunito', sans-serif !important;
	font-weight: 400;
	line-height: 1.6;
	color: #444;
}

/* Buttons vereinheitlichen */
button, input[type="button"], input[type="submit"] {
	font-family: 'Nunito', sans-serif !important;
	font-weight: 600;
	border-radius: 6px;
	cursor: pointer;
}

/* -------- Deine Event-spezifischen Styles -------- */

#events h3 {
	font-weight: 600;
	font-size: 1.2em;
}

#events p.duration, 
#events div.duration {
	color: #777;
	font-weight: 400;
}

#events p.description, 
#events div.description {
	color: #555;
	font-weight: 400;
	line-height: 1.5;
}

#events .selectedEvent {
	background-color: #f0f8ff;
	border-left: 4px solid #007bff;
	padding: 10px;
	border-radius: 6px;
}

#events input.reserve_time_btn {
	background-color: #007bff;
	color: #fff;
	padding: 8px 14px;
	border: none;
	font-weight: 600;
}

#events input.reserve_time_btn:hover {
	background-color: #0056b3;
}

#events input.select_another_btn {
	background-color: #f8f9fa;
	color: #333;
	padding: 8px 14px;
	border: 1px solid #ccc;
}

#events input.select_another_btn:hover {
	background-color: #e9ecef;
}

#eventForm #start_date-block-container h3, 
#eventForm #timeline-container h3 {
	font-weight: 600;
}

#eventForm #save_button {
	background-color: #28a745;
	color: #fff;
	padding: 10px 16px;
	border: none;
	border-radius: 6px;
	font-weight: 600;
}

#eventForm #save_button:hover {
	background-color: #218838;
}

div.ui-widget-content {
	background-color: #fff;
	border: 1px solid #ddd;
}

div.ui-widget-header {
	background-color: #f5f5f5;
	border-bottom: 1px solid #ddd;
	font-weight: 600;
}

#timeline-container table.timeline {
	width: 100%;
	border-collapse: collapse;
}

.timeline td.not_worked_time {
	background-color: #f8f9fa;
}

.timeline td.free_time {
	background-color: #d4edda;
}

.timeline td.selected_time {
	background-color: #cce5ff;
}

.timeline td.reserved_time {
	background-color: #f8d7da;
}

div#loading {
	text-align: center;
	font-weight: 600;
	color: #007bff;
}

div#widget_container {
	border: 1px solid #ddd;
	padding: 15px;
	border-radius: 8px;
	background-color: #fff;
}

#widget_container #widget_header {
	font-weight: 700;
	font-size: 1.3em;
	margin-bottom: 10px;
}

#widget_container #widget_footer {
	text-align: center;
	font-size: 0.9em;
	color: #666;
}

#widget_container h1.title a {
	text-decoration: none;
	color: #007bff;
	font-weight: 700;
}

#events .event_price {
	font-weight: 600;
	color: #28a745;
}

#eventForm dd.extention_data {
	margin-top: 10px;
	font-size: 0.95em;
}

dd.extention_data dl.zend_form dt, 
dd.extention_data dl.zend_form dd label {
	font-weight: 600;
}
/* Erzwinge überall die Nunito-Schrift */
* {
    font-family: 'Nunito', sans-serif !important;
}

/* Buttons anpassen */
button,
input[type="button"],
input[type="submit"],
input.reserve_time_btn,
input.select_another_btn,
a.button,
a.btn {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

/* Überschriften im Navigationsbereich */
#widget_container h1, 
#widget_container h2, 
#widget_container h3, 
#widget_container h4,
#widget_container h5, 
#widget_container h6,
#events h3,
#eventForm h3 {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
}

/* Text innerhalb von Breadcrumbs oder Labels */
.breadcrumb,
#widget_container label,
#widget_container span,
#widget_container p,
#widget_container a {
    font-family: 'Nunito', sans-serif !important;
    font-weight: 400 !important;
}
div#sb_booking_company_time { display: none; }

ul li.step_info_item:nth-child(3) {
  display: none !important;
}


/* --- Font-Awesome Icons: gezielte Ausnahme damit Icons nicht durch Nunito ersetzt werden --- */

/* 1) Stelle sicher, dass Pseudo-Elemente (die Icons erzeugen) die richtige Icon-Schrift verwenden */
span.fa.fa-angle-right::before,
span.fa-angle-left::before,
span.fa.fa-chevron-right::before,
span.fa.fa-chevron-left::before,
.i.fa-angle-right::before,
.i.fa-angle-left::before,
.fa-angle-right::before,
.fa-angle-left::before {
    /* mehrere Font-Awesome-Familiennamen abdecken (FA4, FA5, FA6) */
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;

    /* Gewicht: Solid-Icons brauchen oft 900 / Free Solid = 900 */
    font-weight: 900 !important;

    /* Rendering-Helfer */
    speak: none;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2) Generelle Rückfallregel für Font-Awesome Klassen (falls andere Icons auch betroffen sind) */
.fa,
.fas,
.far,
.fal,
.fab,
.icon, /* falls projekt eigene icon-class nutzt */
i.fa,
i.fas,
i.far,
i.fab {
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", "FontAwesome", "Font Awesome 6 Pro", "Font Awesome 5 Pro" !important;
}

/* 3) Korrigiere Gewicht je nach Typ */
.fas, /* solid (häufig) */
.fa.solid {
    font-weight: 900 !important;
}

.far, /* regular */
.fa.regular {
    font-weight: 400 !important;
}

.fab { /* brands */
    font-family: "Font Awesome 6 Brands", "Font Awesome 5 Brands", "FontAwesome" !important;
    font-weight: 400 !important;
}

.custom-checkbox {
  position: relative;
  display: inline-block;
}

/* Standard-Zustand: grauer Rahmen, weißer Hintergrund */
.custom-checkbox .custom-label {
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #6d6d6d;
  background-color: white;
  border-radius: 3px;
  transition: all 0.2s ease;
  cursor: pointer;
}

/* Wenn die Checkbox aktiv ist → schwarzer Hintergrund */
.custom-checkbox input[type="checkbox"]:checked + .custom-label {
  background-color: black;
  border-color: black;
}

/* Optional: Häkchen oder Kreuz in Weiß */
.custom-checkbox input[type="checkbox"]:checked + .custom-label::after {
  content: "✔"; /* oder "✖" */
  color: white;
  font-size: 14px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Social Media Icons ausblenden */
a[href*="facebook"],
a[href*="instagram"],
a[href*="tiktok"],
a[href*="linkedin"],
a[href*="youtube"],
a[href*="google"],
a[href*="twitter"],
a[href*="x.com"],
a.social-media,
.social-icons,
.footer-social,
.header-social {
    display: none !important;
    visibility: hidden !important;
}

/* Navigation-Trigger ausblenden */
.nav-trigger {
    display: none !important;
}



/* ========================================
   Tage aus dem nächsten / vorherigen Monat
   ======================================== */
.calendar .date.pre-or-next-month,
.calendar .date.pre-or-next-month * {
    opacity: 0.35 !important;       /* ausgegraut */
    filter: grayscale(100%) !important;
    pointer-events: none !important; /* nicht anklickbar */
}
/* "Mehr erfahren" im Schritt 'Aktualisierung' ausblenden */
#sb_provider_step_container .read-more {
    display: none !important;
}
/* ================================
   Verfügbare Tage (anklickbare Tage) – jetzt weiß
   ================================ */
.calendar .date .day-on,
.calendar .date a.day-on {
    background-color: #ffffff !important;   /* weißer Hintergrund */
    color: #000 !important;                 /* schwarze Schrift */
    border-radius: 50% !important;          /* runde Form */
    font-weight: bold !important;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.7) !important; /* leichter Glow */
}

/* Hover-Effekt für verfügbare Tage */
.calendar .date .day-on:hover,
.calendar .date a.day-on:hover {
    background-color: #f0f0f0 !important;   /* leichtes Grau beim Hover */
    transform: scale(1.1);
    transition: 0.15s ease-in-out;
}
/* Tage aus vorigem/nächsten Monat: Platz behalten, aber nichts anzeigen */
#sb_dateview_container .calendar .weeks-date .date.prev-or-next-month {
    opacity: 0 !important;          /* komplett unsichtbar */
    pointer-events: none !important;/* nicht anklickbar */
}

/* Nur zur Sicherheit: Text in diesen Zellen auch unsichtbar machen */
#sb_dateview_container .calendar .weeks-date .date.prev-or-next-month span {
    color: transparent !important;
}
header#header {
    display: none !important;
}



/* "Mehr erfahren" ausblenden, falls noch sichtbar */
.txt.short .read-more {
    display: none !important;
}

/* Container der Leistung als Spalte anordnen */
.service-item .excerpt-info .tab-pd {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
}