/* =========================================================
   WIDGET: BUSINESS HOURS
   2 Skins: Cards (Kompakt-Raster) + Business Card (Visitenkarte)
   Token-Kaskade, Shared Components, Hover-Lift,
   Heute-Highlight, Glassmorphism, Container Queries, BFSG
   ========================================================= */

/* ---------------------------------------------------------
   1. Custom Properties (Token-Kaskade)
   --------------------------------------------------------- */
.kw-business-hours-wrapper {
	--kwl-hours-card-bg: var(--kwl-bg-alt, #f7fafc);
	--kwl-hours-card-border: var(--kwl-border, #e2e8f0);
	--kwl-hours-card-radius: var(--kwl-radius-lg, 12px);
	--kwl-hours-card-padding: var(--kwl-space-lg, 1.5rem);
	--kwl-hours-title-color: var(--kwl-primary, #00315d);
	--kwl-hours-text-color: var(--kwl-text, #1a202c);
	--kwl-hours-text-muted: var(--kwl-text-muted, #718096);
	--kwl-hours-time-color: var(--kwl-text, #1a202c);
	--kwl-hours-icon-color: var(--kwl-accent, #BD9B5C);
	--kwl-hours-status-open: var(--kwl-success, #2f855a);
	--kwl-hours-status-closing: var(--kwl-warning, #c05621);
	--kwl-hours-status-closed: var(--kwl-error, #c53030);
	--kwl-hours-status-default: var(--kwl-border, #e2e8f0);
	--kwl-hours-alert-bg: color-mix(in srgb, var(--kwl-warning, #c05621) 6%, var(--kwl-bg, #ffffff));
	--kwl-hours-alert-color: var(--kwl-warning, #c05621);
	--kwl-hours-alert-border: color-mix(in srgb, var(--kwl-warning, #c05621) 25%, var(--kwl-border, #e2e8f0));
	--kwl-hours-notice-bg: color-mix(in srgb, var(--kwl-primary, #00315d) 6%, var(--kwl-bg, #ffffff));
	--kwl-hours-notice-color: var(--kwl-primary, #00315d);
	--kwl-hours-notice-border: color-mix(in srgb, var(--kwl-primary, #00315d) 20%, var(--kwl-border, #e2e8f0));
	--kwl-hours-row-border: var(--kwl-border, #e2e8f0);
	--kwl-hours-row-alt-bg: color-mix(in srgb, var(--kwl-text, #1a202c) 3%, var(--kwl-bg, #ffffff));
	--kwl-hours-cta-bg: var(--kwl-accent, #BD9B5C);
	--kwl-hours-cta-color: var(--kwl-btn-text, #ffffff);
	--kwl-hours-cta-hover-bg: var(--kwl-primary, #00315d);
	--kwl-hours-hh-accent: #E87B35;
	--kwl-hours-hh-bg: color-mix(in srgb, var(--kwl-hours-hh-accent) 8%, var(--kwl-bg, #ffffff));
	--kwl-hours-hh-border: color-mix(in srgb, var(--kwl-hours-hh-accent) 30%, var(--kwl-border, #e2e8f0));
	--kwl-hours-hh-glow: color-mix(in srgb, var(--kwl-hours-hh-accent) 25%, transparent);

	font-family: var(--kwl-font-body);
	line-height: var(--kwl-lh-body, 1.5);
	position: relative;
	box-sizing: border-box;
	overflow: visible;
}

/* Bridge: Widget-Tokens → Shared Card-Component */
.kw-business-hours-wrapper[data-kwl-card] {
	--kwl-card-accent: var(--kwl-hours-icon-color, var(--kwl-accent, #BD9B5C));
}

/* Bridge: Widget-Tokens → Shared Icon-Circle */
.kw-business-hours-wrapper [data-kwl-icon-circle] {
	--kwl-icon-size: 32px;
	--kwl-icon-color: var(--kwl-hours-icon-color, var(--kwl-accent, #BD9B5C));
	--kwl-icon-svg-size: 18px;
}

/* ---------------------------------------------------------
   2. Base Styles (List, Rows)
   --------------------------------------------------------- */
.kw-hours-list {
	margin: 0;
	padding: 0;
}

.kw-hours-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--kwl-fsize-body, 1rem);
	color: var(--kwl-hours-text-color);
	margin-bottom: var(--kwl-space-xs, 0.25rem);
}

.kw-hours-row:last-child {
	margin-bottom: 0;
}

.kw-hours-row dt {
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-hours-title-color);
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-hours-row dd {
	color: var(--kwl-hours-time-color);
	font-weight: var(--kwl-fw-medium);
}

/* ---------------------------------------------------------
   3. Status Dot & Pulse Animation
   --------------------------------------------------------- */
.kw-status-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: var(--kwl-radius-full, 9999px);
	background-color: var(--kwl-hours-status-default);
	flex-shrink: 0;
	position: relative;
}

.state-open .kw-status-dot {
	background-color: var(--kwl-hours-status-open);
}

.state-closing .kw-status-dot {
	background-color: var(--kwl-hours-status-closing);
}

.state-closed .kw-status-dot {
	background-color: var(--kwl-hours-status-closed);
}

.kw-enable-pulse.state-open .kw-status-dot {
	animation: kw-dot-pulse 2s infinite;
}

@keyframes kw-dot-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kwl-hours-status-open) 70%, transparent), 0 0 4px color-mix(in srgb, var(--kwl-hours-status-open) 40%, transparent); }
	70% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--kwl-hours-status-open) 0%, transparent), 0 0 8px color-mix(in srgb, var(--kwl-hours-status-open) 0%, transparent); }
	100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kwl-hours-status-open) 0%, transparent), 0 0 4px color-mix(in srgb, var(--kwl-hours-status-open) 40%, transparent); }
}

/* ---------------------------------------------------------
   4. Skin: Compact Grid (Container-Query)
   --------------------------------------------------------- */
.kw-skin-cards {
	padding: var(--kwl-hours-card-padding);
	container-type: inline-size;
}

/* Grid-Header (Titel + Status) — Gold-Gradient-Linie */
.kw-skin-cards .kw-grid-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: var(--kwl-space-md, 1rem);
	padding-bottom: var(--kwl-space-md, 1rem);
	border-bottom: none;
}

.kw-skin-cards .kw-hours-title {
	font-family: var(--kwl-font-heading);
	color: var(--kwl-hours-title-color);
	font-size: var(--kwl-fsize-h2, 1.5rem);
	font-weight: var(--kwl-fw-bold);
	margin: 0;
	border: none;
	padding: 0;
}

.kw-skin-cards .kw-live-status-inline {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
}

.kw-skin-cards .kw-live-status-inline .kw-status-text {
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-hours-text-muted);
}

/* Grid-Container */
.kw-grid-days {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: var(--kwl-space-sm, 0.5rem);
}

/* Einzelne Grid-Karte */
.kw-grid-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: var(--kwl-space-md, 1rem) var(--kwl-space-sm, 0.5rem);
	min-height: 44px;
	border-radius: var(--kwl-radius-md, 8px);
	background: var(--kwl-bg, #ffffff);
	border: 1px solid var(--kwl-hours-card-border);
	box-shadow: var(--kwl-shadow-sm);
	transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
	gap: var(--kwl-space-xs, 0.25rem);
}

@media (hover: hover) {
	.kw-grid-card:hover {
		transform: translateY(-3px);
		box-shadow: var(--kwl-shadow-md);
		border-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, var(--kwl-hours-card-border));
	}
}

.kw-grid-card:active {
	transform: scale(0.97);
}

/* Heute-Hervorhebung — Gold-Glow */
.kw-grid-card.is-today {
	border-color: var(--kwl-hours-icon-color);
	box-shadow:
		0 4px 16px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, transparent),
		0 0 0 1px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 15%, transparent);
	background: linear-gradient(135deg, var(--kwl-bg, #ffffff), color-mix(in srgb, var(--kwl-accent, #BD9B5C) 5%, var(--kwl-bg, #ffffff)));
}

/* Geschlossene Tage */
.kw-grid-card.is-closed {
	opacity: 0.5;
}

.kw-grid-card.is-closed .kw-grid-time {
	color: var(--kwl-hours-text-muted);
	font-style: italic;
}

/* Grid-Elemente */
.kw-grid-label {
	font-weight: var(--kwl-fw-bold);
	color: var(--kwl-hours-title-color);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	text-transform: uppercase;
	letter-spacing: var(--kwl-ls-wider);
}

.kw-grid-time {
	color: var(--kwl-hours-time-color);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-medium);
	font-variant-numeric: tabular-nums;
}

/* 2-Karten-Modus (Mo-Fr/Sa-So): groessere Karten */
.kw-grid-days:has(> :nth-child(2):last-child) {
	grid-template-columns: repeat(2, 1fr);
}

.kw-grid-days:has(> :nth-child(2):last-child) .kw-grid-card {
	padding: var(--kwl-space-lg, 1.5rem) var(--kwl-space-md, 1rem);
}

/* ---------------------------------------------------------
   5. Skin: Business Card (Premium Visitenkarte)
   --------------------------------------------------------- */
.kw-business-hours-wrapper.kw-skin-business-card {
	padding: 0;
	container-type: inline-size;
}

/* --- Header: Titel + Live-Status-Badge --- */
.kw-skin-business-card .kw-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--kwl-space-md, 1rem);
	padding: var(--kwl-space-lg, 1.5rem);
	padding-bottom: var(--kwl-space-md, 1rem);
}

.kw-skin-business-card .kw-hours-title {
	margin: 0;
	color: var(--kwl-hours-title-color);
	font-family: var(--kwl-font-heading);
	font-size: var(--kwl-fsize-h3, 1.25rem);
	letter-spacing: var(--kwl-ls-normal);
	font-weight: var(--kwl-fw-bold);
	text-align: left;
	line-height: var(--kwl-lh-heading, 1.2);
}

/* Live-Status als Mini-Badge (Pill) */
.kw-skin-business-card .kw-live-status-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.25rem);
	padding: var(--kwl-space-xs, 0.25rem) var(--kwl-space-sm, 0.5rem);
	border-radius: var(--kwl-radius-full, 9999px);
	background: color-mix(in srgb, var(--kwl-hours-icon-color) 8%, var(--kwl-bg, #ffffff));
	border: 1px solid color-mix(in srgb, var(--kwl-hours-icon-color) 18%, transparent);
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	font-weight: var(--kwl-fw-semibold);
	color: var(--kwl-hours-text-muted);
	white-space: nowrap;
	transition: background 200ms ease, border-color 200ms ease;
}

/* Status-Badge: Farbe wechselt je nach Zustand */
.kw-skin-business-card.state-open .kw-live-status-badge {
	background: color-mix(in srgb, var(--kwl-hours-status-open) 8%, var(--kwl-bg, #ffffff));
	border-color: color-mix(in srgb, var(--kwl-hours-status-open) 20%, transparent);
}

.kw-skin-business-card.state-closing .kw-live-status-badge {
	background: color-mix(in srgb, var(--kwl-hours-status-closing) 8%, var(--kwl-bg, #ffffff));
	border-color: color-mix(in srgb, var(--kwl-hours-status-closing) 20%, transparent);
}

.kw-skin-business-card.state-closed .kw-live-status-badge {
	background: color-mix(in srgb, var(--kwl-hours-status-closed) 8%, var(--kwl-bg, #ffffff));
	border-color: color-mix(in srgb, var(--kwl-hours-status-closed) 20%, transparent);
}

.kw-skin-business-card .kw-live-status-badge .kw-status-text {
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	font-weight: var(--kwl-fw-semibold);
}

.kw-skin-business-card .kw-live-status-badge .kw-status-dot {
	margin-right: 0;
}

/* --- Body: Oeffnungszeiten-Rows mit Hover + Heute --- */
.kw-skin-business-card .kw-card-body {
	padding: var(--kwl-space-md, 1rem) var(--kwl-hours-card-padding) var(--kwl-hours-card-padding);
}

.kw-skin-business-card .kw-hours-row {
	padding: var(--kwl-space-md, 1rem) var(--kwl-space-md, 1rem);
	border-bottom: 1px solid var(--kwl-hours-row-border);
	border-left: 3px solid transparent;
	border-radius: var(--kwl-radius-md, 8px);
	margin-bottom: var(--kwl-space-sm, 0.5rem);
	transition: background 200ms ease, box-shadow 200ms ease,
		border-color 200ms ease, transform 200ms ease;
}

.kw-skin-business-card .kw-hours-row:last-child {
	border-bottom: none;
	margin-bottom: 0;
}

.kw-skin-business-card .kw-hours-row:nth-child(even) {
	background-color: var(--kwl-hours-row-alt-bg);
}

/* Heute-Hervorhebung (Business Card) — Gold-Glow */
.kw-skin-business-card .kw-hours-row.is-today {
	border-left-color: var(--kwl-hours-icon-color);
	background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 6%, var(--kwl-bg, #ffffff));
	box-shadow: 0 2px 8px color-mix(in srgb, var(--kwl-accent, #BD9B5C) 12%, transparent);
}

/* Geschlossene Tage */
.kw-skin-business-card .kw-hours-row.is-closed {
	opacity: 0.5;
}

.kw-skin-business-card .kw-hours-row.is-closed dd {
	color: var(--kwl-hours-text-muted);
	font-style: italic;
}

/* Row-Hover */
@media (hover: hover) {
	.kw-skin-business-card .kw-hours-row:hover {
		background-color: var(--kwl-hours-row-alt-bg);
		border-left-color: var(--kwl-accent, #BD9B5C);
		box-shadow: 0 2px 8px color-mix(in srgb, var(--kwl-text, #1a202c) 6%, transparent);
		transform: translateX(2px);
	}
}

.kw-skin-business-card .kw-hours-row dd {
	font-variant-numeric: tabular-nums;
	font-weight: var(--kwl-fw-medium);
	color: var(--kwl-hours-time-color);
	font-size: var(--kwl-fsize-body, 1rem);
}

/* ---------------------------------------------------------
   6. Business Card: CTA-Footer (Clean Gold-Border)
   --------------------------------------------------------- */
.kw-skin-business-card .kw-card-footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	background: var(--kwl-bg-alt, #f7fafc);
	padding: var(--kwl-space-lg, 1.5rem);
	text-align: center;
	border-top: 3px solid var(--kwl-accent, #BD9B5C);
	border-bottom-left-radius: var(--kwl-hours-card-radius);
	border-bottom-right-radius: var(--kwl-hours-card-radius);
}

.kw-skin-business-card .kw-card-footer:empty {
	display: none;
}

.kw-skin-business-card .kw-card-footer .kw-cta-description {
	font-size: var(--kwl-fsize-small, 0.875rem);
	color: var(--kwl-hours-text-muted);
	font-style: italic;
	line-height: var(--kwl-lh-body, 1.5);
}

.kw-skin-business-card .kw-card-footer .kw-cta-btn {
	width: 100%;
	justify-content: center;
}

/* ---------------------------------------------------------
   6b. CTA Status-Hint (dynamisch per JS)
   --------------------------------------------------------- */
.kw-cta-status-hint {
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	font-weight: var(--kwl-fw-semibold);
	margin: 0;
	transition: color 300ms ease;
}

.kw-cta-status-hint:empty {
	display: none;
}

.kw-cta-status-hint[data-state="open"] {
	color: var(--kwl-hours-status-open);
}

.kw-cta-status-hint[data-state="closing"],
.kw-cta-status-hint[data-state="kitchen"] {
	color: var(--kwl-hours-status-closing);
}

.kw-cta-status-hint[data-state="kitchen-closed"] {
	color: var(--kwl-hours-icon-color);
}

.kw-cta-status-hint[data-state="closed"],
.kw-cta-status-hint[data-state="holiday"] {
	color: var(--kwl-hours-text-muted);
}

/* ---------------------------------------------------------
   7. Alert Box — Premium Border-Left Pattern
   --------------------------------------------------------- */
.kw-hours-alert {
	display: flex;
	align-items: flex-start;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: var(--kwl-space-md, 1rem);
	background-color: var(--kwl-hours-alert-bg);
	color: var(--kwl-hours-alert-color);
	border: 1px solid var(--kwl-hours-alert-border);
	border-left: 3px solid var(--kwl-hours-alert-color);
	border-radius: var(--kwl-radius-md, 8px);
	text-align: left;
	font-weight: var(--kwl-fw-semibold);
	margin-top: var(--kwl-space-sm, 0.5rem);
}

.kw-hours-alert-box {
	text-align: center;
}

/* Alert/Notice SVG-Icons */
.kw-hours-alert .kwl-icon,
.kw-hours-notice .kwl-icon {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.kw-hours-alert .kwl-icon {
	margin-top: 2px;
}

/* ---------------------------------------------------------
   7b. Notice Box — Info Accent Pattern
   --------------------------------------------------------- */
.kw-hours-notice {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: var(--kwl-space-md, 0.75rem) var(--kwl-space-md, 1rem);
	background-color: var(--kwl-hours-notice-bg);
	color: var(--kwl-hours-notice-color);
	border: 1px solid var(--kwl-hours-notice-border);
	border-left: 3px solid var(--kwl-hours-notice-color);
	border-radius: var(--kwl-radius-md, 8px);
	text-align: left;
	font-size: var(--kwl-fsize-caption, 0.85rem);
	margin-bottom: var(--kwl-space-sm, 0.5rem);
}

/* ---------------------------------------------------------
   8. CTA Button — delegiert an [data-kwl-btn]
   --------------------------------------------------------- */
.kw-business-hours-wrapper [data-kwl-btn="gradient"] {
	--kwl-btn-bg: var(--kwl-hours-cta-bg, var(--kwl-accent, #BD9B5C));
	--kwl-btn-color: var(--kwl-hours-cta-color, var(--kwl-btn-text, #ffffff));
}

.kw-business-hours-wrapper .kw-cta-btn {
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-lg, 1.5rem);
	min-height: 44px;
	gap: var(--kwl-space-xs, 0.25rem);
	font-size: var(--kwl-fsize-body, 1rem);
}

/* --- External-Link-Icon im CTA --- */
.kw-cta-external-icon {
	display: inline-flex;
	align-items: center;
	margin-left: var(--kwl-space-xs, 0.25rem);
	padding-left: var(--kwl-space-sm, 0.5rem);
	border-left: 1px solid currentColor;
	opacity: 0.7;
	line-height: 0;
}

.kw-cta-external-icon svg {
	width: 14px;
	height: 14px;
	flex-shrink: 0;
}

/* ---------------------------------------------------------
   9. Kitchen Row
   --------------------------------------------------------- */
.kw-business-hours-wrapper .kw-row-kitchen {
	margin-top: var(--kwl-space-md, 1rem);
	padding-top: var(--kwl-space-md, 1rem);
	border-top: 1px dashed var(--kwl-hours-row-border);
	color: var(--kwl-hours-icon-color);
}

/* ---------------------------------------------------------
   10. Reopening Info
   --------------------------------------------------------- */
.kw-reopening-info {
	text-align: center;
	margin-top: var(--kwl-space-sm, 0.5rem);
	color: var(--kwl-hours-text-color);
}

/* ---------------------------------------------------------
   11. CTA-Wrap: Action Footer Layout (Cards Skin)
   --------------------------------------------------------- */
.kw-hours-cta-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	margin-top: var(--kwl-space-md, 1rem);
	padding-top: var(--kwl-space-md, 1rem);
	border-top: 1px solid var(--kwl-hours-row-border);
	text-align: center;
}

/* Begleittext ueber CTA-Button */
.kw-cta-description {
	color: var(--kwl-hours-text-muted);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-style: italic;
	line-height: var(--kwl-lh-body, 1.5);
}

/* ---------------------------------------------------------
   12. Skeleton Loading (bevor JS den Status setzt)
   --------------------------------------------------------- */
.kw-status-text {
	min-width: 80px;
	min-height: 1em;
}

.kw-business-hours-wrapper:not(.state-open):not(.state-closed):not(.state-closing) .kw-status-text {
	background: linear-gradient(90deg, var(--kwl-border, #e2e8f0) 25%, var(--kwl-bg-alt, #f7fafc) 50%, var(--kwl-border, #e2e8f0) 75%);
	background-size: 200% 100%;
	animation: kw-skeleton-shimmer 1.5s infinite;
	color: transparent;
	border-radius: var(--kwl-radius-sm, 4px);
}

@keyframes kw-skeleton-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------
   13. Focus-Visible (BFSG-Pflicht)
   --------------------------------------------------------- */
.kw-live-status-inline,
.kw-live-status-badge {
	cursor: help;
}

.kw-live-status-inline:focus-visible,
.kw-live-status-badge:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
}

/* ---------------------------------------------------------
   Happy Hour Badge
   --------------------------------------------------------- */
.kw-happy-hour-badge {
	display: flex;
	align-items: center;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
	border-radius: var(--kwl-radius-md, 8px);
	font-size: var(--kwl-fsize-small, 0.875rem);
	font-weight: var(--kwl-fw-semibold, 600);
	min-height: 44px;
	margin-bottom: var(--kwl-space-sm, 0.5rem);
	transition: background 200ms var(--kwl-ease-default, ease), border-color 200ms var(--kwl-ease-default, ease), box-shadow 300ms var(--kwl-ease-default, ease);
}

.kw-happy-hour-badge[hidden] {
	display: none;
}

.kw-happy-hour-badge.is-upcoming {
	background: var(--kwl-hours-hh-bg);
	border: 1px solid var(--kwl-hours-hh-border);
	color: var(--kwl-text, #1a202c);
}

.kw-happy-hour-badge.is-active {
	background: linear-gradient(135deg, var(--kwl-hours-hh-bg), color-mix(in srgb, var(--kwl-hours-hh-accent) 15%, var(--kwl-bg, #ffffff)));
	border: 1px solid var(--kwl-hours-hh-accent);
	color: var(--kwl-text, #1a202c);
	box-shadow:
		0 4px 20px var(--kwl-hours-hh-glow),
		0 0 0 1px color-mix(in srgb, var(--kwl-hours-hh-accent) 15%, transparent);
}

.kw-enable-pulse .kw-happy-hour-badge.is-active {
	animation: kw-hh-glow-pulse 3s ease-in-out infinite;
}

@keyframes kw-hh-glow-pulse {
	0% {
		box-shadow:
			0 4px 20px var(--kwl-hours-hh-glow),
			0 0 0 1px color-mix(in srgb, var(--kwl-hours-hh-accent) 15%, transparent);
	}
	50% {
		box-shadow:
			0 6px 28px color-mix(in srgb, var(--kwl-hours-hh-accent) 40%, transparent),
			0 0 0 2px color-mix(in srgb, var(--kwl-hours-hh-accent) 25%, transparent);
	}
	100% {
		box-shadow:
			0 4px 20px var(--kwl-hours-hh-glow),
			0 0 0 1px color-mix(in srgb, var(--kwl-hours-hh-accent) 15%, transparent);
	}
}

.kw-hh-icon {
	flex-shrink: 0;
	font-size: 1.25rem;
	line-height: 1;
}

.kw-hh-text {
	flex: 1;
}

.kw-hh-link {
	--kwl-link-color: var(--kwl-primary, #00315d);
	--kwl-link-hover-color: var(--kwl-primary-hover, #1e3a5f);
	--kwl-link-underline: underline;
	font-size: var(--kwl-fsize-caption, 0.8125rem);
	font-weight: var(--kwl-fw-bold, 700);
	text-underline-offset: 2px;
	white-space: nowrap;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.kw-hh-link:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: var(--kwl-radius-sm, 4px);
}

/* ---------------------------------------------------------
   14. Dark Mode (Token-Kaskade)
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	.kw-business-hours-wrapper {
		--kwl-hours-title-color: var(--kwl-text, #f7fafc);
		--kwl-hours-text-muted: var(--kwl-text-muted, #a0aec0);
		--kwl-hours-row-alt-bg: color-mix(in srgb, var(--kwl-text, #f7fafc) 4%, var(--kwl-bg, #1a202c));
		--kwl-hours-status-default: var(--kwl-border, #4a5568);
		--kwl-hours-alert-bg: color-mix(in srgb, var(--kwl-warning, #c05621) 8%, var(--kwl-bg, #1a202c));
		--kwl-hours-alert-border: color-mix(in srgb, var(--kwl-warning, #c05621) 20%, var(--kwl-border, #4a5568));
		--kwl-hours-notice-bg: color-mix(in srgb, var(--kwl-primary, #63b3ed) 8%, var(--kwl-bg, #1a202c));
		--kwl-hours-notice-color: var(--kwl-primary, #63b3ed);
		--kwl-hours-notice-border: color-mix(in srgb, var(--kwl-primary, #63b3ed) 20%, var(--kwl-border, #4a5568));
	}

	.kw-grid-card {
		background: var(--kwl-bg, #1a202c);
	}

	.kw-grid-card.is-today {
		background: linear-gradient(135deg, var(--kwl-bg, #1a202c), color-mix(in srgb, var(--kwl-accent, #BD9B5C) 8%, var(--kwl-bg, #1a202c)));
	}

	/* Business Card: Heute-Highlight Dark */
	.kw-skin-business-card .kw-hours-row.is-today {
		background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 8%, var(--kwl-bg, #1a202c));
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
	}

	/* Business Card: Row-Hover Dark */
	@media (hover: hover) {
		.kw-skin-business-card .kw-hours-row:hover {
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
		}
	}

	/* Business Card: Live-Status-Badge Dark */
	.kw-skin-business-card .kw-live-status-badge {
		background: color-mix(in srgb, var(--kwl-hours-icon-color) 10%, var(--kwl-bg, #1a202c));
		border-color: color-mix(in srgb, var(--kwl-hours-icon-color) 22%, transparent);
	}

	.kw-skin-business-card.state-open .kw-live-status-badge {
		background: color-mix(in srgb, var(--kwl-hours-status-open) 10%, var(--kwl-bg, #1a202c));
		border-color: color-mix(in srgb, var(--kwl-hours-status-open) 25%, transparent);
	}

	.kw-skin-business-card.state-closing .kw-live-status-badge {
		background: color-mix(in srgb, var(--kwl-hours-status-closing) 10%, var(--kwl-bg, #1a202c));
		border-color: color-mix(in srgb, var(--kwl-hours-status-closing) 25%, transparent);
	}

	.kw-skin-business-card.state-closed .kw-live-status-badge {
		background: color-mix(in srgb, var(--kwl-hours-status-closed) 10%, var(--kwl-bg, #1a202c));
		border-color: color-mix(in srgb, var(--kwl-hours-status-closed) 25%, transparent);
	}

	/* Skeleton Loading Dark */
	.kw-business-hours-wrapper:not(.state-open):not(.state-closed):not(.state-closing) .kw-status-text {
		background: linear-gradient(90deg, var(--kwl-border, #4a5568) 25%, var(--kwl-bg-alt, #2d3748) 50%, var(--kwl-border, #4a5568) 75%);
		background-size: 200% 100%;
	}

	/* Focus heller */
	.kw-live-status-inline:focus-visible,
	.kw-live-status-badge:focus-visible {
		outline-color: var(--kwl-focus, #c9a84c);
	}

	.kw-happy-hour-badge.is-upcoming {
		background: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 10%, var(--kwl-bg, #1a202c));
		border-color: color-mix(in srgb, var(--kwl-accent, #BD9B5C) 25%, transparent);
	}

	.kw-happy-hour-badge.is-active {
		background: linear-gradient(135deg, color-mix(in srgb, var(--kwl-accent, #BD9B5C) 12%, var(--kwl-bg, #1a202c)), color-mix(in srgb, var(--kwl-accent, #BD9B5C) 20%, var(--kwl-bg, #1a202c)));
		box-shadow: 0 4px 20px rgba(189, 155, 92, 0.2), 0 0 0 1px rgba(189, 155, 92, 0.15);
	}

	.kw-hh-link {
		--kwl-link-color: var(--kwl-primary, #63b3ed);
		--kwl-link-hover-color: var(--kwl-text, #f7fafc);
	}
}

/* ---------------------------------------------------------
   15. Reduced Motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kw-enable-pulse.state-open .kw-status-dot {
		animation: none;
	}

	.kw-business-hours-wrapper.kw-skin-business-card,
	.kw-grid-card,
	.kw-skin-business-card .kw-hours-row,
	.kw-skin-business-card .kw-live-status-badge {
		transition: none;
	}

	.kw-grid-card:active {
		transform: none;
	}

	@media (hover: hover) {
		.kw-grid-card:hover,
		.kw-skin-business-card .kw-hours-row:hover,
		.kw-business-hours-wrapper.kw-skin-business-card:hover {
			transform: none;
		}
	}

	.kw-business-hours-wrapper:not(.state-open):not(.state-closed):not(.state-closing) .kw-status-text {
		animation: none;
	}

	.kw-enable-pulse .kw-happy-hour-badge.is-active {
		animation: none;
		border-width: 2px;
	}

	.kw-happy-hour-badge {
		transition: none;
	}
}

/* ---------------------------------------------------------
   16. Container Queries (ergaenzend zum Mobile-First-Block)
   --------------------------------------------------------- */
@container (max-width: 350px) {
	.kw-grid-days {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container (max-width: 250px) {
	.kw-grid-days {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------
   17. Responsive — Mobile-First (min-width)
   Basis = Mobil, dann Aufwertung fuer breitere Viewports
   --------------------------------------------------------- */

/* Mobil-Basis (< 768px): Stack-Layouts */
.kw-grid-header,
.kw-skin-business-card .kw-card-header {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--kwl-space-sm, 0.5rem);
}

/* Mobil: Separator zentriert (Header sind gestapelt + zentriert) */
.kw-grid-header[data-kwl-separator="gold"]::after,
.kw-skin-business-card .kw-card-header[data-kwl-separator="gold"]::after {
	background: linear-gradient(to right,
		transparent,
		color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent) 20%,
		var(--kwl-accent, #BD9B5C) 50%,
		color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent) 80%,
		transparent
	);
	left: 50%;
	transform: translateX(-50%);
	max-width: 120px;
	width: 100%;
}

.kw-live-status-inline:not(.kw-live-status-badge) {
	width: 100%;
	justify-content: center;
	margin-top: var(--kwl-space-sm, 0.5rem);
}

.kw-hours-row {
	flex-wrap: wrap;
	gap: 4px;
}

.kw-hours-row dt {
	flex-basis: 100%;
	margin-bottom: 2px;
}

.kw-hours-row dd {
	margin-left: 42px;
	font-size: var(--kwl-fsize-small, 0.875rem);
}

.kw-business-hours-wrapper.kw-skin-cards {
	padding: var(--kwl-space-md, 1rem);
}

.kw-business-hours-wrapper.kw-skin-business-card .kw-card-body {
	padding: var(--kwl-space-md, 1rem) var(--kwl-space-md, 1rem) var(--kwl-space-md, 1rem);
}

.kw-business-hours-wrapper .kw-hours-title {
	font-size: var(--kwl-fsize-h3);
	text-align: center;
}

/* Desktop: Inline-Layouts ab 768px */
@media (min-width: 768px) {
	.kw-grid-header,
	.kw-skin-business-card .kw-card-header {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: var(--kwl-space-md, 1rem);
	}

	/* Desktop: Separator zurueck auf links-ausfadend */
	.kw-grid-header[data-kwl-separator="gold"]::after,
	.kw-skin-business-card .kw-card-header[data-kwl-separator="gold"]::after {
		background: linear-gradient(to right,
			var(--kwl-accent, #BD9B5C),
			color-mix(in srgb, var(--kwl-accent, #BD9B5C) 40%, transparent),
			transparent
		);
		left: 0;
		transform: none;
		max-width: none;
		width: auto;
	}

	.kw-live-status-inline:not(.kw-live-status-badge) {
		width: auto;
		justify-content: flex-end;
		margin-top: 0;
	}

	.kw-hours-row {
		flex-wrap: nowrap;
		gap: 0;
	}

	.kw-hours-row dt {
		flex-basis: auto;
		margin-bottom: 0;
	}

	.kw-hours-row dd {
		margin-left: 0;
		font-size: var(--kwl-fsize-body, 1rem);
	}

	.kw-business-hours-wrapper.kw-skin-cards {
		padding: var(--kwl-hours-card-padding);
	}

	.kw-business-hours-wrapper.kw-skin-business-card .kw-card-body {
		padding: var(--kwl-space-md, 1rem) var(--kwl-hours-card-padding) var(--kwl-hours-card-padding);
	}

	.kw-business-hours-wrapper .kw-hours-title {
		font-size: var(--kwl-fsize-h2, 1.5rem);
		text-align: left;
	}

	/* CTA-Wrap: nebeneinander auf Desktop (Cards Skin) */
	.kw-hours-cta-wrap {
		flex-direction: row;
		text-align: left;
	}

	.kw-cta-description {
		flex: 1 1 auto;
		min-width: 0;
	}

	/* Business Card Footer: Button auto-width auf Desktop */
	.kw-skin-business-card .kw-card-footer .kw-cta-btn {
		width: auto;
	}
}

/* V4 Pink-Reset: zentral in kwl-shared-components.css via [data-kwl-link] (§281) */