/* =========================================================
   WIDGET: CONTACT LIST — Premium Design 2026
   5 Layouts: vertical, horizontal, icons, tiles, directions
   ========================================================= */

/* ---------------------------------------------------------
   1. Custom Properties
   --------------------------------------------------------- */
.kw-cl {
	--kw-cl-icon-color: var(--kwl-focus, #7B6835);
	--kw-cl-icon-hover: var(--kwl-primary, #00315d);
	--kw-cl-text-color: var(--kwl-text, #1a202c);
	--kw-cl-text-hover: var(--kwl-primary, #00315d);
	--kw-cl-accent: var(--kwl-accent, #BD9B5C);
	--kw-cl-bg-hover: color-mix(in srgb, var(--kwl-text, #1a202c) 5%, transparent);
	--kw-cl-icon-bg: transparent;
	--kw-cl-icon-bg-hover: var(--kw-cl-bg-hover);
	--kw-cl-gap: 12px;
	--kw-cl-transition: 200ms;
	--kw-cl-easing: var(--kwl-ease-default);

	display: flex;
	gap: var(--kw-cl-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ---------------------------------------------------------
   2. Layout-Varianten
   --------------------------------------------------------- */

/* Vertikal (Standard) */
.kw-cl--v {
	flex-direction: column;
	align-items: flex-start;
}

/* Horizontal */
.kw-cl--h {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

/* Nur Icons */
.kw-cl--icons {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

/* Icon-Position "above": Links werden vertikal */
.kw-cl--above .kw-cl__link {
	flex-direction: column;
	align-items: center;
	text-align: center;
}

/* ---------------------------------------------------------
   3. Link-Styles (44px Touch-Target, Custom Easing)
   --------------------------------------------------------- */
.kw-cl__link {
	--kwl-link-color: var(--kw-cl-text-color, var(--kwl-text, #1a202c));
	--kwl-link-hover-color: var(--kw-cl-text-hover, var(--kw-cl-text-color, var(--kwl-text, #1a202c)));
	display: inline-flex;
	align-items: center;
	gap: var(--kwl-space-xs, 0.5rem);
	min-height: 44px;
	transition:
		color var(--kw-cl-transition) var(--kw-cl-easing),
		opacity var(--kw-cl-transition) var(--kw-cl-easing);
}

@media (hover: hover) {
	.kw-cl__link:hover {
		opacity: 0.85;
	}

	.kw-cl__link:hover .kw-cl__icon {
		color: var(--kw-cl-icon-hover);
	}

	.kw-cl__link:hover .kw-cl__text {
		color: var(--kw-cl-text-hover);
	}
}

/* ---------------------------------------------------------
   4. Icon / Text Elemente
   --------------------------------------------------------- */
.kw-cl__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	font-size: 20px;
	line-height: var(--kwl-lh-none);
	color: var(--kw-cl-icon-color);
	background: color-mix(in srgb, var(--kw-cl-icon-color) 12%, transparent);
	border-radius: var(--kwl-radius-full, 9999px);
	border: 1px solid color-mix(in srgb, var(--kw-cl-icon-color) 20%, transparent);
	transition: background var(--kw-cl-transition) var(--kw-cl-easing),
	            border-color var(--kw-cl-transition) var(--kw-cl-easing);
}

.kw-cl__icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

.kw-cl__text {
	font-family: var(--kwl-font-body);
	font-size: var(--kwl-fsize-body);
	line-height: var(--kwl-lh-body);
	color: var(--kw-cl-text-color);
}

@media (hover: hover) {
	.kw-cl__link:hover .kw-cl__icon {
		background: color-mix(in srgb, var(--kw-cl-icon-hover) 18%, transparent);
		border-color: color-mix(in srgb, var(--kw-cl-icon-hover) 30%, transparent);
	}
}

/* ---------------------------------------------------------
   5. Icons-Only — Glassmorphism-Kreise
   --------------------------------------------------------- */
.kw-cl--icons .kw-cl__link {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	padding: 0;
	transition:
		transform var(--kw-cl-transition) var(--kw-cl-easing);
}

.kw-cl--icons .kw-cl__icon {
	width: 44px;
	height: 44px;
}

.kw-cl--icons .kw-cl__icon svg {
	width: 22px;
	height: 22px;
}

@media (hover: hover) {
	.kw-cl--icons .kw-cl__link:hover {
		opacity: 1;
		transform: scale(1.08);
	}
}

.kw-cl--icons .kw-cl__link:active {
	transform: scale(0.95);
}

/* Icons-Only — Mobile First: kompakt */
.kw-cl--icons {
	gap: 4px;
}

@media (min-width: 321px) {
	.kw-cl--icons {
		gap: var(--kw-cl-gap);
	}
}

/* ---------------------------------------------------------
   6. Tiles-Layout (Grid mit Kacheln)
   --------------------------------------------------------- */
.kw-cl--tiles {
	--kw-cl-tile-bg: var(--kwl-bg, #ffffff);
	--kw-cl-tile-border: var(--kwl-border, #e2e8f0);
	--kw-cl-tile-radius: var(--kwl-radius-lg, 12px);
	--kw-cl-tile-padding: 20px;
	--kw-cl-tile-cols: auto;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	grid-auto-rows: 1fr;
}

/* Feste Spaltenzahl (ueberschreibt auto-fit) */
.kw-cl--tiles[style*="--kw-cl-tile-cols: 2"] {
	grid-template-columns: repeat(2, 1fr);
}

.kw-cl--tiles[style*="--kw-cl-tile-cols: 3"] {
	grid-template-columns: repeat(3, 1fr);
}

.kw-cl--tiles[style*="--kw-cl-tile-cols: 4"] {
	grid-template-columns: repeat(4, 1fr);
}

.kw-cl--tiles[style*="--kw-cl-tile-cols: 5"] {
	grid-template-columns: repeat(5, 1fr);
}

/* Tile-Link */
.kw-cl--tiles .kw-cl__link {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	height: 100%;
	padding: var(--kw-cl-tile-padding);
	background: var(--kw-cl-tile-bg);
	border: 1px solid var(--kw-cl-tile-border);
	border-top: 3px solid var(--kw-cl-tile-accent, var(--kw-cl-accent));
	border-radius: var(--kw-cl-tile-radius);
	transition:
		transform var(--kw-cl-transition) var(--kw-cl-easing),
		box-shadow var(--kw-cl-transition) var(--kw-cl-easing),
		border-color var(--kw-cl-transition) var(--kw-cl-easing);
}

/* Shadow-Varianten */
.kw-cl--shadow-subtle .kw-cl__link {
	box-shadow: var(--kwl-shadow-sm);
}

.kw-cl--shadow-medium .kw-cl__link {
	box-shadow: var(--kwl-shadow-md);
}

.kw-cl--shadow-strong .kw-cl__link {
	box-shadow: var(--kwl-shadow-hover);
}

/* Tile Hover */
@media (hover: hover) {
	.kw-cl--tiles .kw-cl__link:hover {
		opacity: 1;
		transform: translateY(-3px);
		box-shadow: var(--kwl-shadow-hover);
		border-color: var(--kw-cl-tile-accent, var(--kw-cl-accent));
		border-top-color: var(--kw-cl-tile-accent, var(--kw-cl-accent));
	}
}

.kw-cl--tiles .kw-cl__link:active {
	transform: scale(0.98);
}

/* Tile-Icon: Glassmorphism-Kreis */
.kw-cl--tiles .kw-cl__icon {
	width: 48px;
	height: 48px;
	margin-bottom: 8px;
	font-size: 24px;
	color: var(--kw-cl-tile-accent, var(--kw-cl-icon-color));
	background: color-mix(in srgb, var(--kw-cl-tile-accent, var(--kw-cl-icon-color)) 12%, transparent);
	border-color: color-mix(in srgb, var(--kw-cl-tile-accent, var(--kw-cl-icon-color)) 20%, transparent);
}

.kw-cl--tiles .kw-cl__icon svg {
	width: 24px;
	height: 24px;
}

/* Per-Kanal Akzentfarben */
.kw-cl--tiles .kw-cl__link[data-channel="phone"] {
	--kw-cl-tile-accent: var(--kw-cl-ch-phone, var(--kw-cl-icon-color));
}

.kw-cl--tiles .kw-cl__link[data-channel="email"] {
	--kw-cl-tile-accent: var(--kw-cl-ch-email, var(--kw-cl-icon-color));
}

.kw-cl--tiles .kw-cl__link[data-channel="map"] {
	--kw-cl-tile-accent: var(--kw-cl-ch-map, var(--kw-cl-icon-color));
}

.kw-cl--tiles .kw-cl__link[data-channel="whatsapp"] {
	--kw-cl-tile-accent: var(--kw-cl-ch-whatsapp, var(--kw-cl-icon-color));
}

.kw-cl--tiles .kw-cl__link[data-channel="instagram"],
.kw-cl--tiles .kw-cl__link[data-channel="facebook"],
.kw-cl--tiles .kw-cl__link[data-channel="pinterest"] {
	--kw-cl-tile-accent: var(--kw-cl-ch-social, var(--kw-cl-icon-color));
}

/* Tiles Breakpoints — Mobile First */
.kw-cl--tiles {
	grid-template-columns: 1fr;
}

.kw-cl--tiles .kw-cl__link {
	padding: calc(var(--kw-cl-tile-padding) * 0.7);
}

.kw-cl--tiles .kw-cl__icon {
	width: 36px;
	height: 36px;
	font-size: 18px;
	margin-bottom: 4px;
}

.kw-cl--tiles .kw-cl__icon svg {
	width: 18px;
	height: 18px;
}

@media (min-width: 361px) {
	.kw-cl--tiles {
		grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	}

	.kw-cl--tiles .kw-cl__link {
		padding: var(--kw-cl-tile-padding);
	}

	.kw-cl--tiles .kw-cl__icon {
		width: 48px;
		height: 48px;
		font-size: 24px;
		margin-bottom: 8px;
	}

	.kw-cl--tiles .kw-cl__icon svg {
		width: 24px;
		height: 24px;
	}

	.kw-cl--tiles[style*="--kw-cl-tile-cols: 3"],
	.kw-cl--tiles[style*="--kw-cl-tile-cols: 4"],
	.kw-cl--tiles[style*="--kw-cl-tile-cols: 5"] {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 481px) {
	.kw-cl--tiles[style*="--kw-cl-tile-cols: 3"] {
		grid-template-columns: repeat(3, 1fr);
	}

	.kw-cl--tiles[style*="--kw-cl-tile-cols: 4"] {
		grid-template-columns: repeat(4, 1fr);
	}

	.kw-cl--tiles[style*="--kw-cl-tile-cols: 5"] {
		grid-template-columns: repeat(5, 1fr);
	}
}

/* ---------------------------------------------------------
   7. Directions-Layout (Adresse + Route-CTA)
   --------------------------------------------------------- */
.kw-cl--directions {
	flex-direction: column;
	align-items: flex-start;
}

.kw-cl__address {
	font-style: normal;
	line-height: var(--kwl-lh-loose);
	margin-bottom: var(--kwl-space-sm, 0.5rem);
	display: flex;
	flex-direction: column;
}

.kw-cl__address-name {
	font-size: 1.1em;
	font-family: var(--kwl-font-heading);
}

.kw-cl__address-line {
	color: var(--kwl-text-muted, #718096);
}

/* Route-CTA — Shimmer-Button */
.kw-cl--directions .kw-cl__link[data-channel="route"] {
	--kwl-link-color: var(--kwl-btn-text, #ffffff);
	--kwl-link-hover-color: var(--kwl-btn-text, #ffffff);
	position: relative;
	overflow: hidden;
	background: var(--kwl-primary, #00315d);
	color: var(--kwl-btn-text, #ffffff);
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-md, 1rem);
	border-radius: var(--kwl-radius-md, 8px);
	font-weight: var(--kwl-fw-semibold);
	transition:
		box-shadow var(--kw-cl-transition) var(--kw-cl-easing),
		transform var(--kw-cl-transition) var(--kw-cl-easing);
}

.kw-cl--directions .kw-cl__link[data-channel="route"] .kw-cl__icon {
	color: inherit;
	background: transparent;
	border: none;
	width: auto;
	height: auto;
}

.kw-cl--directions .kw-cl__link[data-channel="route"] .kw-cl__icon svg {
	width: 18px;
	height: 18px;
}

.kw-cl--directions .kw-cl__link[data-channel="route"] .kw-cl__text {
	color: inherit;
}

/* Shimmer-Sweep auf Route-CTA */
.kw-cl--directions .kw-cl__link[data-channel="route"]::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		175deg,
		transparent 40%,
		color-mix(in srgb, var(--kwl-btn-text, #ffffff) 15%, transparent) 50%,
		transparent 60%
	);
	transform: translateX(-100%);
	pointer-events: none;
}

@media (hover: hover) {
	.kw-cl--directions .kw-cl__link[data-channel="route"]:hover {
		opacity: 1;
		transform: translateY(-2px);
		box-shadow: 0 4px 12px color-mix(in srgb, var(--kwl-primary, #00315d) 35%, transparent);
	}

	.kw-cl--directions .kw-cl__link[data-channel="route"]:hover::after {
		transform: translateX(100%);
		transition: transform 600ms ease;
	}
}

.kw-cl--directions .kw-cl__link[data-channel="route"]:active {
	transform: scale(0.98);
}

/* ---------------------------------------------------------
   8. Dark Mode
   --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	.kw-cl {
		--kw-cl-icon-color: var(--kwl-accent, #d4b87a);
		--kw-cl-icon-hover: color-mix(in srgb, var(--kwl-accent, #d4b87a) 80%, #ffffff);
		--kw-cl-text-color: var(--kwl-text, #f7fafc);
		--kw-cl-text-hover: color-mix(in srgb, var(--kwl-accent, #d4b87a) 80%, #ffffff);
		--kw-cl-bg-hover: rgba(255, 255, 255, 0.08);
		--kw-cl-icon-bg-hover: rgba(255, 255, 255, 0.08);
		--kw-cl-accent: var(--kwl-accent, #d4b87a);
	}

	.kw-cl__icon {
		background: color-mix(in srgb, var(--kw-cl-icon-color) 15%, transparent);
		border-color: color-mix(in srgb, var(--kw-cl-icon-color) 25%, transparent);
	}

	/* Tiles Dark Mode */
	.kw-cl--tiles {
		--kw-cl-tile-bg: var(--kwl-bg, #1a202c);
		--kw-cl-tile-border: var(--kwl-border, #4a5568);
	}

	.kw-cl--tiles .kw-cl__icon {
		background: color-mix(in srgb, var(--kw-cl-tile-accent, var(--kw-cl-icon-color)) 15%, transparent);
		border-color: color-mix(in srgb, var(--kw-cl-tile-accent, var(--kw-cl-icon-color)) 25%, transparent);
	}

	.kw-cl--directions .kw-cl__link[data-channel="route"] {
		background: var(--kwl-primary, #63b3ed);
	}

	.kw-cl__address-line {
		color: var(--kwl-text-muted, #a0aec0);
	}
}

/* ---------------------------------------------------------
   9. Reduced Motion
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.kw-cl__link,
	.kw-cl__icon,
	.kw-cl--icons .kw-cl__link,
	.kw-cl--tiles .kw-cl__link,
	.kw-cl--directions .kw-cl__link[data-channel="route"] {
		transition: none;
	}

	@media (hover: hover) {
		.kw-cl--icons .kw-cl__link:hover {
			transform: none;
		}

		.kw-cl--tiles .kw-cl__link:hover {
			transform: none;
		}

		.kw-cl--directions .kw-cl__link[data-channel="route"]:hover {
			transform: none;
		}
	}

	.kw-cl--icons .kw-cl__link:active,
	.kw-cl--tiles .kw-cl__link:active,
	.kw-cl--directions .kw-cl__link[data-channel="route"]:active {
		transform: none;
	}

	.kw-cl--directions .kw-cl__link[data-channel="route"]::after {
		display: none;
	}
}

/* ---------------------------------------------------------
   10. Focus-Visible (BFSG)
   --------------------------------------------------------- */
.kw-cl__link:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 2px;
	border-radius: 2px;
}

.kw-cl--tiles .kw-cl__link:focus-visible {
	border-radius: var(--kw-cl-tile-radius);
}

.kw-cl--directions .kw-cl__link[data-channel="route"]:focus-visible {
	border-radius: var(--kwl-radius-md, 8px);
}

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