/* ==========================================================================
   Thermokoch Cook Mode (Jetzt Kochen) - Modern 2026 Material 3 Design
   Direct styling for WP Recipe Maker Premium Cook Mode Modal & Rating Modal
   100% Update-Proof & Non-Destructive
   ========================================================================== */

/* 1. Modal Overlay & Backdrop */
.wprm-popup-modal-cook-mode,
.wprm-popup-modal-user-rating {
	z-index: 999990 !important;
}

.wprm-popup-modal-cook-mode .wprm-popup-modal__overlay,
.wprm-popup-modal-user-rating .wprm-popup-modal__overlay {
	background: rgba(15, 23, 42, 0.78) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
	padding-bottom: 100px !important; /* Dedicated clearance for Mediavine desktop adhesion */
	box-sizing: border-box !important;
	z-index: 999990 !important;
}

/* 2. Modal Container Card */
.wprm-popup-modal-cook-mode .wprm-popup-modal__container,
.wprm-popup-modal-user-rating .wprm-popup-modal__container {
	width: 100% !important;
	max-width: 600px !important;
	max-height: calc(100vh - 140px) !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.3) !important;
	border: 1px solid rgba(226, 232, 240, 0.8) !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	animation: wprm-cook-pop 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-sizing: border-box !important;
}

.wprm-popup-modal-user-rating .wprm-popup-modal__container {
	max-width: 480px !important;
}

@keyframes wprm-cook-pop {
	from {
		opacity: 0;
		transform: scale(0.97) translateY(8px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

/* 3. Header */
.wprm-popup-modal-cook-mode .wprm-popup-modal__header,
.wprm-popup-modal-user-rating .wprm-popup-modal__header {
	padding: 12px 20px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	background: #ffffff !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-shrink: 0 !important;
}

.wprm-popup-modal-cook-mode .wprm-popup-modal__title,
.wprm-popup-modal-user-rating .wprm-popup-modal__title {
	font-size: 1.02rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.wprm-popup-modal-cook-mode .wprm-popup-modal__title::before {
	content: "KOCHMODUS";
	display: inline-block;
	background: #f4f9ed;
	color: #5e9918;
	font-size: 0.65rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 4px;
	border: 1px solid #bde08b;
	letter-spacing: 0.6px;
}

.wprm-popup-modal-cook-mode .wprm-popup-modal__close,
.wprm-popup-modal-user-rating .wprm-popup-modal__close {
	background: transparent !important;
	border: none !important;
	color: #64748b !important;
	cursor: pointer !important;
	padding: 6px !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.15s !important;
}

.wprm-popup-modal-cook-mode .wprm-popup-modal__close:hover,
.wprm-popup-modal-user-rating .wprm-popup-modal__close:hover {
	background: #f1f5f9 !important;
	color: #0f172a !important;
}

/* 4. Content Area */
.wprm-popup-modal-cook-mode .wprm-popup-modal__content,
.wprm-popup-modal-user-rating .wprm-popup-modal__content {
	flex: 1 !important;
	overflow-y: auto !important;
	padding: 22px 24px !important;
	-webkit-overflow-scrolling: touch !important;
	background: #ffffff !important;
	box-sizing: border-box !important;
}

/* Screen visibility & layout management */
.wprm-popup-modal-cook-mode .wprm-cook-mode-screen[style*="display: none"],
.wprm-popup-modal-cook-mode .wprm-cook-mode-screen[style*="display:none"] {
	display: none !important;
}

.wprm-popup-modal-cook-mode .wprm-cook-mode-screen {
	height: auto !important;
	min-height: 100% !important;
}

.wprm-popup-modal-cook-mode .wprm-cook-mode-screen-overview > * {
	flex-shrink: 0 !important;
}

/* 5. SCREEN 1: OVERVIEW */
.wprm-cook-mode-image-container {
	margin-bottom: 16px !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	height: 180px !important;
	max-height: 180px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
	background: #f1f5f9 !important;
	position: relative !important;
}

.wprm-cook-mode-image-container .pinow-wrapper {
	width: 100% !important;
	height: 100% !important;
	display: block !important;
	position: relative !important;
}

.wprm-cook-mode-image-container .pinow-btn {
	display: none !important;
}

.wprm-cook-mode-image {
	width: 100% !important;
	height: 180px !important;
	max-height: 180px !important;
	object-fit: cover !important;
	object-position: center 30% !important;
	display: block !important;
}

/* Servings Control Row */
.wprm-cook-mode-controls {
	margin-bottom: 14px !important;
}

.wprm-cook-mode-servings {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 9px 15px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
}

.wprm-cook-mode-control-label {
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	color: #475569 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
}

html[lang^="de"] .wprm-cook-mode-servings .wprm-cook-mode-control-label {
	font-size: 0 !important;
}

html[lang^="de"] .wprm-cook-mode-servings .wprm-cook-mode-control-label::after {
	content: "Portionen" !important;
	font-size: 0.82rem !important;
	font-weight: 700 !important;
	color: #475569 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.6px !important;
}

.wprm-cook-mode-servings-input-container {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.wprm-cook-mode-servings-decrease,
.wprm-cook-mode-servings-increase {
	width: 28px !important;
	height: 28px !important;
	border: 1px solid #cbd5e1 !important;
	background: #ffffff !important;
	border-radius: 6px !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #334155 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.15s !important;
}

.wprm-cook-mode-servings-decrease:hover,
.wprm-cook-mode-servings-increase:hover {
	background: #f4f9ed !important;
	color: #5e9918 !important;
	border-color: #5e9918 !important;
}

.wprm-cook-mode-servings-input {
	width: 36px !important;
	text-align: center !important;
	font-size: 0.95rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	border: none !important;
	background: transparent !important;
}

/* Ingredients Section in Overview */
.wprm-cook-mode-ingredients {
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: #ffffff !important;
	margin-bottom: 14px !important;
}

.wprm-cook-mode-section-title {
	margin: 0 !important;
	padding: 9px 15px !important;
	background: #f8fafc !important;
	border-bottom: 1px solid #e2e8f0 !important;
	font-size: 0.85rem !important;
	font-weight: 700 !important;
	color: #334155 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.wprm-cook-mode-ingredient-group-name {
	font-weight: 700 !important;
	font-size: 0.8rem !important;
	color: #64748b !important;
	padding: 9px 15px 3px 15px !important;
	background: #ffffff !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
}

.wprm-cook-mode-ingredients-group-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 4px 15px 8px 15px !important;
}

.wprm-cook-mode-ingredient {
	padding: 6px 0 !important;
	border-bottom: 1px solid #f1f5f9 !important;
	font-size: 0.88rem !important;
	color: #334155 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	transition: all 0.15s !important;
}

.wprm-cook-mode-ingredient:last-child {
	border-bottom: none !important;
}

.wprm-cook-mode-ingredient.checked {
	text-decoration: line-through !important;
	color: #94a3b8 !important;
}

.wprm-cook-mode-ingredient-amount,
.wprm-cook-mode-ingredient-unit {
	font-weight: 700 !important;
	color: #0f172a !important;
}

.wprm-cook-mode-ingredient-notes {
	color: #64748b !important;
	font-size: 0.82rem !important;
}

/* Equipment Section */
.wprm-cook-mode-equipment {
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	overflow: hidden !important;
	background: #ffffff !important;
	margin-bottom: 14px !important;
}

.wprm-cook-mode-equipment-items {
	list-style: none !important;
	margin: 0 !important;
	padding: 4px 15px 8px 15px !important;
}

.wprm-cook-mode-equipment-item {
	padding: 6px 0 !important;
	border-bottom: 1px solid #f1f5f9 !important;
	font-size: 0.88rem !important;
	color: #334155 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.wprm-cook-mode-equipment-item:last-child {
	border-bottom: none !important;
}

.wprm-cook-mode-equipment-amount {
	font-weight: 700 !important;
	color: #0f172a !important;
}

.wprm-cook-mode-equipment-notes {
	color: #94a3b8 !important;
	font-size: 0.8rem !important;
}

/* Ingredient Checkbox (Enhanced via JS) */
.tk-cook-ing-checkbox {
	width: 16px !important;
	height: 16px !important;
	accent-color: #5e9918 !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	margin-right: 4px !important;
}

/* 6. SCREEN 2: COOKING STEPS */
.wprm-cook-mode-instruction-step {
	padding: 6px 0 !important;
}

/* Step Associated Ingredients Box */
.wprm-cook-mode-step-ingredients {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	padding: 8px 14px !important;
	margin-bottom: 14px !important;
}

.wprm-cook-mode-step-ingredients-list {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px 14px !important;
}

.wprm-cook-mode-step-ingredient {
	font-size: 0.85rem !important;
	color: #334155 !important;
	font-weight: 600 !important;
}

.wprm-cook-mode-step-ingredient-amount,
.wprm-cook-mode-step-ingredient-unit {
	font-weight: 700 !important;
	color: #0f172a !important;
}

/* Step Text & Badge */
.wprm-cook-mode-step-text {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

/* HIDE the broken/clipped step number badge completely! */
.wprm-cook-mode-step-number {
	display: none !important;
}

.wprm-cook-mode-step-text-content {
	font-size: 1rem !important;
	line-height: 1.6 !important;
	color: #1e293b !important;
	font-weight: 400 !important;
}

.wprm-cook-mode-step-text-content strong {
	font-weight: 600 !important;
	color: #0f172a !important;
}

/* Step Tips */
.wprm-cook-mode-step-tip {
	background: #fffbeb !important;
	border: 1px solid #fde68a !important;
	border-radius: 8px !important;
	padding: 8px 12px !important;
	margin-top: 12px !important;
	font-size: 0.85rem !important;
	color: #92400e !important;
	line-height: 1.5 !important;
}

/* STEP TIMER */
.tk-cook-step-timer-box {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 8px 14px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	margin-top: 14px !important;
	gap: 12px !important;
}

.tk-cook-step-timer-box.timer-running {
	border-color: #5e9918 !important;
	background: #f4f9ed !important;
	box-shadow: 0 0 0 2px rgba(94, 153, 24, 0.15) !important;
}

.tk-cook-step-timer-box.timer-finished {
	border-color: #ef4444 !important;
	background: #fef2f2 !important;
}

.tk-timer-display {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
}

.tk-timer-label {
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	color: #475569 !important;
}

.tk-timer-clock {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	letter-spacing: 0.5px !important;
}

.tk-timer-controls {
	display: flex !important;
	gap: 6px !important;
}

.tk-timer-btn {
	padding: 5px 12px !important;
	border-radius: 6px !important;
	font-size: 0.8rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	border: none !important;
	transition: all 0.15s !important;
}

.tk-timer-btn.start {
	background: #5e9918 !important;
	color: #ffffff !important;
}

.tk-timer-btn.start:hover {
	background: #4c7d13 !important;
}

.tk-timer-btn.pause {
	background: #f59e0b !important;
	color: #ffffff !important;
}

.tk-timer-btn.reset {
	background: #e2e8f0 !important;
	color: #475569 !important;
}

.tk-timer-btn.reset:hover {
	background: #cbd5e1 !important;
	color: #0f172a !important;
}

/* 7. SCREEN 3: THANK YOU & RATING */
.wprm-cook-mode-screen-thank-you {
	padding: 24px 16px !important;
	text-align: center !important;
}

.wprm-cook-mode-thank-you-content {
	max-width: 440px !important;
	margin: 0 auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
}

.wprm-cook-mode-thank-you-content::before {
	content: "🎉";
	font-size: 2.2rem;
	display: block;
	margin-bottom: 8px;
}

.wprm-cook-mode-thank-you-content p:first-of-type {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 0 6px 0 !important;
}

.wprm-cook-mode-thank-you-content p:nth-of-type(2) {
	font-size: 0.92rem !important;
	color: #64748b !important;
	margin: 0 0 16px 0 !important;
}

.wprm-cook-mode-thank-you-stars {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	padding: 14px 20px !important;
	width: 100% !important;
	margin-bottom: 16px !important;
}

.wprm-cook-mode-thank-you-stars .wprm-rating-star {
	cursor: pointer !important;
	transition: transform 0.15s !important;
}

.wprm-cook-mode-thank-you-stars .wprm-rating-star:hover {
	transform: scale(1.15) !important;
}

/* 8. FOOTER NAVIGATION */
.wprm-popup-modal-cook-mode .wprm-popup-modal__footer {
	padding: 12px 20px !important;
	border-top: 1px solid #f1f5f9 !important;
	background: #ffffff !important;
	flex-shrink: 0 !important;
}

.wprm-cook-mode-footer {
	width: 100% !important;
}

.wprm-cook-mode-start-button {
	width: 100% !important;
	padding: 11px 18px !important;
	background: #5e9918 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	font-size: 0.92rem !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	box-shadow: 0 2px 8px rgba(94, 153, 24, 0.25) !important;
	transition: all 0.15s !important;
}

.wprm-cook-mode-start-button:hover {
	background: #4c7d13 !important;
}

.wprm-cook-mode-cooking-footer {
	width: 100% !important;
}

.wprm-cook-mode-navigation {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 10px !important;
	width: 100% !important;
}

.wprm-cook-mode-nav-prev {
	padding: 8px 16px !important;
	border-radius: 7px !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	background: #f1f5f9 !important;
	color: #475569 !important;
	border: none !important;
	cursor: pointer !important;
	transition: all 0.15s !important;
}

.wprm-cook-mode-nav-prev:hover:not(:disabled) {
	background: #e2e8f0 !important;
	color: #0f172a !important;
}

.wprm-cook-mode-nav-next,
.wprm-cook-mode-nav-close {
	padding: 8px 18px !important;
	border-radius: 7px !important;
	font-size: 0.85rem !important;
	font-weight: 600 !important;
	background: #5e9918 !important;
	color: #ffffff !important;
	border: none !important;
	cursor: pointer !important;
	box-shadow: 0 2px 8px rgba(94, 153, 24, 0.25) !important;
	transition: all 0.15s !important;
}

.wprm-cook-mode-nav-next:hover,
.wprm-cook-mode-nav-close:hover {
	background: #4c7d13 !important;
}

.wprm-cook-mode-progress {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	gap: 4px !important;
	flex: 1 !important;
	max-width: 180px !important;
}

.wprm-cook-mode-progress-text {
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	color: #64748b !important;
}

.wprm-cook-mode-progress-bar {
	width: 100% !important;
	height: 4px !important;
	background: #e2e8f0 !important;
	border-radius: 2px !important;
	overflow: hidden !important;
}

.wprm-cook-mode-progress-bar-fill {
	height: 100% !important;
	background: #5e9918 !important;
	border-radius: 2px !important;
	transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ==========================================================================
   9. USER RATING MODAL (wprm-popup-modal-user-rating)
   ========================================================================== */
.wprm-user-ratings-modal-recipe-name {
	font-size: 1rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin-bottom: 12px !important;
	text-align: center !important;
}

.wprm-user-ratings-modal-stars-container {
	display: flex !important;
	justify-content: center !important;
	margin-bottom: 16px !important;
}

.wprm-user-rating-modal-comment {
	width: 100% !important;
	min-height: 85px !important;
	padding: 12px 14px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 12px !important;
	font-family: inherit !important;
	font-size: 0.95rem !important;
	color: #0f172a !important;
	resize: vertical !important;
	box-sizing: border-box !important;
	margin-bottom: 12px !important;
}

.wprm-user-rating-modal-comment:focus {
	outline: none !important;
	border-color: #5e9918 !important;
	box-shadow: 0 0 0 3px rgba(94, 153, 24, 0.15) !important;
}

.wprm-user-rating-modal-field input {
	width: 100% !important;
	padding: 10px 14px !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 10px !important;
	font-size: 0.9rem !important;
	box-sizing: border-box !important;
	margin-bottom: 10px !important;
}

.wprm-user-rating-modal-field input:focus {
	outline: none !important;
	border-color: #5e9918 !important;
	box-shadow: 0 0 0 3px rgba(94, 153, 24, 0.15) !important;
}

.wprm-popup-modal-user-rating .wprm-popup-modal__footer {
	padding: 14px 22px !important;
	border-top: 1px solid #e2e8f0 !important;
	display: flex !important;
	justify-content: center !important;
}

.wprm-popup-modal-user-rating .wprm-popup-modal__btn {
	background: #5e9918 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 12px 28px !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	box-shadow: 0 4px 12px rgba(94, 153, 24, 0.3) !important;
	transition: all 0.15s !important;
}

.wprm-popup-modal-user-rating .wprm-popup-modal__btn:hover {
	background: #4c7d13 !important;
	transform: translateY(-1px) !important;
}

/* 10. Mobile Touch Responsiveness (Dedicated Mediavine Monetization Clearance) */
@media (max-width: 640px) {
	.wprm-popup-modal-cook-mode,
	.wprm-popup-modal-user-rating {
		z-index: 999990 !important;
	}

	.wprm-popup-modal-cook-mode .wprm-popup-modal__overlay,
	.wprm-popup-modal-user-rating .wprm-popup-modal__overlay {
		position: fixed !important;
		inset: 0 !important;
		padding: 0 !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		z-index: 999990 !important;
		background: rgba(15, 23, 42, 0.78) !important;
		backdrop-filter: blur(8px) !important;
		-webkit-backdrop-filter: blur(8px) !important;
	}

	.wprm-popup-modal-cook-mode .wprm-popup-modal__container,
	.wprm-popup-modal-user-rating .wprm-popup-modal__container {
		width: 100% !important;
		height: auto !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
		max-height: calc(100% - 95px - env(safe-area-inset-bottom, 0px)) !important;
		max-height: calc(100dvh - 95px - env(safe-area-inset-bottom, 0px)) !important;
		border-radius: 0 0 18px 18px !important;
		border: none !important;
		border-bottom: 2px solid #e2e8f0 !important;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
		display: flex !important;
		flex-direction: column !important;
		overflow: hidden !important;
		background: #ffffff !important;
	}

	.wprm-popup-modal-cook-mode .wprm-popup-modal__content,
	.wprm-popup-modal-user-rating .wprm-popup-modal__content {
		flex: 1 1 auto !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		padding: 12px 14px !important;
	}

	.wprm-popup-modal-cook-mode .wprm-popup-modal__header {
		padding: 14px 16px !important;
		padding-top: max(14px, env(safe-area-inset-top)) !important;
		min-height: 52px !important;
		box-sizing: border-box !important;
	}

	.wprm-popup-modal-cook-mode .wprm-popup-modal__title {
		font-size: 1rem !important;
		font-weight: 700 !important;
		color: #0f172a !important;
		flex: 1 !important;
		min-width: 0 !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.wprm-popup-modal-cook-mode .wprm-popup-modal__title::before {
		display: none !important;
	}

	.wprm-cook-mode-step-text-content {
		font-size: 0.94rem !important;
		line-height: 1.5 !important;
	}

	/* Compact Timer for Mobile */
	.tk-cook-step-timer-box {
		padding: 8px 12px !important;
		gap: 8px !important;
	}

	.tk-timer-label {
		display: none !important;
	}

	.tk-timer-clock {
		font-size: 1.2rem !important;
	}

	.tk-timer-clock::before {
		content: "⏱️ ";
		font-size: 0.95rem;
	}

	.tk-timer-btn {
		padding: 6px 12px !important;
		font-size: 0.8rem !important;
	}

	.wprm-popup-modal-cook-mode .wprm-popup-modal__footer,
	.wprm-popup-modal-user-rating .wprm-popup-modal__footer {
		padding: 10px 14px 14px 14px !important;
	}

	/* Foolproof 2-Row Grid for Mobile Navigation: NEVER overlaps! */
	.wprm-cook-mode-navigation {
		display: grid !important;
		grid-template-columns: 1fr 1fr !important;
		grid-template-rows: auto auto !important;
		grid-template-areas: 
			"progress progress"
			"prev     next" !important;
		gap: 8px 10px !important;
		width: 100% !important;
		align-items: center !important;
	}

	.wprm-cook-mode-progress {
		grid-area: progress !important;
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 auto 3px auto !important;
	}

	.wprm-cook-mode-progress-text {
		font-size: 0.76rem !important;
		font-weight: 600 !important;
		color: #64748b !important;
		margin-bottom: 2px !important;
	}

	.wprm-cook-mode-nav-prev {
		grid-area: prev !important;
		width: 100% !important;
		box-sizing: border-box !important;
		text-align: center !important;
		justify-content: center !important;
		padding: 9px 12px !important;
		font-size: 0.84rem !important;
	}

	.wprm-cook-mode-nav-next,
	.wprm-cook-mode-nav-close {
		grid-area: next !important;
		width: 100% !important;
		box-sizing: border-box !important;
		text-align: center !important;
		justify-content: center !important;
		padding: 9px 12px !important;
		font-size: 0.84rem !important;
	}

	.wprm-cook-mode-nav-prev[style*="display: none"] ~ .wprm-cook-mode-nav-next,
	.wprm-cook-mode-nav-prev[style*="display:none"] ~ .wprm-cook-mode-nav-next {
		grid-column: 1 / -1 !important;
	}
}

/* 11. Bot / Widget Suppression during Cook Mode (Prevents obstruction) */
body.tk-cook-mode-open #thermokoch-bot-root,
body:has(.wprm-popup-modal-cook-mode.is-open) #thermokoch-bot-root,
body:has(.wprm-popup-modal-cook-mode[style*="display: block"]) #thermokoch-bot-root {
	display: none !important;
}

/* ==========================================================================
   12. Recipe Card Buttons Layout (3 Desktop Top + 1 Centered | Mobile 2x2 Grid)
   Strictly Uniform Spacing, Equal Sizes & No Underlined Text
   ========================================================================== */
html body .wprm-recipe-template-thermochic-de .wprm-template-chic-buttons,
html body .wprm-recipe-template-thermochic .wprm-template-chic-buttons,
html body .wprm-template-chic-buttons,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-wrap,
html body .wprm-m3-buttons-top-row,
html body .wprm-m3-buttons-wrap {
	width: 100% !important;
	box-sizing: border-box !important;
	margin: 18px 0 !important;
	padding: 0 !important;
	clear: both !important;
}

.wprm-recipe-add-to-collection {
	display: none !important;
}

/* Audio button inside topRow if present: full width on top */
.ik-recipe-card-btn-wrap {
	grid-column: 1 / -1 !important;
	margin-bottom: 6px !important;
}

/* Desktop: 3 buttons on top row, 1 button centered underneath */
@media (min-width: 641px) {
	html body .wprm-recipe-template-thermochic-de .wprm-template-chic-buttons,
	html body .wprm-recipe-template-thermochic .wprm-template-chic-buttons,
	html body .wprm-template-chic-buttons,
	html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row,
	html body .wprm-m3-buttons-top-row {
		display: grid !important;
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 12px !important;
		align-items: stretch !important;
	}

	html body .wprm-template-chic-buttons > .wprm-recipe-cook-mode,
	html body .wprm-template-chic-buttons > *:nth-child(4),
	html body .wprm-m3-buttons-top-row > .wprm-recipe-cook-mode {
		grid-column: 2 !important; /* Centered under middle button */
	}
}

/* Mobile: Clean 2x2 grid with strictly identical 10px spacing in all directions */
@media (max-width: 640px) {
	html body .wprm-recipe-template-thermochic-de .wprm-template-chic-buttons,
	html body .wprm-recipe-template-thermochic .wprm-template-chic-buttons,
	html body .wprm-template-chic-buttons,
	html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row,
	html body .wprm-m3-buttons-top-row {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 10px !important;
		align-items: stretch !important;
	}
}

/* Explicit ordering for 2x2 diagonal symmetry & 3+1 desktop */
html body .wprm-recipe-template-thermochic-de .wprm-template-chic-buttons .wprm-recipe-print,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row .wprm-recipe-print,
html body .wprm-template-chic-buttons .wprm-recipe-print,
html body .wprm-m3-buttons-top-row .wprm-recipe-print {
	order: 1 !important;
}

html body .wprm-recipe-template-thermochic-de .wprm-template-chic-buttons .wprm-recipe-pin,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row .wprm-recipe-pin,
html body .wprm-template-chic-buttons .wprm-recipe-pin,
html body .wprm-m3-buttons-top-row .wprm-recipe-pin {
	order: 2 !important;
}

html body .wprm-recipe-template-thermochic-de .wprm-template-chic-buttons .tk-fav-btn,
html body .wprm-recipe-template-thermochic-de .wprm-template-chic-buttons .wprm-recipe-favorite-wrapper,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row .tk-fav-btn,
html body .wprm-template-chic-buttons .tk-fav-btn,
html body .wprm-m3-buttons-top-row .tk-fav-btn {
	order: 3 !important;
}

html body .wprm-recipe-template-thermochic-de .wprm-template-chic-buttons .wprm-recipe-cook-mode,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row .wprm-recipe-cook-mode,
html body .wprm-template-chic-buttons .wprm-recipe-cook-mode,
html body .wprm-m3-buttons-top-row .wprm-recipe-cook-mode {
	order: 4 !important;
}

/* HARD OVERRIDE of any rogue margins */
html body .wprm-template-chic-buttons > *,
html body .wprm-template-chic-buttons a,
html body .wprm-template-chic-buttons button,
html body .wprm-m3-buttons-top-row > *,
html body .wprm-m3-buttons-top-row a,
html body .wprm-m3-buttons-top-row button {
	margin: 0 !important;
	min-width: 0 !important;
}

/* ALL 4 buttons must always have the exact same size, height, font, padding and NO underline */
html body .wprm-recipe .wprm-template-chic-buttons a,
html body .wprm-recipe .wprm-template-chic-buttons button,
html body .wprm-recipe .wprm-template-chic-buttons .wprm-recipe-link,
html body .wprm-recipe .wprm-template-chic-buttons .wprm-recipe-cook-mode,
html body .wprm-recipe .wprm-template-chic-buttons .wprm-recipe-print,
html body .wprm-recipe .wprm-template-chic-buttons .wprm-recipe-pin,
html body .wprm-recipe .wprm-template-chic-buttons .tk-fav-btn,
html body .wprm-template-chic-buttons a,
html body .wprm-template-chic-buttons button,
html body .wprm-template-chic-buttons .wprm-recipe-link,
html body .wprm-template-chic-buttons .wprm-recipe-cook-mode,
html body .wprm-template-chic-buttons .wprm-recipe-print,
html body .wprm-template-chic-buttons .wprm-recipe-pin,
html body .wprm-template-chic-buttons .tk-fav-btn,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row a,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row button,
html body .wprm-m3-buttons-top-row a,
html body .wprm-m3-buttons-top-row button,
html body .wprm-m3-buttons-top-row .wprm-recipe-cook-mode,
html body .wprm-m3-buttons-top-row .wprm-recipe-print,
html body .wprm-m3-buttons-top-row .wprm-recipe-pin,
html body .wprm-m3-buttons-top-row .tk-fav-btn,
html body .wprm-recipe-template-thermochic-de .wprm-recipe-pin-inline-button,
html body .wprm-recipe-template-thermochic-de .wprm-recipe-print-inline-button,
html body .wprm-recipe-template-thermochic-de .wprm-recipe-cook-mode-inline-button,
html body .wprm-recipe-template-thermochic-de .tk-fav-btn {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	min-width: 0 !important;
	height: 44px !important;
	min-height: 44px !important;
	max-height: 44px !important;
	padding: 0 8px !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	border-radius: 10px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	outline: none !important;
	box-shadow: none !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	text-align: center !important;
	transition: all 0.2s ease !important;
}

/* Brand Theme Green for Drucken, Merken & Jetzt Kochen */
html body .wprm-recipe .wprm-template-chic-buttons .wprm-recipe-print,
html body .wprm-recipe .wprm-template-chic-buttons .tk-fav-btn,
html body .wprm-recipe .wprm-template-chic-buttons .wprm-recipe-cook-mode,
html body .wprm-template-chic-buttons .wprm-recipe-print,
html body .wprm-template-chic-buttons .tk-fav-btn,
html body .wprm-template-chic-buttons .wprm-recipe-cook-mode,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row .wprm-recipe-print,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row .tk-fav-btn,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row .wprm-recipe-cook-mode,
html body .wprm-recipe-template-thermochic-de .wprm-recipe-print-inline-button,
html body .wprm-recipe-template-thermochic-de .tk-fav-btn,
html body .wprm-recipe-template-thermochic-de .wprm-recipe-cook-mode-inline-button,
html body .wprm-m3-buttons-top-row .wprm-recipe-print,
html body .wprm-m3-buttons-top-row .tk-fav-btn,
html body .wprm-m3-buttons-top-row .wprm-recipe-cook-mode {
	background-color: #5e9918 !important;
	border: 1px solid #5e9918 !important;
	color: #ffffff !important;
}

/* White card with 1px dark border for Rezept pinnen */
html body .wprm-recipe .wprm-template-chic-buttons .wprm-recipe-pin,
html body .wprm-template-chic-buttons .wprm-recipe-pin,
html body .wprm-recipe-template-thermokoch-m3-v2 .wprm-m3-buttons-top-row .wprm-recipe-pin,
html body .wprm-recipe-template-thermochic-de .wprm-recipe-pin-inline-button,
html body .wprm-m3-buttons-top-row .wprm-recipe-pin {
	border: 1px solid #616161 !important;
	background-color: #ffffff !important;
	color: #616161 !important;
}

/* Ensure clean spacing between icon and text across all buttons */
html body .wprm-template-chic-buttons .wprm-recipe-icon,
html body .wprm-template-chic-buttons .tk-fav-icon,
html body .wprm-m3-buttons-top-row .wprm-recipe-icon,
html body .wprm-m3-buttons-top-row .tk-fav-icon {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	margin-right: 7px !important;
	flex-shrink: 0 !important;
}

html body .wprm-template-chic-buttons .wprm-recipe-icon svg,
html body .wprm-template-chic-buttons .tk-fav-icon svg,
html body .wprm-m3-buttons-top-row .wprm-recipe-icon svg,
html body .wprm-m3-buttons-top-row .tk-fav-icon svg,
html body .wprm-template-chic-buttons svg,
html body .wprm-m3-buttons-top-row svg {
	display: block !important;
	width: 16px !important;
	height: 16px !important;
}

html body .wprm-template-chic-buttons a:hover,
html body .wprm-template-chic-buttons button:hover,
html body .wprm-m3-buttons-top-row a:hover,
html body .wprm-m3-buttons-top-row button:hover {
	text-decoration: none !important;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
	transform: translateY(-1px) !important;
}

/* Prevent underline on inner text spans */
html body .wprm-template-chic-buttons span:not(.wprm-recipe-icon),
html body .wprm-template-chic-buttons .wprm-recipe-cook-mode span:not(.wprm-recipe-icon),
html body .wprm-template-chic-buttons .wprm-recipe-link span:not(.wprm-recipe-icon),
html body .wprm-m3-buttons-top-row span:not(.wprm-recipe-icon) {
	text-decoration: none !important;
	border-bottom: none !important;
}



/* ==========================================================================
 * WOCHENPLANER & EINKAUFSLISTE (Thermokoch Theme & Mediavine Clearance)
 * ========================================================================== */

/* 1. Trigger Box (Am Ende der Zutatenliste) */
.tk-planner-box {
	margin-top: 24px !important;
	padding: 14px 18px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
	clear: both !important;
	width: 100% !important;
}

.tk-planner-box-content {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-width: 0 !important;
	flex: 1 !important;
}

.tk-planner-box-icon {
	font-size: 24px !important;
	line-height: 1 !important;
	flex-shrink: 0 !important;
}

.tk-planner-box-text {
	min-width: 0 !important;
	font-family: inherit !important;
}

.tk-planner-box-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	display: block !important;
	margin-bottom: 2px !important;
	line-height: 1.3 !important;
}

.tk-planner-box-sub {
	font-size: 13px !important;
	color: #475569 !important;
	display: block !important;
	line-height: 1.35 !important;
}

.tk-planner-box-mobile-title {
	display: none !important;
}

.tk-planner-box-btn {
	background: #5e9918 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 9px 18px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
	box-shadow: 0 2px 4px rgba(94, 153, 24, 0.25) !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 7px !important;
	transition: background 0.15s ease, transform 0.1s ease !important;
}

.tk-planner-box-btn:hover {
	background: #4d7e13 !important;
	transform: translateY(-1px) !important;
}

.tk-planner-box-btn:active {
	background: #3f6710 !important;
	transform: translateY(0) !important;
}

.tk-planner-btn-icon {
	font-size: 14px !important;
	line-height: 1 !important;
}

.tk-planner-btn-text-desktop {
	display: inline !important;
}

.tk-planner-btn-text-mobile {
	display: none !important;
}

/* Mobile Responsive: VARIANT M2 (Strict 1-line clean layout) */
@media (max-width: 600px) {
	.tk-planner-box {
		margin-top: 18px !important;
		padding: 10px 14px !important;
		gap: 10px !important;
	}

	.tk-planner-box-icon {
		font-size: 18px !important;
	}

	.tk-planner-box-title,
	.tk-planner-box-sub {
		display: none !important;
	}

	.tk-planner-box-mobile-title {
		display: inline-block !important;
		font-size: 13.5px !important;
		font-weight: 600 !important;
		color: #0f172a !important;
		white-space: nowrap !important;
		line-height: 1.3 !important;
	}

	.tk-planner-btn-text-desktop {
		display: none !important;
	}

	.tk-planner-btn-text-mobile {
		display: inline !important;
	}

	.tk-planner-box-btn {
		padding: 7px 14px !important;
		font-size: 13px !important;
		gap: 5px !important;
	}
}

/* 2. Wochenplaner Modal Container */
.tk-planner-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 9999999 !important;
	display: none;
	opacity: 0;
	transition: opacity 0.2s ease;
	box-sizing: border-box !important;
}

.tk-planner-modal.active {
	display: flex !important;
	opacity: 1 !important;
}

.tk-planner-modal-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, 0.65) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
}

/* Desktop Modal Card: Centered with Mediavine adhesive leaderboard clearance */
.tk-planner-modal-dialog {
	position: relative !important;
	z-index: 1 !important;
	width: 94% !important;
	max-width: 660px !important;
	margin: auto !important;
	margin-bottom: 110px !important; /* Leaves full space for 90px bottom sticky ad */
	max-height: calc(100vh - 140px) !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
	display: flex !important;
	flex-direction: column !important;
	overflow: hidden !important;
	box-sizing: border-box !important;
	border: 1px solid #e2e8f0 !important;
	line-height: 1.4 !important;
}

/* Mobile Modal Card (Dedicated Mediavine Monetization Clearance) */
@media (max-width: 640px) {
	.tk-planner-modal-dialog {
		position: absolute !important;
		top: 10px !important;
		left: 10px !important;
		right: 10px !important;
		margin: 0 !important;
		width: calc(100% - 20px) !important;
		bottom: calc(95px + env(safe-area-inset-bottom, 0px)) !important;
		max-height: calc(100% - 105px - env(safe-area-inset-bottom, 0px)) !important;
		max-height: calc(100dvh - 105px - env(safe-area-inset-bottom, 0px)) !important;
		border-radius: 18px !important;
	}
}

/* Modal Header */
.tk-planner-modal-header {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 14px 18px !important;
	background: #ffffff !important;
	border-bottom: 1px solid #e2e8f0 !important;
	flex-shrink: 0 !important;
}

.tk-planner-modal-title {
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
}

.tk-planner-modal-close-btn {
	background: transparent !important;
	border: none !important;
	font-size: 20px !important;
	line-height: 1 !important;
	color: #64748b !important;
	cursor: pointer !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 8px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: all 0.15s ease !important;
}

.tk-planner-modal-close-btn:hover {
	background: #f1f5f9 !important;
	color: #0f172a !important;
}

/* Modal Navigation Tabs */
.tk-planner-tabs {
	display: flex !important;
	background: #f8fafc !important;
	border-bottom: 1px solid #e2e8f0 !important;
	padding: 0 12px !important;
	gap: 4px !important;
	flex-shrink: 0 !important;
	overflow-x: auto !important;
}

.tk-planner-tab-btn {
	background: transparent !important;
	border: none !important;
	padding: 10px 14px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	color: #64748b !important;
	cursor: pointer !important;
	border-bottom: 2.5px solid transparent !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	white-space: nowrap !important;
	transition: all 0.15s ease !important;
}

.tk-planner-tab-btn:hover {
	color: #5e9918 !important;
}

.tk-planner-tab-btn.active {
	color: #5e9918 !important;
	border-bottom-color: #5e9918 !important;
	font-weight: 700 !important;
}

.tk-tab-txt-short {
	display: none !important;
}

.tk-tab-txt-full {
	display: inline !important;
}

@media (max-width: 640px) {
	.tk-planner-tabs {
		padding: 0 4px !important;
		justify-content: space-around !important;
		gap: 2px !important;
	}
	.tk-planner-tab-btn {
		padding: 9px 8px !important;
		font-size: 12.5px !important;
		gap: 4px !important;
	}
	.tk-tab-txt-short {
		display: inline !important;
	}
	.tk-tab-txt-full {
		display: none !important;
	}
}

.tk-planner-badge {
	background: #f1f8e9 !important;
	color: #5e9918 !important;
	border: 1px solid #c8e6c9 !important;
	border-radius: 10px !important;
	padding: 1px 6px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
}

/* Modal Body & Panes */
.tk-planner-body {
	flex: 1 !important;
	overflow-y: auto !important;
	-webkit-overflow-scrolling: touch !important;
	padding: 16px 18px !important;
	box-sizing: border-box !important;
}

.tk-planner-pane {
	display: none;
}

.tk-planner-pane.active {
	display: block !important;
}

/* -------------------------------------------------------------
 * TAB 1: REZEPT EINPLANEN
 * ------------------------------------------------------------- */
.tk-planner-target-recipe-card {
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	padding: 12px 14px !important;
	margin-bottom: 16px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
}

.tk-planner-target-title {
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	margin: 0 !important;
}

.tk-planner-target-serv {
	font-size: 12px !important;
	color: #64748b !important;
}

.tk-planner-field-group {
	margin-bottom: 16px !important;
}

.tk-planner-field-label {
	display: block !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #334155 !important;
	margin-bottom: 8px !important;
}

/* Servings Selector (+ / -) */
.tk-planner-servings-picker {
	display: inline-flex !important;
	align-items: center !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: #ffffff !important;
}

.tk-planner-serv-btn {
	background: #f8fafc !important;
	border: none !important;
	width: 36px !important;
	height: 36px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	color: #334155 !important;
	cursor: pointer !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background 0.15s ease !important;
}

.tk-planner-serv-btn:hover {
	background: #e2e8f0 !important;
	color: #5e9918 !important;
}

.tk-planner-serv-val {
	padding: 0 14px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
}

/* Day & Meal Chips (Thermokoch Green) */
.tk-planner-chips-grid {
	display: flex !important;
	flex-wrap: wrap !important;
	gap: 6px !important;
}

.tk-planner-chip-btn {
	background: #f8fafc !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 8px !important;
	padding: 8px 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #334155 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.tk-planner-chip-btn:hover {
	border-color: #5e9918 !important;
	color: #5e9918 !important;
}

.tk-planner-chip-btn.active {
	background: #5e9918 !important;
	border-color: #5e9918 !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	box-shadow: 0 2px 4px rgba(94, 153, 24, 0.25) !important;
}

/* Confirm Button */
.tk-planner-confirm-btn {
	width: 100% !important;
	background: #5e9918 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 12px 20px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	box-shadow: 0 3px 6px rgba(94, 153, 24, 0.3) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	transition: background 0.15s ease, transform 0.1s ease !important;
	margin-top: 8px !important;
}

.tk-planner-confirm-btn:hover {
	background: #4d7e13 !important;
	transform: translateY(-1px) !important;
}

.tk-planner-confirm-btn:active {
	background: #3f6710 !important;
	transform: translateY(0) !important;
}

/* Toast Message */
.tk-planner-toast {
	margin-top: 10px !important;
	padding: 8px 14px !important;
	background: #2e7d32 !important;
	color: #ffffff !important;
	border-radius: 8px !important;
	font-size: 13px !important;
	line-height: 1.35 !important;
	font-weight: 600 !important;
	text-align: center !important;
	display: none;
	animation: tkFadeIn 0.2s ease;
}

@keyframes tkFadeIn {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------
 * TAB 2: WOCHENPLAN (MO-SO)
 * ------------------------------------------------------------- */
.tk-planner-week-toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 14px !important;
	gap: 12px !important;
	flex-wrap: wrap !important;
}

.tk-planner-week-title {
	font-weight: 600 !important;
	color: #334155 !important;
	font-size: 15px !important;
	white-space: nowrap !important;
}

.tk-planner-week-actions {
	display: flex !important;
	gap: 8px !important;
}

@media (max-width: 600px) {
	.tk-planner-week-toolbar {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 10px !important;
		margin-bottom: 16px !important;
	}
	.tk-planner-week-title {
		width: 100% !important;
		white-space: nowrap !important;
		font-size: 14.5px !important;
		text-align: left !important;
	}
	.tk-planner-week-actions {
		width: 100% !important;
		display: flex !important;
		gap: 8px !important;
	}
	.tk-planner-week-actions > .tk-planner-btn-outline {
		flex: 1 !important;
		text-align: center !important;
		justify-content: center !important;
		padding: 8px 10px !important;
		font-size: 13px !important;
		white-space: nowrap !important;
	}
}

.tk-planner-btn-outline {
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	padding: 6px 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #475569 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.tk-planner-btn-outline:hover {
	border-color: #5e9918 !important;
	color: #5e9918 !important;
}

.tk-planner-btn-danger {
	color: #dc2626 !important;
	border-color: #fecaca !important;
}

.tk-planner-btn-danger:hover {
	background: #fef2f2 !important;
	border-color: #dc2626 !important;
	color: #dc2626 !important;
}

.tk-planner-btn-primary {
	background: #5e9918 !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 6px !important;
	padding: 6px 14px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	box-shadow: 0 1px 3px rgba(94, 153, 24, 0.25) !important;
}

.tk-planner-btn-primary:hover {
	background: #4d7e13 !important;
}

.tk-planner-week-grid {
	display: flex !important;
	flex-direction: column !important;
	gap: 10px !important;
}

.tk-planner-day-card {
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	position: relative !important;
	transition: all 0.2s ease !important;
}

.tk-planner-day-card.drop-active {
	border-color: #5e9918 !important;
	box-shadow: 0 0 0 2px #f1f8e9 !important;
}

.tk-planner-day-header {
	background: #f8fafc !important;
	border-bottom: 1px solid #e2e8f0 !important;
	border-top-left-radius: 7px !important;
	border-top-right-radius: 7px !important;
	padding: 8px 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
}

.tk-planner-day-name {
	font-size: 13px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
}

.tk-planner-day-name.is-today {
	color: #5e9918 !important;
}

.tk-planner-day-name.is-today::after {
	content: 'Heute';
	background: #f1f8e9;
	color: #5e9918;
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 4px;
	font-weight: 700;
}

.tk-planner-day-meals {
	padding: 8px 12px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
	min-height: 48px !important;
}

.tk-planner-empty-day {
	font-size: 12px !important;
	color: #94a3b8 !important;
	font-style: italic !important;
	padding: 8px 4px !important;
	text-align: center !important;
	border: 1px dashed #e2e8f0 !important;
	border-radius: 6px !important;
	background: #fafafa !important;
}

/* Meal Row (Draggable & Accessible) */
.tk-planner-meal-row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	padding: 6px 10px !important;
	min-height: 44px !important;
	background: #f8fafc !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 8px !important;
	cursor: grab !important;
	user-select: none !important;
	position: relative !important;
	box-sizing: border-box !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.tk-planner-meal-row:hover {
	background: #ffffff !important;
	border-color: #cbd5e1 !important;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05) !important;
}

.tk-planner-meal-row.dragging {
	opacity: 0.35 !important;
	transform: scale(0.98) !important;
	background: #f1f8e9 !important;
	border: 1px dashed #5e9918 !important;
	cursor: grabbing !important;
}

.tk-planner-meal-header {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 8px !important;
	width: 100% !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

.tk-planner-meal-header-left {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 8px !important;
	min-width: 0 !important;
	flex: 1 !important;
	box-sizing: border-box !important;
}

.tk-planner-meal-name {
	display: inline-flex !important;
	align-items: center !important;
	flex: 1 !important;
	min-width: 0 !important;
	height: 26px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #0f172a !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.tk-tag-txt-desktop {
	display: inline !important;
}

.tk-tag-txt-mobile {
	display: none !important;
}

.tk-drag-grip {
	color: #94a3b8 !important;
	cursor: grab !important;
	font-size: 14px !important;
	line-height: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 14px !important;
	height: 26px !important;
	border-radius: 4px !important;
	transition: color 0.15s !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
}

.tk-planner-meal-row:hover .tk-drag-grip {
	color: #5e9918 !important;
}

/* 1-Tap Meal Category Dropdown */
.tk-meal-tag-wrapper {
	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
}

.tk-planner-meal-tag {
	background: #f1f8e9 !important;
	color: #5e9918 !important;
	border: 1px solid #c8e6c9 !important;
	border-radius: 9999px !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	padding: 0 9px !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
	height: 26px !important;
	min-height: 26px !important;
	max-height: 26px !important;
	cursor: pointer !important;
	vertical-align: middle !important;
	transition: all 0.15s ease !important;
}

.tk-planner-meal-tag:hover {
	filter: brightness(0.96) !important;
	transform: translateY(-1px) !important;
}

.tk-planner-meal-tag:active {
	transform: scale(0.96) !important;
}

.tk-tag-arrow {
	font-size: 9px !important;
	margin-left: 3px !important;
	opacity: 0.8 !important;
}

.tk-tag-dropdown-menu {
	display: none !important;
	position: absolute !important;
	left: 0 !important;
	top: calc(100% + 4px) !important;
	z-index: 1000 !important;
	background: #ffffff !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
	border: 1px solid #e2e8f0 !important;
	padding: 6px !important;
	width: 200px !important;
	text-align: left !important;
	animation: tk-tag-dd-appear 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tk-tag-dropdown-menu.visible {
	display: block !important;
}

@keyframes tk-tag-dd-appear {
	from {
		opacity: 0;
		transform: translateY(-4px) scale(0.98);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.tk-tag-dd-title {
	padding: 6px 10px 4px !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	color: #94a3b8 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	margin-bottom: 4px !important;
}

.tk-tag-dd-items {
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
}

.tk-tag-dd-btn {
	width: 100% !important;
	padding: 8px 10px !important;
	min-height: 38px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	background: transparent !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	color: #334155 !important;
	transition: all 0.15s ease !important;
	text-align: left !important;
}

.tk-tag-dd-btn:hover {
	background: #f8fafc !important;
	color: #0f172a !important;
}

.tk-tag-dd-btn:active {
	background: #f1f5f9 !important;
}

.tk-tag-dd-btn.active {
	background: #f1f8e9 !important;
	color: #5e9918 !important;
	font-weight: 700 !important;
}

.tk-tag-dd-btn-left {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

.tk-tag-dd-icon {
	font-size: 15px !important;
	line-height: 1 !important;
}

.tk-tag-dd-check {
	font-size: 12px !important;
	color: #5e9918 !important;
	font-weight: 800 !important;
}

/* Meal Actions (Delete Button) */
.tk-planner-meal-actions {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	margin: 0 0 0 auto !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
}

.tk-planner-meal-del-btn {
	width: 26px !important;
	height: 26px !important;
	min-width: 26px !important;
	min-height: 26px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	border-radius: 6px !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	padding: 0 !important;
	margin: 0 !important;
	flex-shrink: 0 !important;
	box-sizing: border-box !important;
}

.tk-planner-meal-del-btn {
	background: #ffffff !important;
	border: 1px solid #e2e8f0 !important;
	color: #94a3b8 !important;
}

.tk-planner-meal-del-btn:hover {
	color: #dc2626 !important;
	border-color: #fca5a5 !important;
	background: #fef2f2 !important;
}

/* Quick-Move Modal */
.tk-quick-move-modal {
	position: fixed !important;
	inset: 0 !important;
	z-index: 999995 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 16px !important;
	box-sizing: border-box !important;
}

.tk-quick-move-modal.hidden {
	display: none !important;
}

.tk-quick-move-backdrop {
	position: absolute !important;
	inset: 0 !important;
	background: rgba(15, 23, 42, 0.6) !important;
	backdrop-filter: blur(4px) !important;
	-webkit-backdrop-filter: blur(4px) !important;
}

.tk-quick-move-dialog {
	position: relative !important;
	z-index: 1 !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	box-shadow: 0 20px 45px rgba(0, 0, 0, 0.25) !important;
	border: 1px solid rgba(226, 232, 240, 0.9) !important;
	width: 100% !important;
	max-width: 380px !important;
	padding: 20px !important;
	box-sizing: border-box !important;
	animation: tk-qm-pop 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

@keyframes tk-qm-pop {
	from {
		opacity: 0;
		transform: scale(0.95) translateY(6px);
	}
	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.tk-quick-move-header {
	display: flex !important;
	align-items: flex-start !important;
	justify-content: space-between !important;
	padding-bottom: 12px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	margin-bottom: 14px !important;
}

.tk-quick-move-sub {
	font-size: 11px !important;
	font-weight: 700 !important;
	color: #5e9918 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}

.tk-quick-move-title {
	font-size: 14.5px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	max-width: 260px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	margin-top: 2px !important;
}

.tk-quick-move-close {
	width: 28px !important;
	height: 28px !important;
	border-radius: 9999px !important;
	background: #f1f5f9 !important;
	border: none !important;
	color: #64748b !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.tk-quick-move-close:hover {
	background: #e2e8f0 !important;
	color: #0f172a !important;
}

.tk-qm-label {
	display: block !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	color: #475569 !important;
	margin-bottom: 8px !important;
}

.tk-qm-chips-grid {
	display: grid !important;
	gap: 6px !important;
}

.tk-qm-day-chips {
	grid-template-columns: repeat(4, 1fr) !important;
}

.tk-qm-meal-chips {
	grid-template-columns: repeat(2, 1fr) !important;
}

.tk-qm-order-chips {
	grid-template-columns: repeat(3, 1fr) !important;
}

.tk-qm-chip {
	padding: 8px 6px !important;
	border-radius: 10px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	border: 1px solid #e2e8f0 !important;
	background: #ffffff !important;
	color: #334155 !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
}

.tk-qm-chip:hover {
	border-color: #cbd5e1 !important;
	background: #f8fafc !important;
}

.tk-qm-chip.active {
	background: #0f172a !important;
	border-color: #0f172a !important;
	color: #ffffff !important;
	font-weight: 700 !important;
}

.tk-quick-move-footer {
	margin-top: 18px !important;
	padding-top: 14px !important;
	border-top: 1px solid #f1f5f9 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 8px !important;
}

.tk-qm-btn-cancel {
	padding: 8px 14px !important;
	border-radius: 8px !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	background: transparent !important;
	border: none !important;
	color: #64748b !important;
	cursor: pointer !important;
}

.tk-qm-btn-cancel:hover {
	background: #f1f5f9 !important;
	color: #0f172a !important;
}

.tk-qm-btn-confirm {
	padding: 9px 16px !important;
	border-radius: 8px !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	background: #5e9918 !important;
	border: none !important;
	color: #ffffff !important;
	cursor: pointer !important;
	box-shadow: 0 2px 6px rgba(94, 153, 24, 0.3) !important;
	transition: all 0.15s ease !important;
}

.tk-qm-btn-confirm:hover {
	background: #4b7a13 !important;
	transform: translateY(-1px) !important;
}

/* Global Planner Toast */
.tk-planner-global-toast {
	position: fixed !important;
	bottom: 24px !important;
	right: 24px !important;
	z-index: 999999 !important;
	background: #0f172a !important;
	color: #ffffff !important;
	padding: 12px 20px !important;
	border-radius: 12px !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
	pointer-events: none !important;
	opacity: 0 !important;
	transform: translateY(20px) !important;
	transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.tk-planner-global-toast.visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* -------------------------------------------------------------
 * TAB 3: EINKAUFSLISTE
 * ------------------------------------------------------------- */
.tk-shopping-toolbar {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	margin-bottom: 14px !important;
	gap: 10px !important;
	flex-wrap: wrap !important;
}

.tk-shopping-mode-toggle {
	display: inline-flex !important;
	background: #f1f5f9 !important;
	border-radius: 8px !important;
	padding: 3px !important;
	gap: 2px !important;
}

.tk-shopping-toggle-btn {
	background: transparent !important;
	border: none !important;
	padding: 5px 10px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	color: #64748b !important;
	border-radius: 6px !important;
	cursor: pointer !important;
	transition: all 0.15s ease !important;
}

.tk-shopping-toggle-btn.active {
	background: #5e9918 !important;
	color: #ffffff !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.tk-shopping-actions {
	display: flex !important;
	gap: 6px !important;
}

.tk-shopping-action-btn {
	background: #ffffff !important;
	border: 1px solid #5e9918 !important;
	color: #5e9918 !important;
	border-radius: 6px !important;
	padding: 5px 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
	transition: all 0.15s ease !important;
}

.tk-shopping-action-btn:hover {
	background: #5e9918 !important;
	color: #ffffff !important;
}

.tk-shopping-list {
	display: flex !important;
	flex-direction: column !important;
	gap: 6px !important;
}

.tk-shopping-empty {
	padding: 24px 16px !important;
	text-align: center !important;
	color: #64748b !important;
	font-size: 13.5px !important;
	background: #f8fafc !important;
	border-radius: 10px !important;
	border: 1px dashed #cbd5e1 !important;
}

.tk-shopping-item {
	display: flex !important;
	align-items: flex-start !important;
	gap: 10px !important;
	padding: 8px 10px !important;
	border-radius: 8px !important;
	background: #ffffff !important;
	border: 1px solid #f1f5f9 !important;
	transition: background 0.15s ease !important;
}

.tk-shopping-item:hover {
	background: #f8fafc !important;
}

.tk-shopping-item.checked {
	opacity: 0.55 !important;
	background: #f8fafc !important;
}

.tk-shopping-item.checked .tk-shopping-item-name {
	text-decoration: line-through !important;
	color: #94a3b8 !important;
}

.tk-shopping-checkbox {
	width: 17px !important;
	height: 17px !important;
	margin-top: 2px !important;
	accent-color: #5e9918 !important;
	cursor: pointer !important;
	flex-shrink: 0 !important;
}

.tk-shopping-item-content {
	flex: 1 !important;
	min-width: 0 !important;
	cursor: pointer !important;
}

.tk-shopping-item-main {
	font-size: 13.5px !important;
	color: #0f172a !important;
	line-height: 1.35 !important;
}

.tk-shopping-item-qty {
	font-weight: 700 !important;
	color: #0f172a !important;
}

.tk-shopping-item-source {
	display: block !important;
	font-size: 11px !important;
	color: #64748b !important;
	margin-top: 2px !important;
	font-style: italic !important;
}

/* Grouped View by Recipe */
.tk-shopping-recipe-group {
	border: 1px solid #e2e8f0 !important;
	border-radius: 10px !important;
	margin-bottom: 14px !important;
	overflow: hidden !important;
	background: #ffffff !important;
}

.tk-shopping-group-header {
	background: #f8fafc !important;
	border-bottom: 1px solid #e2e8f0 !important;
	padding: 8px 12px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px !important;
}

.tk-shopping-group-left {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;
	min-width: 0 !important;
	flex: 1 !important;
}

.tk-shopping-group-title {
	font-size: 13.5px !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	line-height: 1.25 !important;
	margin: 0 !important;
	word-break: break-word !important;
}

.tk-shopping-group-servings {
	font-size: 12px !important;
	color: #64748b !important;
	font-weight: 600 !important;
	white-space: nowrap !important;
	flex-shrink: 0 !important;
	line-height: 1.25 !important;
	margin-left: auto !important;
}

.tk-shopping-group-items {
	padding: 8px 10px !important;
	display: flex !important;
	flex-direction: column !important;
	gap: 4px !important;
}

/* ==========================================================================
   4. Standalone Page Container & Tiled Wallpaper Background [thermokoch_wochenplaner]
   ========================================================================== */
body.page-id-20244,
body:has(.tk-standalone-wochenplaner),
body:has(#tk-standalone-wochenplaner) {
	background-color: #faf8f2 !important;
	background-image: url('../images/wochenplaner-bg.webp?v=1.4.1') !important;
	background-repeat: repeat !important;
	background-size: 382px 512px !important;
	background-attachment: fixed !important;
}

@media (max-width: 768px) {
	body.page-id-20244,
	body:has(.tk-standalone-wochenplaner),
	body:has(#tk-standalone-wochenplaner) {
		background-attachment: scroll !important;
	}
}

/* Ensure Astra / theme wrappers allow background wallpaper to show through */
body.page-id-20244 #page,
body.page-id-20244 #content,
body.page-id-20244 .site-content,
body.page-id-20244 .ast-container,
body:has(.tk-standalone-wochenplaner) #page,
body:has(.tk-standalone-wochenplaner) #content,
body:has(.tk-standalone-wochenplaner) .site-content,
body:has(.tk-standalone-wochenplaner) .ast-container {
	background: transparent !important;
}

.tk-standalone-wochenplaner {
	max-width: 860px !important;
	margin: 20px auto 40px !important;
	background: #ffffff !important;
	border: 1px solid rgba(0, 0, 0, 0.08) !important;
	border-radius: 16px !important;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04) !important;
	overflow: hidden !important;
	padding: 24px !important;
	box-sizing: border-box !important;
	position: relative !important;
	z-index: 2 !important;
}

.tk-standalone-wochenplaner .tk-planner-tabs {
	background: transparent !important;
	border-bottom: 2px solid #e2e8f0 !important;
	padding: 0 !important;
	margin-bottom: 20px !important;
}

.tk-standalone-wochenplaner .tk-planner-tab-btn {
	padding: 10px 20px !important;
	font-size: 15px !important;
}

/* ==========================================================================
   5. Center Title & Frosted Badge Pill for Standalone Wochenplaner Card
   ========================================================================== */
body.page-id-20244 .entry-header,
body:has(.tk-standalone-wochenplaner) .entry-header {
	text-align: center !important;
	max-width: 860px !important;
	margin: 24px auto 16px !important;
}

body.page-id-20244 .entry-title,
body:has(.tk-standalone-wochenplaner) .entry-title {
	text-align: center !important;
	background: rgba(255, 255, 255, 0.94) !important;
	backdrop-filter: blur(8px) !important;
	-webkit-backdrop-filter: blur(8px) !important;
	display: inline-block !important;
	padding: 10px 28px !important;
	border-radius: 30px !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06) !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	font-weight: 700 !important;
	color: #1e293b !important;
}

/* ==========================================================================
   6. Desktop Font Size Enlargement (From "DIN A4 Drucken, Plan leeren usw." downwards)
   ========================================================================== */
@media (min-width: 641px) {
	/* Week Toolbar & Action Buttons */
	.tk-planner-week-toolbar {
		margin-bottom: 16px !important;
		gap: 12px !important;
	}

	.tk-planner-btn-outline {
		padding: 8px 16px !important;
		font-size: 14px !important;
		border-radius: 8px !important;
	}

	.tk-planner-btn-primary {
		padding: 8px 18px !important;
		font-size: 14px !important;
		border-radius: 8px !important;
	}

	/* Day Cards & Headers */
	.tk-planner-day-header {
		padding: 10px 14px !important;
	}

	.tk-planner-day-name {
		font-size: 15px !important;
	}

	.tk-planner-day-name.is-today::after {
		font-size: 11px !important;
		padding: 2px 7px !important;
	}

	.tk-planner-empty-day {
		font-size: 13.5px !important;
		padding: 6px 4px !important;
	}

	/* Meal Rows on Desktop */
	.tk-planner-meal-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 7px 12px !important;
		min-height: 44px !important;
	}

	.tk-tag-txt-desktop {
		display: inline !important;
	}

	.tk-tag-txt-mobile {
		display: none !important;
	}

	.tk-planner-meal-name {
		font-size: 14.5px !important;
		height: 26px !important;
	}

	.tk-planner-meal-tag {
		font-size: 11.5px !important;
		padding: 0 10px !important;
		height: 26px !important;
		min-height: 26px !important;
		max-height: 26px !important;
	}

	.tk-planner-meal-del-btn {
		width: 26px !important;
		height: 26px !important;
		font-size: 13px !important;
	}

	/* Shopping Toolbar & List on Desktop */
	.tk-shopping-toolbar {
		margin-bottom: 16px !important;
	}

	.tk-shopping-toggle-btn {
		padding: 7px 14px !important;
		font-size: 13.5px !important;
	}

	.tk-shopping-action-btn {
		padding: 7px 15px !important;
		font-size: 14px !important;
		border-radius: 8px !important;
	}

	.tk-shopping-empty {
		font-size: 15px !important;
		padding: 32px 20px !important;
	}

	.tk-shopping-item {
		padding: 10px 12px !important;
		gap: 12px !important;
	}

	.tk-shopping-item-main {
		font-size: 15px !important;
		line-height: 1.4 !important;
	}

	.tk-shopping-item-source {
		font-size: 12.5px !important;
		margin-top: 3px !important;
	}

	.tk-shopping-group-header {
		padding: 10px 14px !important;
	}

	.tk-shopping-group-title {
		font-size: 15px !important;
		line-height: 1.25 !important;
	}

	.tk-shopping-group-servings {
		font-size: 13px !important;
		line-height: 1.25 !important;
	}

	.tk-shopping-checkbox {
		width: 19px !important;
		height: 19px !important;
	}
}

@media (max-width: 640px) {
	.tk-standalone-wochenplaner {
		padding: 12px 10px !important;
		margin: 10px auto 30px !important;
		border-radius: 12px !important;
	}

	.tk-planner-body {
		padding: 10px 8px !important;
	}

	.tk-planner-day-meals {
		padding: 8px 8px !important;
		gap: 8px !important;
	}

	.tk-planner-day-header {
		padding: 8px 10px !important;
	}

	.tk-planner-day-name {
		font-size: 13.5px !important;
	}

	.tk-planner-meal-row {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		padding: 6px 8px !important;
		gap: 6px !important;
		min-height: 40px !important;
		border-radius: 8px !important;
		background: #ffffff !important;
		border: 1px solid #e2e8f0 !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
		box-sizing: border-box !important;
	}

	.tk-planner-meal-header {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		min-width: 0 !important;
		gap: 6px !important;
		box-sizing: border-box !important;
	}

	.tk-planner-meal-header-left {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		gap: 6px !important;
		flex: 1 !important;
		min-width: 0 !important;
		box-sizing: border-box !important;
	}

	.tk-tag-txt-desktop {
		display: none !important;
	}

	.tk-tag-txt-mobile {
		display: inline !important;
	}

	.tk-drag-grip {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 13px !important;
		height: 24px !important;
		width: 12px !important;
		padding: 0 !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}

	.tk-meal-tag-wrapper {
		display: inline-flex !important;
		align-items: center !important;
		margin: 0 !important;
		flex-shrink: 0 !important;
	}

	.tk-planner-meal-tag {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		font-size: 10.5px !important;
		font-weight: 700 !important;
		padding: 0 7px !important;
		height: 24px !important;
		min-height: 24px !important;
		max-height: 24px !important;
		margin: 0 !important;
		line-height: 1 !important;
		box-sizing: border-box !important;
		vertical-align: middle !important;
	}

	.tk-planner-meal-name {
		display: inline-flex !important;
		align-items: center !important;
		flex: 1 !important;
		min-width: 0 !important;
		font-size: 13.5px !important;
		font-weight: 600 !important;
		color: #0f172a !important;
		line-height: 1.2 !important;
		height: 24px !important;
		margin: 0 !important;
		padding: 0 !important;
		white-space: nowrap !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		box-sizing: border-box !important;
	}

	.tk-planner-meal-actions {
		display: inline-flex !important;
		align-items: center !important;
		flex-shrink: 0 !important;
		margin: 0 0 0 auto !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.tk-planner-meal-del-btn {
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		width: 26px !important;
		height: 26px !important;
		min-width: 26px !important;
		min-height: 26px !important;
		font-size: 12.5px !important;
		border-radius: 6px !important;
		margin: 0 !important;
		padding: 0 !important;
		box-sizing: border-box !important;
	}

	.tk-tag-dropdown-menu {
		width: 195px !important;
	}

	.tk-tag-dd-btn {
		min-height: 40px !important;
		padding: 8px 10px !important;
		font-size: 12.5px !important;
	}

	.tk-planner-global-toast {
		left: 16px !important;
		right: 16px !important;
		bottom: 16px !important;
		text-align: center !important;
	}
}

/* ==========================================================================
   7. Dedicated Clean DIN A4 Print Mode
   ========================================================================== */
@media print {
	.no-print,
	#masthead,
	#colophon,
	.site-header,
	.site-footer,
	.tk-planner-tabs,
	.tk-planner-week-toolbar,
	.tk-shopping-toolbar,
	.tk-planner-modal-header,
	.tk-planner-modal-backdrop,
	.tk-planner-modal-close-btn,
	.tk-planner-box,
	#thermokoch-bot-root {
		display: none !important;
	}

	body,
	.site-content,
	.tk-standalone-wochenplaner {
		background: #ffffff !important;
		border: none !important;
		box-shadow: none !important;
		padding: 0 !important;
		margin: 0 !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	.tk-planner-pane {
		display: none !important;
	}

	.tk-planner-pane.active {
		display: block !important;
	}
}

/* ==========================================================================
   8. Footer Spielwiese Link Styling
   ========================================================================== */
.tk-footer-spielwiese-link a {
	color: inherit !important;
	text-decoration: none !important;
	transition: opacity 0.15s ease !important;
}

.tk-footer-spielwiese-link a:hover {
	text-decoration: underline !important;
	opacity: 0.85 !important;
}

/* ==========================================================================
   9. Mobile-Only Navigation Spielwiese Link & Height Harmonization
   ========================================================================== */
#ast-desktop-header .menu-item-spielwiese,
#primary-site-navigation-desktop .menu-item-spielwiese {
	display: none !important;
}

#ast-mobile-header .menu-item-spielwiese,
#primary-site-navigation-mobile .menu-item-spielwiese,
.ast-mobile-header-content .menu-item-spielwiese {
	display: flex !important;
	align-items: center !important;
	height: 55px !important;
	min-height: 55px !important;
}

#ast-mobile-header .menu-item-spielwiese > .menu-link,
#primary-site-navigation-mobile .menu-item-spielwiese > .menu-link,
.ast-mobile-header-content .menu-item-spielwiese > .menu-link {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
	line-height: 54px !important;
	font-size: 18px !important;
	padding: 0 9.9px !important;
	width: 100% !important;
	box-sizing: border-box !important;
}

/* Harmonize English (WPML) switcher item to match standard 55px menu row */
#ast-mobile-header .menu-item.wpml-ls-item,
#primary-site-navigation-mobile .menu-item.wpml-ls-item {
	display: flex !important;
	align-items: center !important;
	height: 55px !important;
	min-height: 55px !important;
	margin: 0 !important;
}

#ast-mobile-header .menu-item.wpml-ls-item > .menu-link,
#primary-site-navigation-mobile .menu-item.wpml-ls-item > .menu-link {
	display: flex !important;
	align-items: center !important;
	height: 100% !important;
	line-height: 54px !important;
	font-size: 18px !important;
	padding: 0 9.9px !important;
	border: none !important;
	border-radius: 0 !important;
	background: transparent !important;
	width: 100% !important;
	box-sizing: border-box !important;
}