/**
 * Anchor Nav – strukturelles Frontend-CSS.
 *
 * Die konkreten Werte kommen aus den `--anv-*`-Variablen, die pro Instanz auf dem Wrapper
 * (#anv-<id>-<n>) gesetzt werden. Hier stehen nur Struktur + Fallbacks. Die Fallbacks
 * entsprechen den Design-Defaults, damit die Box auch ohne gespeicherte Optik gut aussieht.
 */

.anv {
	box-sizing: border-box;
	font-family: var(--anv-font-family, inherit);
}

.anv *,
.anv *::before,
.anv *::after {
	box-sizing: border-box;
}

/* Als Sidebar: feste Breite; die Positionierung (neben dem Inhalt) macht das Seitenlayout. */
.anv:not(.is-mobile) {
	width: var(--anv-box-width, 240px);
	max-width: 100%;
}

.anv--sticky:not(.is-mobile) {
	position: -webkit-sticky;
	position: sticky;
	top: var(--anv-sticky-top, 70px);
	align-self: flex-start;
}

/* ---------- Die sichtbare Box ---------- */
.anv__panel {
	background: var(--anv-box-bg, transparent);
	border: var(--anv-box-border-width, 0) solid var(--anv-box-border, transparent);
	border-radius: var(--anv-box-radius, 8px);
	padding: var(--anv-box-padding, 0);
}

/* ---------- Vortext („DIREKT ZU“) ---------- */
.anv__prefix {
	margin: 0 0 var(--anv-prefix-margin, 8px);
	padding: 0 var(--anv-link-pad-x, 8px);
	font-family: var(--anv-prefix-font-family, inherit);
	font-size: var(--anv-prefix-size, 12px);
	font-weight: var(--anv-prefix-weight, 600);
	color: var(--anv-prefix-color, #6b7280);
	letter-spacing: var(--anv-prefix-letter-spacing, 0.05em);
	text-transform: var(--anv-prefix-transform, uppercase);
	line-height: 1.3;
}

/* ---------- Linkliste ---------- */
.anv__list {
	display: flex;
	flex-direction: column;
	/* Links schrumpfen auf ihre Textbreite: klickbar sind nur die Wörter, nicht die ganze Zeile. */
	align-items: flex-start;
	gap: var(--anv-link-gap, 2px);
	max-height: var(--anv-box-max-height, none);
	overflow-y: auto;
}

.anv__link {
	display: inline-block;
	max-width: 100%;
	/* Einrückung als margin (außerhalb der Klickfläche), damit der eingerückte Leerraum nicht klickbar ist. */
	margin-left: calc(var(--anv-depth, 0) * var(--anv-indent, 14px));
	padding: var(--anv-link-pad-y, 4px) var(--anv-link-pad-x, 8px);
	border-radius: var(--anv-link-radius, 6px);
	border-left: 0 solid transparent;
	color: var(--anv-link-color, #4d4d4d);
	font-family: var(--anv-link-font-family, inherit);
	font-size: var(--anv-link-size, 14px);
	font-weight: var(--anv-link-weight, 400);
	line-height: var(--anv-link-line-height, 1.5);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.anv__link--child {
	font-size: var(--anv-child-size, var(--anv-link-size, 14px));
}

.anv__link:hover,
.anv__link:focus {
	color: var(--anv-link-hover, #7bb261);
	outline: none;
}

.anv__link.is-active {
	color: var(--anv-link-active, #7bb261);
}

/* Aktiv-Markierung: Balken links */
.anv[data-anv-active-indicator="bar"] .anv__link {
	border-left-width: var(--anv-bar-width, 3px);
	border-left-style: solid;
	border-left-color: transparent;
}

.anv[data-anv-active-indicator="bar"] .anv__link.is-active {
	border-left-color: var(--anv-bar-color, #7bb261);
}

/* Aktiv-Markierung: Hintergrund */
.anv[data-anv-active-indicator="background"] .anv__link.is-active {
	background: var(--anv-active-bg, #f0f6ec);
}

.anv__empty {
	margin: 0;
	padding: var(--anv-link-pad-y, 4px) var(--anv-link-pad-x, 8px);
	color: var(--anv-prefix-color, #6b7280);
	font-size: var(--anv-link-size, 14px);
}

/* ---------- Mobile-Grundzustände ---------- */
.anv__toggle,
.anv__overlay,
.anv__panel-head {
	/* Standard: unsichtbar; erst der Drawer blendet sie ein. */
	display: none;
}

/* Auf kleinen Screens ganz ausblenden. */
.anv.is-mobile.anv--mobile-hidden {
	display: none;
}

/* Auf kleinen Screens einfach inline sichtbar (nicht sticky). */
.anv.is-mobile.anv--mobile-visible {
	position: static;
	width: 100%;
}

/* ---------- Mobile-Drawer ---------- */
.anv.is-mobile.anv--mobile-drawer {
	position: static;
	width: auto;
}

/*
 * Drawer-Portal: Auf Mobilgeräten lagert das JS Overlay + Panel als eigenes Element
 * (`.anv-portal`, trägt dieselben `.anv…`-Klassen) direkt unter <body> aus. So orientiert
 * sich `position: fixed` am Viewport statt an einem transformierten/overflow-begrenzten
 * Theme-Container – der Drawer liegt damit über Header & Co. Alle Drawer-Regeln unten
 * greifen weiter, weil das Portal die Klassen `anv is-mobile anv--mobile-drawer …` besitzt.
 */
.anv-portal {
	margin: 0;
}

/* Öffnen-Button */
.anv.is-mobile.anv--mobile-drawer .anv__toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: var(--anv-drawer-btn-border-width, 0) solid var(--anv-drawer-btn-border, transparent);
	border-radius: var(--anv-drawer-btn-radius, 8px);
	background: var(--anv-drawer-btn-bg, #7bb261);
	color: var(--anv-drawer-btn-color, #fff);
	box-shadow: var(--anv-drawer-btn-shadow, none);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.anv.is-mobile.anv--mobile-drawer .anv__toggle:hover {
	/* Fallback-Kette: Hover-Wert, sonst der Normalzustand. */
	background: var(--anv-drawer-btn-bg-hover, var(--anv-drawer-btn-bg, #7bb261));
	box-shadow: var(--anv-drawer-btn-shadow-hover, var(--anv-drawer-btn-shadow, none));
}

.anv__toggle-icon::before {
	font-size: 1.1em;
	line-height: 1;
}

.anv__toggle-icon[data-icon="menu"]::before {
	content: "\2630"; /* ☰ */
}

.anv__toggle-icon[data-icon="list"]::before {
	content: "\2261"; /* ≡ */
}

/* Icons ohne verlässliches Textzeichen (Filter/Zahnrad): als Maske gezeichnet,
   damit sie – wie die Glyphen oben – die Button-Textfarbe (currentColor) erben. */
.anv__toggle-icon[data-icon="filter"]::before,
.anv__toggle-icon[data-icon="settings"]::before {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.anv__toggle-icon[data-icon="filter"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5z'/%3E%3C/svg%3E");
}

.anv__toggle-icon[data-icon="settings"]::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/%3E%3Cpath fill-rule='evenodd' d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.752l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/%3E%3Cpath fill-rule='evenodd' d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.752l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z'/%3E%3C/svg%3E");
}

/* Panel wird zum ausfahrbaren Drawer */
.anv.is-mobile.anv--mobile-drawer .anv__panel {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 100000;
	width: min(var(--anv-drawer-width, 320px), 100%);
	max-width: 100%;
	overflow-y: auto;
	background: var(--anv-drawer-bg, #fff);
	border: 0;
	border-radius: var(--anv-drawer-radius, 0);
	padding: var(--anv-drawer-padding, 20px);
	box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
	transition: transform 0.3s ease;
}

/* Fullscreen-Variante */
.anv.is-mobile.anv--mobile-drawer.anv--drawer-fullscreen .anv__panel {
	width: 100%;
	transform: translateY(100%);
}

.anv.is-mobile.anv--mobile-drawer.anv--drawer-fullscreen.is-open .anv__panel {
	transform: translateY(0);
}

/*
 * Seitliches Panel (rechts/links). Am Frontend liegt IMMER auch eine `anv--drawer-<seite>`-
 * Klasse an – selbst bei „Vollbild“. Damit Vollbild nicht überschrieben wird, greifen die
 * Seiten-Regeln nur, solange NICHT Vollbild aktiv ist.
 */
.anv.is-mobile.anv--mobile-drawer.anv--drawer-right:not(.anv--drawer-fullscreen) .anv__panel {
	right: 0;
	transform: translateX(100%);
}

.anv.is-mobile.anv--mobile-drawer.anv--drawer-left:not(.anv--drawer-fullscreen) .anv__panel {
	left: 0;
	transform: translateX(-100%);
}

.anv.is-mobile.anv--mobile-drawer.anv--drawer-right:not(.anv--drawer-fullscreen).is-open .anv__panel,
.anv.is-mobile.anv--mobile-drawer.anv--drawer-left:not(.anv--drawer-fullscreen).is-open .anv__panel {
	transform: translateX(0);
}

/* Overlay */
.anv.is-mobile.anv--mobile-drawer.is-open .anv__overlay {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: var(--anv-drawer-overlay, #000);
	opacity: calc(var(--anv-drawer-overlay-opacity, 50) / 100);
}

/* Kopf im Drawer (Titel + Schließen) */
.anv.is-mobile.anv--mobile-drawer .anv__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.anv__panel-title {
	font-weight: 600;
	font-size: 1.1em;
	color: var(--anv-drawer-title-color, #1d2327);
}

.anv__close {
	border: 0;
	background: none;
	font-size: 24px;
	line-height: 1;
	color: var(--anv-drawer-title-color, #1d2327);
	cursor: pointer;
	padding: 0 4px;
}

/* Verhindert Body-Scroll, während der Drawer offen ist (JS setzt die Klasse). */
body.anv-drawer-open {
	overflow: hidden;
}