/* Online Buchungssystem Pro – Frontend
   Palette: gedecktes Salbeigrün + Lehm-Akzent, DSGVO-konform (keine externen Ressourcen)
*/
#obs-widget {
	--obs-bg:          #eef1ea;
	--obs-card:        #ffffff;
	--obs-primary:     #3f5b4f;
	--obs-primary-dk:  #2c4339;
	--obs-accent:      #c2785f;
	--obs-accent-dk:   #a85f49;
	--obs-text:        #1e2a1e;
	--obs-muted:       #667566;
	--obs-border:      #dde3d8;
	--obs-error-bg:    #fbeceb;
	--obs-error-fg:    #b3413a;
	--obs-r:           12px;
	--obs-font-h:      Georgia, 'Palatino Linotype', serif;
	--obs-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	max-width: 560px;
	margin: 0 auto;
	background: var(--obs-bg);
	border-radius: calc(var(--obs-r) + 4px);
	padding: 28px;
	font-family: var(--obs-font);
	color: var(--obs-text);
	box-sizing: border-box;
}
#obs-widget * { box-sizing: border-box; }

.obs-widget-header { margin-bottom: 18px; }
.obs-widget-title  { font-family: var(--obs-font-h); font-size: 26px; font-weight: 600; margin: 0; color: var(--obs-primary-dk); }

/* Progress */
.obs-progress {
	display: flex;
	gap: 4px;
	margin-bottom: 22px;
}
.obs-progress-step {
	flex: 1;
	text-align: center;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--obs-muted);
	padding: 6px 2px;
	border-radius: 8px;
	background: var(--obs-card);
	transition: background .15s, color .15s;
}
.obs-progress-step span {
	display: block;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--obs-border);
	color: var(--obs-muted);
	font-size: 11px;
	line-height: 20px;
	margin: 0 auto 3px;
}
.obs-progress-step.is-active       { background: var(--obs-primary); color: #fff; }
.obs-progress-step.is-active span  { background: rgba(255,255,255,.25); color: #fff; }
.obs-progress-step.is-done         { background: var(--obs-primary-dk); color: #d0dbd5; }
.obs-progress-step.is-done span    { background: rgba(255,255,255,.15); color: #d0dbd5; }

/* Steps */
.obs-step { display: none; }
.obs-step.is-active { display: block; }

.obs-step-label {
	font-weight: 600;
	font-size: 15px;
	color: var(--obs-primary-dk);
	margin-bottom: 14px;
}

.obs-hint { color: var(--obs-muted); font-size: 14px; margin: 0; }

/* Lists: services / staff / dates / slots */
.obs-list { display: flex; flex-wrap: wrap; gap: 10px; }

.obs-service-btn {
	border: 1px solid var(--obs-border);
	background: var(--obs-card);
	border-radius: var(--obs-r);
	padding: 14px 16px;
	cursor: pointer;
	font-family: var(--obs-font);
	text-align: left;
	flex: 0 0 calc(50% - 5px);
	transition: border-color .15s, background .15s;
}
.obs-service-btn .obs-sv-name  { display: block; font-weight: 600; font-size: 14.5px; color: var(--obs-text); }
.obs-service-btn .obs-sv-meta  { display: block; font-size: 12.5px; color: var(--obs-muted); margin-top: 3px; line-height: 1.5; }
.obs-service-btn .obs-sv-price { color: var(--obs-accent); font-weight: 600; }
.obs-service-btn .obs-sv-desc  { display: block; font-size: 12px; color: var(--obs-muted); margin-top: 2px; font-weight: 400; }
.obs-service-btn:hover  { border-color: var(--obs-primary); }
.obs-service-btn.is-selected { background: var(--obs-primary); border-color: var(--obs-primary); }
.obs-service-btn.is-selected .obs-sv-name,
.obs-service-btn.is-selected .obs-sv-meta { color: #e0ebe5; }
.obs-service-btn.is-selected .obs-sv-price { color: #fdd7bb; }

.obs-staff-btn {
	border: 2px solid var(--obs-border);
	background: var(--obs-card);
	border-radius: var(--obs-r);
	padding: 12px 16px;
	cursor: pointer;
	font-family: var(--obs-font);
	font-size: 14.5px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 10px;
	transition: border-color .15s;
	flex: 0 0 calc(50% - 5px);
}
.obs-staff-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.obs-staff-btn:hover       { border-color: var(--obs-primary); }
.obs-staff-btn.is-selected { background: var(--obs-primary); border-color: var(--obs-primary); color: #fff; }
.obs-staff-btn.is-selected .obs-staff-dot { opacity: .7; }
.obs-staff-btn.any-staff   { border-style: dashed; }

.obs-date-btn {
	border: 1px solid var(--obs-border);
	background: var(--obs-card);
	border-radius: var(--obs-r);
	padding: 10px 14px;
	cursor: pointer;
	font-family: var(--obs-font);
	font-size: 14px;
	transition: border-color .15s, background .15s;
}
.obs-date-btn .obs-date-wd { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--obs-muted); margin-bottom: 2px; }
.obs-date-btn:hover       { border-color: var(--obs-primary); }
.obs-date-btn.is-selected { background: var(--obs-primary); border-color: var(--obs-primary); color: #fff; }
.obs-date-btn.is-selected .obs-date-wd { color: #c0d4cb; }

.obs-slot-btn {
	border: 1px solid var(--obs-border);
	background: var(--obs-card);
	border-radius: var(--obs-r);
	padding: 10px 14px;
	cursor: pointer;
	font-family: var(--obs-font);
	font-size: 14px;
	text-align: left;
	transition: border-color .15s, background .15s;
}
.obs-slot-btn .obs-slot-staff { display: block; font-size: 11.5px; color: var(--obs-muted); margin-top: 2px; }
.obs-slot-btn:hover       { border-color: var(--obs-primary); }
.obs-slot-btn.is-selected { background: var(--obs-primary); border-color: var(--obs-primary); color: #fff; }
.obs-slot-btn.is-selected .obs-slot-staff { color: #c0d4cb; }

/* Back button */
.obs-step-back { margin-top: 14px; }
.obs-back-btn  { background: none; border: 1px solid var(--obs-border); border-radius: 8px; padding: 7px 14px; font-size: 13.5px; cursor: pointer; color: var(--obs-muted); font-family: var(--obs-font); }
.obs-back-btn:hover { border-color: var(--obs-primary); color: var(--obs-primary); }

/* Summary */
.obs-summary { background: var(--obs-bg); border-radius: 10px; padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; line-height: 1.7; color: var(--obs-primary-dk); }
.obs-summary strong { display: block; font-size: 15px; margin-bottom: 4px; }

/* Form */
.obs-form .obs-field { margin-bottom: 14px; }
.obs-form label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; color: var(--obs-text); }
.obs-form input, .obs-form textarea {
	width: 100%; border: 1px solid var(--obs-border); border-radius: 8px;
	padding: 10px 12px; font-size: 14.5px; font-family: var(--obs-font); color: var(--obs-text); background: #fff;
}
.obs-form input:focus, .obs-form textarea:focus { outline: 2px solid var(--obs-primary); outline-offset: 1px; border-color: var(--obs-primary); }

.obs-error { color: var(--obs-error-fg); background: var(--obs-error-bg); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; margin: 0 0 14px; }

.obs-form-actions { display: flex; gap: 10px; align-items: center; margin-top: 18px; }
.obs-submit-btn {
	flex: 1; border: none; background: var(--obs-accent); color: #fff;
	border-radius: 9px; padding: 12px 18px; font-size: 15px; font-weight: 600;
	cursor: pointer; font-family: var(--obs-font); transition: background .15s;
}
.obs-submit-btn:hover    { background: var(--obs-accent-dk); }
.obs-submit-btn:disabled { opacity: .6; cursor: default; }

/* Success */
.obs-step-success { text-align: center; padding: 36px 20px; }
.obs-success-icon {
	width: 52px; height: 52px; border-radius: 50%; background: var(--obs-primary); color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-size: 26px; margin: 0 auto 14px;
}
.obs-step-success h4 { font-family: var(--obs-font-h); font-size: 22px; margin: 0 0 8px; color: var(--obs-primary-dk); }
.obs-step-success p  { color: var(--obs-muted); margin: 0; }

@media (max-width: 480px) {
	#obs-widget { padding: 16px; }
	.obs-service-btn, .obs-staff-btn { flex: 0 0 100%; }
	.obs-progress-step { font-size: 10px; }
	.obs-progress-step span { display: none; }
}