/* --- SectionNav — Bereichs-Navigation (Sprungmarken / Reiter) --- */

/* --- Custom Properties --- */

.kw-snav {
	--kwl-snav-accent: var(--kwl-accent, #BD9B5C);
	--kwl-snav-icon: var(--kwl-snav-accent);
	--kwl-snav-surface: var(--kwl-bg, #ffffff);
	--kwl-snav-border: var(--kwl-border, #e2e8f0);
	--kwl-snav-text: var(--kwl-text, #1a202c);
	--kwl-snav-primary: var(--kwl-primary, #00315d);
	--kwl-snav-primary-hover: var(--kwl-primary-hover, #1e3a5f);
	--kwl-snav-on-navy: var(--kwl-btn-text, #ffffff);
	--kwl-snav-on-navy-icon: color-mix(in srgb, var(--kwl-snav-accent) 50%, #ffffff);
	--kwl-snav-gap: var(--kwl-space-sm, 0.5rem);
	--kwl-snav-cols: 3;
	align-self: flex-start;
	width: 100%;
	font-family: var(--kwl-font-body);
}

.kw-snav--per-2 { --kwl-snav-cols: 2; }
.kw-snav--per-3 { --kwl-snav-cols: 3; }
.kw-snav--per-4 { --kwl-snav-cols: 4; }
.kw-snav--per-5 { --kwl-snav-cols: 5; }
.kw-snav--per-6 { --kwl-snav-cols: 6; }

/* --- Liste --- */

.kw-snav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kwl-snav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.kw-snav--center .kw-snav__list {
	justify-content: center;
}

/* Flex-Kind ist im Sprungmarken-Modus die <li>.kw-snav__cell, im Reiter-Modus
   der <button>.kw-snav__item direkt. */
.kw-snav__cell {
	display: flex;
}

/* --- Item-Basis (hohe Spezifitaet gegen V4-Link-Farben) --- */

.kw-snav .kw-snav__item {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--kwl-space-sm, 0.5rem);
	width: 100%;
	min-height: 44px;
	margin: 0;
	border: 0;
	background: transparent;
	color: var(--kwl-snav-text);
	font: inherit;
	font-weight: var(--kwl-fw-semibold, 600);
	font-size: var(--kwl-fsize-small, 0.875rem);
	line-height: var(--kwl-lh-snug, 1.3);
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	transition: transform 240ms var(--kwl-ease-soft, ease),
		border-color 200ms ease,
		box-shadow 240ms var(--kwl-ease-soft, ease),
		background-color 200ms ease,
		color 200ms ease;
}

.kw-snav__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--kwl-snav-icon);
	transition: background-color 200ms ease, color 200ms ease,
		transform 240ms var(--kwl-ease-soft, ease);
}

.kw-snav__icon .kwl-icon {
	width: 1.15rem;
	height: 1.15rem;
}

.kw-snav__label {
	min-width: 0;
}

/* ============================================================
   Stil: Kacheln (Default) — Icon-Chip + Label darunter
   ============================================================ */

.kw-snav--tiles .kw-snav__list > .kw-snav__cell,
.kw-snav--tiles .kw-snav__list > .kw-snav__item {
	flex: 1 1 calc((100% - (var(--kwl-snav-cols) - 1) * var(--kwl-snav-gap)) / var(--kwl-snav-cols));
	min-width: 8rem;
	max-width: 20rem;
}

.kw-snav--tiles .kw-snav__item {
	flex-direction: column;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: 0.95rem 0.6rem 0.85rem;
	border: 1px solid var(--kwl-snav-border);
	border-radius: var(--kwl-radius-lg, 12px);
	background: var(--kwl-snav-surface);
	box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent), var(--kwl-shadow-sm);
}

.kw-snav--tiles .kw-snav__icon {
	width: 2.1rem;
	height: 2.1rem;
	border-radius: var(--kwl-radius-full, 9999px);
	background: color-mix(in srgb, var(--kwl-snav-icon) 11%, transparent);
}

.kw-snav--tiles .kw-snav__icon .kwl-icon {
	width: 1.2rem;
	height: 1.2rem;
}

.kw-snav--tiles .kw-snav__label {
	letter-spacing: var(--kwl-ls-subtle, 0.01em);
}

/* ============================================================
   Stil: Schaltflaechen — rechteckig, Marken-Charakter
   ============================================================ */

.kw-snav--buttons .kw-snav__list > .kw-snav__cell,
.kw-snav--buttons .kw-snav__list > .kw-snav__item,
.kw-snav--pills .kw-snav__list > .kw-snav__cell,
.kw-snav--pills .kw-snav__list > .kw-snav__item,
.kw-snav--text .kw-snav__list > .kw-snav__cell,
.kw-snav--text .kw-snav__list > .kw-snav__item {
	flex: 0 1 auto;
}

/* Inhaltsbreit statt 100% — im Reiter-Modus ist das Item selbst das Flex-Kind */
.kw-snav--buttons .kw-snav__item,
.kw-snav--pills .kw-snav__item,
.kw-snav--text .kw-snav__item {
	width: auto;
}

.kw-snav--buttons .kw-snav__item {
	flex-direction: row;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: 0.7rem 1.15rem;
	border: 1px solid var(--kwl-snav-border);
	border-radius: var(--kwl-radius-md, 8px);
	color: var(--kwl-snav-primary);
	letter-spacing: var(--kwl-ls-subtle, 0.01em);
	background: linear-gradient(180deg, var(--kwl-snav-surface), color-mix(in srgb, var(--kwl-snav-accent) 5%, var(--kwl-snav-surface)));
	box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 75%, transparent), var(--kwl-shadow-sm);
}

.kw-snav--buttons .kw-snav__icon .kwl-icon {
	width: 1.2rem;
	height: 1.2rem;
}

/* Feiner Gold-Unterstrich, der beim Hover aufzieht */
.kw-snav--buttons .kw-snav__item::after {
	content: '';
	position: absolute;
	left: 1.15rem;
	right: 1.15rem;
	bottom: 0.45rem;
	height: 2px;
	border-radius: 2px;
	background: linear-gradient(90deg, transparent, var(--kwl-snav-accent), transparent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 260ms var(--kwl-ease-soft, ease);
}

/* ============================================================
   Stil: Pillen — Icon + Text in einer Kapsel
   ============================================================ */

.kw-snav--pills .kw-snav__item {
	flex-direction: row;
	gap: var(--kwl-space-sm, 0.5rem);
	padding: 0.5rem 1rem 0.5rem 0.6rem;
	border: 1px solid var(--kwl-snav-border);
	border-radius: var(--kwl-radius-full, 9999px);
	background: var(--kwl-snav-surface);
	box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 70%, transparent), var(--kwl-shadow-sm);
}

.kw-snav--pills .kw-snav__icon {
	width: 1.7rem;
	height: 1.7rem;
	border-radius: var(--kwl-radius-full, 9999px);
	background: color-mix(in srgb, var(--kwl-snav-icon) 11%, transparent);
}

.kw-snav--pills .kw-snav__icon .kwl-icon {
	width: 1rem;
	height: 1rem;
}

/* ============================================================
   Stil: Textlinks — Reiter mit Unterstrich-Indikator
   ============================================================ */

.kw-snav--text .kw-snav__item {
	flex-direction: row;
	gap: var(--kwl-space-xs, 0.25rem);
	padding: var(--kwl-space-sm, 0.5rem) var(--kwl-space-xs, 0.25rem);
}

.kw-snav--text .kw-snav__icon .kwl-icon {
	width: 1.05rem;
	height: 1.05rem;
}

.kw-snav--text .kw-snav__item::after {
	content: '';
	position: absolute;
	left: var(--kwl-space-xs, 0.25rem);
	right: var(--kwl-space-xs, 0.25rem);
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--kwl-snav-accent);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 240ms var(--kwl-ease-soft, ease);
}

/* ============================================================
   Hover (nur Zeigergeraete)
   ============================================================ */

@media (hover: hover) {
	.kw-snav--tiles .kw-snav__item:hover {
		transform: translateY(-3px);
		border-color: color-mix(in srgb, var(--kwl-snav-accent) 55%, var(--kwl-snav-border));
		box-shadow: var(--kwl-shadow-md);
	}

	.kw-snav--tiles .kw-snav__item:hover .kw-snav__icon {
		background: color-mix(in srgb, var(--kwl-snav-icon) 18%, transparent);
		transform: scale(1.06);
	}

	.kw-snav--buttons .kw-snav__item:hover,
	.kw-snav--pills .kw-snav__item:hover {
		transform: translateY(-2px);
		border-color: color-mix(in srgb, var(--kwl-snav-accent) 55%, var(--kwl-snav-border));
		box-shadow: var(--kwl-shadow-md);
	}

	.kw-snav--buttons .kw-snav__item:hover::after,
	.kw-snav--text .kw-snav__item:hover::after {
		transform: scaleX(1);
	}
}

/* ============================================================
   Fokus (auch <button> ohne data-kwl-btn)
   ============================================================ */

.kw-snav .kw-snav__item:focus-visible {
	outline: 3px solid var(--kwl-focus, #7B6835);
	outline-offset: 3px;
	border-radius: var(--kwl-radius-md, 8px);
}

/* ============================================================
   Aktiver Zustand — als „ausgewaehlt" lesbar
   (Reiter: aria-selected · Sprungmarken: aria-current)
   ============================================================ */

/* Kacheln: warme Toenung + Gold-Text + feine Gold-Zunge (keine Vollflaeche) */
.kw-snav--tiles .kw-snav__item[aria-current="location"],
.kw-snav--tiles .kw-snav__item[aria-selected="true"] {
	border-color: color-mix(in srgb, var(--kwl-snav-accent) 45%, transparent);
	background: color-mix(in srgb, var(--kwl-snav-accent) 8%, var(--kwl-snav-surface));
	color: var(--kwl-snav-primary);
}

.kw-snav--tiles .kw-snav__item[aria-current="location"] .kw-snav__icon,
.kw-snav--tiles .kw-snav__item[aria-selected="true"] .kw-snav__icon {
	background: color-mix(in srgb, var(--kwl-snav-icon) 20%, transparent);
}

.kw-snav--tiles .kw-snav__item[aria-current="location"]::after,
.kw-snav--tiles .kw-snav__item[aria-selected="true"]::after {
	content: '';
	position: absolute;
	left: 1.4rem;
	right: 1.4rem;
	bottom: 0.55rem;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, transparent, var(--kwl-snav-accent), transparent);
}

/* Schaltflaechen: Marken-Navy-Verlauf, weisser Text, helles Gold-Icon */
.kw-snav--buttons .kw-snav__item[aria-current="location"],
.kw-snav--buttons .kw-snav__item[aria-selected="true"] {
	border-color: transparent;
	color: var(--kwl-snav-on-navy);
	background: linear-gradient(135deg, var(--kwl-snav-primary), var(--kwl-snav-primary-hover));
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), var(--kwl-shadow-md);
}

.kw-snav--buttons .kw-snav__item[aria-current="location"] .kw-snav__icon,
.kw-snav--buttons .kw-snav__item[aria-selected="true"] .kw-snav__icon {
	color: var(--kwl-snav-on-navy-icon);
}

.kw-snav--buttons .kw-snav__item[aria-current="location"]::after,
.kw-snav--buttons .kw-snav__item[aria-selected="true"]::after {
	display: none;
}

/* Pillen: warme Toenung + Gold-Text + Gold-Rand */
.kw-snav--pills .kw-snav__item[aria-current="location"],
.kw-snav--pills .kw-snav__item[aria-selected="true"] {
	border-color: color-mix(in srgb, var(--kwl-snav-accent) 50%, transparent);
	background: color-mix(in srgb, var(--kwl-snav-accent) 8%, var(--kwl-snav-surface));
	color: var(--kwl-snav-primary);
}

.kw-snav--pills .kw-snav__item[aria-current="location"] .kw-snav__icon,
.kw-snav--pills .kw-snav__item[aria-selected="true"] .kw-snav__icon {
	background: color-mix(in srgb, var(--kwl-snav-icon) 20%, transparent);
}

/* Textlinks: Gold-Unterstrich ausgefahren + Gold-Text */
.kw-snav--text .kw-snav__item[aria-current="location"],
.kw-snav--text .kw-snav__item[aria-selected="true"] {
	color: var(--kwl-snav-primary);
}

.kw-snav--text .kw-snav__item[aria-current="location"]::after,
.kw-snav--text .kw-snav__item[aria-selected="true"]::after {
	transform: scaleX(1);
}

/* ============================================================
   Klebende Leiste (nur Sprungmarken-Modus)
   ============================================================ */

.kw-snav--sticky {
	position: sticky;
	top: 0;
	z-index: 20;
	padding-block: var(--kwl-space-sm, 0.5rem);
	background: color-mix(in srgb, var(--kwl-page-bg, #f5f0e8) 92%, transparent);
	backdrop-filter: blur(8px);
}

/* ============================================================
   Dark Mode
   ============================================================ */

@media (prefers-color-scheme: dark) {
	.kw-snav--tiles .kw-snav__item,
	.kw-snav--buttons .kw-snav__item,
	.kw-snav--pills .kw-snav__item {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--kwl-shadow-sm);
	}

	/* Aktive Schaltflaeche: Gold-Grund + dunkler Navy-Text (statt Navy auf Navy) */
	.kw-snav--buttons .kw-snav__item[aria-current="location"],
	.kw-snav--buttons .kw-snav__item[aria-selected="true"] {
		color: var(--kwl-accent-contrast, #00315d);
		background: linear-gradient(135deg, var(--kwl-snav-accent), color-mix(in srgb, var(--kwl-snav-accent) 82%, #000000));
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), var(--kwl-shadow-md);
	}

	.kw-snav--buttons .kw-snav__item[aria-current="location"] .kw-snav__icon,
	.kw-snav--buttons .kw-snav__item[aria-selected="true"] .kw-snav__icon {
		color: var(--kwl-accent-contrast, #00315d);
	}
}

/* ============================================================
   Reduced Motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.kw-snav .kw-snav__item,
	.kw-snav__icon,
	.kw-snav .kw-snav__item::after {
		transition: none;
	}

	.kw-snav .kw-snav__item:hover {
		transform: none;
	}

	.kw-snav .kw-snav__item:hover .kw-snav__icon {
		transform: none;
	}
}

/* ============================================================
   High-Contrast-Modus
   ============================================================ */

@media (forced-colors: active) {
	.kw-snav--tiles .kw-snav__item,
	.kw-snav--buttons .kw-snav__item,
	.kw-snav--pills .kw-snav__item {
		border: 1px solid ButtonText;
	}

	.kw-snav .kw-snav__item[aria-current="location"],
	.kw-snav .kw-snav__item[aria-selected="true"] {
		outline: 2px solid Highlight;
		outline-offset: 2px;
	}
}