.ttb-widget {
	--ttb-primary: #891313;
	--ttb-secondary: #0f4c5c;
	--ttb-bg: #f5f0e6;
	--ttb-bg-card: #fbf8f2;
	--ttb-text: #2a2a28;
	--ttb-muted: #7a7568;
	--ttb-border: #e2dbc9;

	max-width: 720px;
	margin: 0 auto;
	background: var(--ttb-bg);
	border: 1px solid var(--ttb-border);
	border-radius: 18px;
	padding: 32px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: var(--ttb-text);
	box-sizing: border-box;
}
.ttb-widget * { box-sizing: border-box; }

.ttb-heading {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--ttb-secondary);
	margin: 0 0 20px 0;
}

.ttb-icon { width: 26px; height: 26px; display: inline-block; flex-shrink: 0; }

.ttb-choice-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
	margin-bottom: 18px;
}

.ttb-choice-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 8px;
	background: var(--ttb-bg-card);
	border: 1.5px solid var(--ttb-border);
	border-radius: 14px;
	padding: 18px 14px;
	cursor: pointer;
	transition: border-color .15s ease, transform .1s ease, box-shadow .15s ease;
	font-size: 0.95rem;
	color: var(--ttb-text);
}
.ttb-choice-btn:hover {
	border-color: var(--ttb-secondary);
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(15,76,92,0.12);
}
.ttb-choice-btn.is-selected {
	border-color: var(--ttb-primary);
	background: #fff;
}
.ttb-choice-label { font-weight: 600; }
.ttb-choice-sub { font-size: 0.78rem; color: var(--ttb-muted); }
.ttb-choice-icon { width: 34px; height: 34px; }
.ttb-choice-any { border-style: dashed; }

.ttb-back-btn {
	background: none;
	border: none;
	color: var(--ttb-secondary);
	font-size: 0.9rem;
	cursor: pointer;
	padding: 6px 0;
	text-decoration: underline;
}

.ttb-calendar-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}
.ttb-calendar-nav button {
	background: var(--ttb-secondary);
	color: #fff;
	border: none;
	border-radius: 8px;
	width: 34px;
	height: 34px;
	cursor: pointer;
	font-size: 1rem;
}
.ttb-cal-month-label { font-weight: 600; color: var(--ttb-secondary); }

.ttb-calendar-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 6px;
	margin-bottom: 16px;
}
.ttb-cal-daylabel {
	text-align: center;
	font-size: 0.75rem;
	color: var(--ttb-muted);
	padding-bottom: 4px;
}
.ttb-cal-day {
	aspect-ratio: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	font-size: 0.9rem;
	background: transparent;
	border: none;
	color: var(--ttb-muted);
}
.ttb-cal-day.is-available {
	background: var(--ttb-bg-card);
	border: 1.5px solid var(--ttb-secondary);
	color: var(--ttb-text);
	cursor: pointer;
	font-weight: 600;
}
.ttb-cal-day.is-available:hover { background: var(--ttb-secondary); color: #fff; }
.ttb-cal-day.is-selected { background: var(--ttb-primary) !important; color: #fff !important; border-color: var(--ttb-primary) !important; }

.ttb-time-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
	gap: 10px;
	margin-bottom: 18px;
}
.ttb-time-btn {
	background: var(--ttb-bg-card);
	border: 1.5px solid var(--ttb-border);
	border-radius: 10px;
	padding: 10px 8px;
	cursor: pointer;
	font-weight: 600;
	color: var(--ttb-text);
	text-align: center;
}
.ttb-time-btn small { display: block; font-weight: 400; color: var(--ttb-muted); font-size: 0.72rem; margin-top: 2px; }
.ttb-time-btn:hover, .ttb-time-btn.is-selected { border-color: var(--ttb-primary); background: #fff; }

.ttb-summary {
	background: var(--ttb-bg-card);
	border: 1px solid var(--ttb-border);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 18px;
	font-size: 0.92rem;
}

.ttb-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ttb-form-row-full { display: block; margin-bottom: 14px; }
.ttb-form-row-radio { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; grid-template-columns: none; }
.ttb-radio-label { font-weight: 600; font-size: 0.9rem; }
.ttb-radio { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 400; }

.ttb-booking-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; font-weight: 600; }
.ttb-booking-form input, .ttb-booking-form textarea {
	font-family: inherit;
	font-weight: 400;
	padding: 10px 12px;
	border: 1.5px solid var(--ttb-border);
	border-radius: 8px;
	background: #fff;
	font-size: 0.95rem;
}
.ttb-booking-form input:focus, .ttb-booking-form textarea:focus { outline: none; border-color: var(--ttb-secondary); }

.ttb-form-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.ttb-submit-btn {
	background: var(--ttb-primary);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: 12px 22px;
	font-weight: 600;
	cursor: pointer;
	font-size: 0.95rem;
}
.ttb-submit-btn:hover { opacity: 0.92; }
.ttb-submit-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.ttb-form-msg { font-size: 0.85rem; margin-bottom: 4px; min-height: 1.2em; }
.ttb-form-msg.is-error { color: var(--ttb-primary); }
.ttb-form-msg.is-success { color: var(--ttb-secondary); }

.ttb-step-done { text-align: center; padding: 20px 0; }
.ttb-done-icon { width: 60px; height: 60px; margin: 0 auto 14px; }
.ttb-done-text { color: var(--ttb-muted); }

@media (max-width: 520px) {
	.ttb-widget { padding: 20px; border-radius: 14px; }
	.ttb-form-row { grid-template-columns: 1fr; }
}

/* ---- Icons (einfache Line-Art SVGs, Sekundärfarbe) ---- */
.ttb-icon-paw, .ttb-choice-icon.ttb-icon-paw {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230f4c5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='32' cy='40' rx='14' ry='11'/%3E%3Cellipse cx='14' cy='24' rx='6' ry='7.5'/%3E%3Cellipse cx='27' cy='16' rx='6' ry='7.5'/%3E%3Cellipse cx='40' cy='16' rx='6' ry='7.5'/%3E%3Cellipse cx='51' cy='24' rx='6' ry='7.5'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ttb-icon-vet, .ttb-choice-icon.ttb-icon-vet {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230f4c5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='18' r='10'/%3E%3Cpath d='M12 54c0-12 9-20 20-20s20 8 20 20'/%3E%3Cpath d='M24 38v6a8 8 0 0016 0v-6'/%3E%3Ccircle cx='40' cy='44' r='2.5' fill='%230f4c5c'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ttb-icon-clock {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230f4c5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='24'/%3E%3Cpath d='M32 18v14l10 8'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ttb-icon-heart {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230f4c5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 54S10 40 10 24a12 12 0 0122-8 12 12 0 0122 8c0 16-22 30-22 30z'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ttb-icon-syringe {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230f4c5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M46 10l8 8-4 4-8-8z'/%3E%3Cpath d='M50 14L20 44l-6 12 12-6 30-30'/%3E%3Cpath d='M34 22l8 8M28 28l8 8'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ttb-icon-check {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230f4c5c' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='24'/%3E%3Cpath d='M21 33l8 8 15-17'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ttb-icon-alert {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230f4c5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 8l26 46H6z'/%3E%3Cpath d='M32 26v12'/%3E%3Ccircle cx='32' cy='46' r='1.8' fill='%230f4c5c'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ttb-icon-chat {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230f4c5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14h44v28H26l-10 10V42H10z'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
}
.ttb-icon-calendar {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%230f4c5c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='14' width='48' height='42' rx='4'/%3E%3Cpath d='M8 26h48M20 8v12M44 8v12'/%3E%3C/svg%3E");
	background-size: contain; background-repeat: no-repeat; background-position: center;
}