/**
 * agenic Komponenten-CSS – subnavi (Organismus) — vollständige Übertragung.
 *
 * Figma-Quelle: Set `subnavi` (3275:22209, Seite 0.5, Sektion
 * `04 · Organisms (Layouts)`):
 *   Layout = mega · simple · bild-raster → Modifier
 *
 * Seit 21.09.2026 nur noch diese drei — `media` und `karten` sind entfernt
 * (Entscheidung Vincent: es überleben nur die Layouts, die auf agenic.com
 * dargestellt werden). Damit hat kein Panel mehr eine linke Fläche; die
 * Regeln für `__spalte--links` und die Überlappung sind mit entfallen.
 *
 * NEU GEMESSEN 26.08.2026. Die Quelle hat sich gegenüber der Messung vom
 * 20.08.2026 geändert, und das Blatt bildete den alten Stand ab. Die
 * Unterschiede sind nicht kosmetisch:
 *
 *   1. `mega` hat KEINE linke Fläche mehr. Das Panel ist eine einzige Fläche
 *      (Surface/lightest) mit drei gleich breiten Spalten. Das Blatt legte die
 *      erste Gruppe auf Surface/light und zog den Rest um −24 darüber — das
 *      gibt es so nicht.
 *   2. Die Abstände in der Spalte waren durchweg zu groß: Gruppenabstand 16
 *      (nicht 24), Gruppe innen 8 (nicht 12), Eintragsliste 0 (nicht 12).
 *   3. Jede Gruppe trägt einen Trenner, auch die erste einer Spalte.
 *   4. Die nav-items der Subnavi tragen abweichende Polster (Instanz-Override
 *      in Figma): Titel 8/12/0/0, Eintrag 2/12/2/0 — links also 0, damit
 *      Titel und Einträge auf einer Kante stehen.
 *   5. Der Gruppentitel steht auf `State=Hover` (Button/M, Inter Medium),
 *      nicht auf Default.
 *
 * Gemessene Werte:
 *   Panel-Radius           24              → Values/radius/l
 *   mega   Panel 1198, Spaltenabstand 40, 3 Spalten à 330
 *   simple Panel  320
 *   Polster aller Panels 32/40 — Entscheidung Vincent 21.09.2026, Abweichung
 *          von der Quelle (dort 32/64 in mega, 32/32 in simple)
 *   Spalte innen           16              → Values/spacing/m
 *   subnavi-group innen     8              → Values/spacing/s
 *   Eintragsliste           0
 *   Flächen rechts         Surface/lightest
 *   Rückwärtige Unschärfe   8              → Values/effects/backdrop-blur
 *
 * Der `overlay` der Figma-Quelle (Verlauf + Scrim, Unschärfe 16 am Rahmen)
 * ist die Bühne des Screenshots und gehört nicht ins Widget — es rendert das
 * Panel, nicht den Seitenhintergrund. Im Kopf übernimmt diese Rolle
 * `.ag-header__scrim` (header.css).
 *
 * Markup: includes/render-subnavi.php · Konsumenten: ag_subnavi, ag_header.
 * Punkte kommen aus dem Atom ag_render_nav_item() — nie hier nachbauen.
 * Kontrakt: KONTRAKT-ag-subnavi-20-08.md v0.1. 0 tmp-Punkte.
 */

.ag-subnavi,
.ag-subnavi * {
	box-sizing: border-box;
}

.ag-subnavi {
	/* L3 mit L2-Defaults */
	--ag-subnavi-radius: var(--radius-l);                       /* Figma radius/l = 24 */
	--ag-subnavi-flaeche-rechts: var(--color-surface-lightest); /* Figma Surface/lightest */
	--ag-subnavi-pad-y: var(--spacing-l);                       /* Figma spacing/l = 32 */
	/* Seitliches Polster ALLER Panels, Entscheidung Vincent 21.09.2026:
	   einheitlich 32/40 (vorher 64 in mega/bild-raster, 32 in simple). Der
	   Kopf liest diesen Wert und setzt die Panelkante so, dass die erste
	   Textspalte auf der Textlinie des ersten Menüpunkts steht. */
	--ag-subnavi-pad-inline: var(--spacing-xl);                  /* Figma spacing/xl = 40 */
	--ag-subnavi-spalten-gap: var(--spacing-xl);                /* Figma spacing/xl = 40 */
	--ag-subnavi-block-gap: var(--spacing-m);                   /* Figma spacing/m = 16 */
	/* Gemeinsamer Wert mit ag_search_palette: dort steht dieselbe Unschärfe am
	   ::backdrop des Dialogs. Bis zum 26.08.2026 lagen hier 8 px hart im Blatt —
	   derselbe Wert, aber ohne Bindung, also ohne gemeinsame Quelle.
	   Auftrag Vincent 26.08.2026 („Background der Suche → gemeinsamer Token"). */
	--ag-subnavi-unschaerfe: var(--effect-backdrop-blur);       /* Figma Values/effects/backdrop-blur = 8 */

	/* Spaltenzahl der rechten Fläche. Sitzt an der WURZEL, nicht an der Spalte:
	   Das Elementor-Control setzt sie per `selectors`, der Kopf per Inline-Stil
	   aus dem Menü-Meta — beide Wege müssen dasselbe Element treffen. */
	--ag-subnavi-spalten: 3;

	display: block;
}

.ag-subnavi__panel {
	display: flex;
	align-items: stretch;
	border-radius: var(--ag-subnavi-radius);
	/* Die Rundung der inneren Spalten wird vom Panel beschnitten — so entsteht
	   dieselbe Kante wie in Figma, ohne jede Spalte einzeln zu runden. */
	overflow: hidden;
}

.ag-subnavi__spalte {
	padding-block: var(--ag-subnavi-pad-y);
	backdrop-filter: blur(var(--ag-subnavi-unschaerfe));
	-webkit-backdrop-filter: blur(var(--ag-subnavi-unschaerfe));
}

.ag-subnavi__spalte--rechts {
	flex: 1 1 auto;
	min-width: 0;
	padding-inline: var(--ag-subnavi-pad-inline);
	background: var(--ag-subnavi-flaeche-rechts);
	border-radius: var(--ag-subnavi-radius);
}

/* ── Layout=mega ────────────────────────────────────────────────────────── */
/* Eine Fläche, drei gleich breite Spalten. Panel 1198 = 2 × 64 Polster
   + 3 × 330 Spalten + 2 × 40 Abstand. */

.ag-subnavi--mega .ag-subnavi__spalte--rechts {
	display: grid;
	grid-template-columns: repeat(var(--ag-subnavi-spalten), minmax(0, 1fr));
	gap: var(--ag-subnavi-spalten-gap);
	align-content: start;
}

/* ── Layout=simple ──────────────────────────────────────────────────────── */

.ag-subnavi--simple .ag-subnavi__panel {
	inline-size: fit-content;
}

.ag-subnavi--simple .ag-subnavi__spalte--rechts {
	display: flex;
	flex-direction: column;
	gap: var(--ag-subnavi-block-gap);
	min-inline-size: 320px; /* Figma gemessen: Panel 320 */
}

/* ── Spaltenzahl: enge Zone ─────────────────────────────────────────────── */

/* Vier Spalten sprengen im 1440er-Raster den Abstand der Quelle — er fällt
   dann eine Token-Stufe tiefer, wie in der engen Zone des Kopfes. Abweichung
   von der Quelle, die nur 3 zeigt (Rückspielpunkt 0.8). Das Polster fällt
   hier nicht mehr mit: es liegt seit 21.09.2026 überall auf 40. */
@media (max-width: 1439px) {
	.ag-subnavi--mega .ag-subnavi__spalte--rechts {
		--ag-subnavi-spalten-gap: var(--spacing-l); /* 40 → 32 */
	}
}

/* ── Molekül: subnavi-group ─────────────────────────────────────────────── */

.ag-subnavi-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s); /* Figma gemessen: 8 */
	min-width: 0;
}

/*
 * Entspricht `divider · Theme=subtle, Ausrichtung=Horizontal`.
 * In Figma ist der Trenner 0 px hoch; der Abstand darunter ist der
 * Gruppen-Abstand 8, nicht ein eigener Rand. Deshalb margin 0.
 *
 * Kit-Härtung — DOPPELKLASSE, sonst ist der Trenner unsichtbar:
 * Elementor liefert `.elementor hr { background-color: transparent; margin: 0 }`
 * mit Spezifität (0,1,1) aus (`frontend.min.css`). Eine Einzelklasse (0,1,0)
 * verliert dagegen, und zwar lautlos — die Linie ist da, nur durchsichtig.
 * Dieselbe Falle wie bei `<button>` (ag_tab_item, 19.08.2026) und `<input>`
 * (ag_search_palette, 21.08.2026), diesmal über `<hr>`. Gemessen 26.08.2026,
 * Befund Vincent: „Der Divider über den Einträgen fehlt noch."
 *
 * `background-color` statt `background`, weil die Kit-Regel genau diese
 * Langform setzt — eine Kurzform derselben Spezifität würde sie zwar auch
 * schlagen, aber die Doppelklasse ist der Grund, nicht die Schreibweise.
 * Kein !important.
 */
.ag-subnavi .ag-subnavi-group__rule.ag-subnavi-group__rule {
	display: block;
	block-size: 1px;
	inline-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;                 /* Browser-Default ist `1px inset` */
	background-color: var(--color-border-subtle, var(--color-border));
	background-image: none;
	opacity: 1;                /* manche Themes dimmen hr */
}

.ag-subnavi-group__kopf {
	margin: 0;
	font: inherit;
}

/* Die Eintragsliste hat in Figma Abstand 0 — der Zeilenabstand entsteht
   allein aus dem Polster der Punkte (2 oben, 2 unten). */
.ag-subnavi-group__liste {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ag-subnavi-group__eintrag {
	margin: 0;
	padding: 0;
}

/* Kit-Härtung: Listen bekommen im Kit Innenabstände und Marker. */
.ag-subnavi .ag-subnavi-group__liste {
	list-style: none;
	padding-inline-start: 0;
}

/* ── Polster der nav-items in der Subnavi ───────────────────────────────── */
/*
 * Instanz-Override der Quelle, nicht der Atom-Default: Das Atom `nav-item`
 * (Type=Text) trägt 8/12 rundum, in der Subnavi sind es Titel 8/12/0/0 und
 * Eintrag 2/12/2/0. Links 0 ist der Grund, warum Titel und Einträge auf einer
 * Kante stehen — mit dem Atom-Polster stünden sie 12 px eingerückt.
 *
 * Doppelklasse, weil das Atom seinen Grundblock ebenfalls auf (0,2,0) legt
 * (Kit-Härtung für `<a>`), und eine Einzelklasse dagegen nicht ankommt.
 */

.ag-subnavi .ag-nav-item.ag-subnavi-group__titel {
	padding: var(--spacing-s) var(--spacing-ms) 0 0;   /* 8 / 12 / 0 / 0 */
	/* Der Gruppentitel steht in der Quelle auf `State=Hover` → Text Style
	   Button/M, Inter Medium. Kein Zustand, sondern die Ruheform des Titels. */
	font-weight: var(--fw-medium, 500);
}

.ag-subnavi .ag-subnavi-group__eintrag > .ag-nav-item {
	padding: var(--spacing-xxs) var(--spacing-ms) var(--spacing-xxs) 0; /* 2 / 12 / 2 / 0 */
}

/* ── Aktiver Gruppentitel ───────────────────────────────────────────────── */
/*
 * Der Titel steht in der Ruheform schon auf Inter Medium (Regel oben) — das
 * Schriftgewicht, mit dem das Atom `nav-item` sonst „aktiv" markiert. Aktiv
 * und nicht aktiv sahen dadurch gleich aus (gemessen 07.09.2026 auf
 * /loesungen/microsoft-dynamics-365-crm/: 11 Titel, 2 aktiv, Gewicht 500 in
 * beiden Gruppen). Der aktive Titel trägt deshalb die Schriftfarbe
 * `Text/link` — Entscheidung Vincent, 07.09.2026.
 *
 * Doppelklasse plus `:visited`, weil `.elementor-kit-7 a` (0,1,1) jede
 * Einzelklasse schlägt und der Titel ein <a> ist (Kit-Härtung wie im Atom).
 *
 * Abweichung, angemerkt: Damit ist die Farbe der einzige Träger des Zustands
 * (WCAG 1.4.1) — das Gewicht kann nicht zusätzlich tragen, weil der Titel es
 * in der Ruheform schon führt. Rückspielpunkt 0.8: Die Quelle `nav-item`
 * (684:241) kennt nur EINEN Hover/Aktiv-Look, ein farbiger Aktiv-Zustand des
 * Gruppentitels ist in Figma noch nicht gebaut.
 */

.ag-subnavi .ag-nav-item.ag-subnavi-group__titel.ag-nav-item--aktiv,
.ag-subnavi .ag-nav-item.ag-subnavi-group__titel.ag-nav-item--aktiv:visited,
.ag-subnavi .ag-nav-item.ag-subnavi-group__titel.ag-nav-item--aktiv:hover {
	--ag-nav-item-fg: var(--color-text-link); /* Figma Text/link */

	color: var(--ag-nav-item-fg);
}

.ag-subnavi--dark .ag-nav-item.ag-subnavi-group__titel.ag-nav-item--aktiv,
.ag-subnavi--dark .ag-nav-item.ag-subnavi-group__titel.ag-nav-item--aktiv:visited,
.ag-subnavi--dark .ag-nav-item.ag-subnavi-group__titel.ag-nav-item--aktiv:hover {
	--ag-nav-item-fg: var(--color-text-link-inverse); /* Figma Text/link--inverse */
}

/* Hover des Gruppentitels — KEIN Farbwechsel mehr.
 *
 * Bis 6.26.0 färbte sich der Titel im Hover auf `Text/link` (Auftrag Vincent,
 * 07.09.2026). Damals war das nötig, weil der Titel schon in Ruhe Inter Medium
 * trägt und der Gewichtswechsel des Atoms deshalb unsichtbar blieb — die Farbe
 * war das einzige Zeichen.
 *
 * Seit 6.24.0 trägt die ganze Gruppe den Zustand: Anhebung, dunklerer Trenner
 * und das Ausgrauen der übrigen Gruppen. Damit ist die Farbe ein viertes
 * Signal, und Vincent hat sie am 20.09.2026 abbestellt — erst für
 * `bild-raster`, dann auf Nachfrage für alle Layouts („den hover effekt auch
 * hierrauf übertragen"). Die Entscheidung vom 07.09.2026 ist damit abgelöst.
 *
 * Der Aktiv-Zustand darüber bleibt unverändert: Er markiert die aktuelle
 * Seite, nicht den Zeiger.
 */


/* ── Gruppen-Zustand: Trenner, Anhebung, Dämpfung ───────────────────────── */
/*
 * Auftrag Vincent, 20.09.2026: „Bei hover über Punkt: divider wird
 * aktiv/dunkel · Punkt inkl. Beschreibung hebt sich an · andere Menüpunkte
 * werden ausgegrauter. Wirkt auch bei Klick auf Beschreibungspunkte. Außer
 * hier ist ein eigener Link gesetzt. Dann wird auch dieser unterstrichen und
 * hebt sich zusätzlich an." Rückfragen beantwortet am selben Tag:
 *   W1 Anhebung  „wie bei button--text, nur hier"  → -2 px, dieselbe Dauer
 *                und Kurve wie `.ag-button:hover` (button.css Z. 82–94).
 *                Footer, Breadcrumb, Textlink bleiben unberührt.
 *   W2 Dämpfung  „Token prim müsste es geben, bedien dich da" → `Text/grey`
 *                (#6d7373). Kein Primitive direkt: die CD-Regel verlangt in
 *                Komponenten Semantik-Token, und `--color-text-grey` IST der
 *                semantische Name dieses Werts. Abweichung vom Wortlaut,
 *                angemerkt. Kontrast auf Surface/lightest 4,61 : 1, dunkel
 *                `Text/grey--inverse` auf Surface/darkest 7,63 : 1.
 *   W3 Trenner   „ja passt, aber dunkel soll er trotzdem werden" → die Ruhe
 *                bleibt `Border--subtle`, im Zustand `Border` (#18181e).
 *
 * Gilt der Gruppe (`subnavi-group`) — also `Layout=mega` und `Layout=simple`,
 * die beiden Varianten, die dieses Molekül verbauen. `media` (Medienkacheln)
 * und `karten` (Karten mit eigenem Tint) tragen ihre Zustände selbst und
 * bleiben unberührt.
 *
 * Der Zustand hängt an `:hover` UND `:focus-within` — dadurch gilt „wirkt
 * auch bei Klick auf Beschreibungspunkte" mit Tastatur genauso wie mit Maus.
 *
 * Rückspielpunkt 0.8: In Figma hat `subnavi` keine Zustandsachse für die
 * Gruppe; Trenner-Zustand, Anhebung und Dämpfung sind dort nicht gebaut.
 */

.ag-subnavi {
	--ag-subnavi-gruppe-lift: -2px; /* tmp — wie .ag-button:hover (button.css Z. 94), dort ebenfalls hart.
	                                   `Values/motion/distance/lift` steht in Figma 0.7 · 01 auf 6, nicht 2;
	                                   in tokens.css fehlt ein `--motion-distance-lift` ganz. Finding B-M6. */
	--ag-subnavi-gruppe-rule-aktiv: var(--color-border);             /* Figma Border */
	--ag-subnavi-gruppe-gedaempft-fg: var(--color-text-grey);        /* Figma Text/grey — 4,61:1 auf Surface/lightest */
	--ag-subnavi-gruppe-dauer: var(--motion-fast);                   /* wie .ag-button (150 ms) */
	--ag-subnavi-gruppe-easing: var(--motion-ease-standard);         /* Figma Motion/easing-standard */
}

.ag-subnavi--dark {
	--ag-subnavi-gruppe-rule-aktiv: var(--color-border-inverse);     /* Figma Border--inverse */
	--ag-subnavi-gruppe-gedaempft-fg: var(--color-text-grey-inverse);/* Figma Text/grey--inverse — 7,63:1 auf Surface/darkest */
}

/* Nur Zeigegeräte mit echtem Hover. Auf Touch bliebe der Zustand nach dem
   Tippen stehen und die übrigen Gruppen grau zurück — dieselbe Absicherung
   wie beim Verlauf-Button (button.css Z. 206). */
@media (hover: hover) and (pointer: fine) {

	/* 1 · Anhebung der ganzen Gruppe — Titel und Beschreibungszeilen zusammen. */
	.ag-subnavi-group {
		transition: transform var(--ag-subnavi-gruppe-dauer) var(--ag-subnavi-gruppe-easing);
	}

	.ag-subnavi-group:hover,
	.ag-subnavi-group:focus-within {
		transform: translateY(var(--ag-subnavi-gruppe-lift));
	}

	/* 2 · Trenner wird dunkel.
	   Doppelklasse wie in der Ruheregel oben (Kit-Härtung gegen
	   `.elementor hr`), plus der Gruppen-Zustand davor — damit liegt diese
	   Regel über der Ruheregel und nicht nur gleichauf. */
	.ag-subnavi .ag-subnavi-group__rule.ag-subnavi-group__rule {
		transition: background-color var(--ag-subnavi-gruppe-dauer) var(--ag-subnavi-gruppe-easing);
	}

	.ag-subnavi .ag-subnavi-group:hover > .ag-subnavi-group__rule.ag-subnavi-group__rule,
	.ag-subnavi .ag-subnavi-group:focus-within > .ag-subnavi-group__rule.ag-subnavi-group__rule {
		background-color: var(--ag-subnavi-gruppe-rule-aktiv);
	}

	/* 3 · Die übrigen Gruppen dämpfen.
	   `:has()` am Spaltenblock, nicht an jeder Gruppe: In `mega` liegen alle
	   drei Spalten in EINEM Rasterblock, die Dämpfung greift deshalb über das
	   ganze Panel und nicht nur über die eigene Spalte.

	   Die Farbe wird am Punkt selbst gesetzt, nicht an der Gruppe geerbt: Das
	   Atom deklariert `--ag-nav-item-fg` in seinem eigenen Grundblock, ein
	   Wert am Vorfahren käme nie an.

	   Ausgenommen `--aktiv`: Der Marker der aktuellen Seite bleibt stehen,
	   sonst verschwände er beim Überfahren einer fremden Gruppe. */
	.ag-subnavi__spalte--rechts:has(.ag-subnavi-group:hover) .ag-subnavi-group:not(:hover) .ag-nav-item.ag-nav-item:not(.ag-nav-item--aktiv),
	.ag-subnavi__spalte--rechts:has(.ag-subnavi-group:focus-within) .ag-subnavi-group:not(:focus-within) .ag-nav-item.ag-nav-item:not(.ag-nav-item--aktiv) {
		--ag-nav-item-fg: var(--ag-subnavi-gruppe-gedaempft-fg);

		color: var(--ag-nav-item-fg);
	}

	.ag-subnavi .ag-nav-item.ag-nav-item {
		transition: background-color var(--ag-subnavi-gruppe-dauer) var(--ag-subnavi-gruppe-easing),
			color var(--ag-subnavi-gruppe-dauer) var(--ag-subnavi-gruppe-easing);
	}

	/* 4 · Beschreibungszeile mit eigenem Link: Linie und zweite Anhebung.
	   Eine Zeile ohne Link rendert als <span> (render-nav-item.php Z. 87–94)
	   und ist damit gar kein Ziel — die Unterscheidung „außer hier ist ein
	   eigener Link gesetzt" trägt das Markup bereits.

	   Mechanik wörtlich wie `.ag-button--text` (button.css Z. 282–295): Die
	   Linie fährt von links ein und läuft beim Verlassen nach rechts hinaus.
	   Auf `background-position` darf kein Übergang liegen, sonst wandert sie
	   sichtbar quer statt umzuschalten.

	   `background-color` statt der Kurzform `background`, weil die Kurzform
	   das `background-image` der Linie mitlöschen würde — dieselbe Falle wie
	   beim Button. Das Atom setzt in seinem Grundblock die Kurzform. */
	.ag-subnavi .ag-subnavi-group__eintrag > a.ag-nav-item {
		background-color: var(--ag-nav-item-bg);
		background-image: linear-gradient(currentColor, currentColor);
		background-repeat: no-repeat;
		background-size: 0% var(--border-width-s);   /* Figma Values/border/s = 2 */
		background-position: 100% 100%;              /* Ruhe: Anker rechts */
		transition:
			transform var(--ag-subnavi-gruppe-dauer) var(--ag-subnavi-gruppe-easing),
			color var(--ag-subnavi-gruppe-dauer) var(--ag-subnavi-gruppe-easing),
			background-size var(--ag-subnavi-gruppe-dauer) var(--ag-subnavi-gruppe-easing);
	}

	.ag-subnavi .ag-subnavi-group__eintrag > a.ag-nav-item:hover,
	.ag-subnavi .ag-subnavi-group__eintrag > a.ag-nav-item:focus-visible {
		background-size: 100% var(--border-width-s);
		background-position: 0% 100%;                /* Zustand: Anker links */
		transform: translateY(var(--ag-subnavi-gruppe-lift));
	}
}

/* Bewegung reduziert: Trenner und Dämpfung bleiben — sie tragen den Zustand
   ohne Bewegung. Die Anhebung entfällt, die Linie erscheint ohne Lauf. */
@media (prefers-reduced-motion: reduce) {
	.ag-subnavi-group,
	.ag-subnavi-group:hover,
	.ag-subnavi-group:focus-within,
	.ag-subnavi .ag-subnavi-group__eintrag > a.ag-nav-item:hover,
	.ag-subnavi .ag-subnavi-group__eintrag > a.ag-nav-item:focus-visible {
		transform: none;
	}

	.ag-subnavi-group,
	.ag-subnavi .ag-subnavi-group__rule.ag-subnavi-group__rule,
	.ag-subnavi .ag-subnavi-group__eintrag > a.ag-nav-item {
		transition-duration: 1ms;
	}
}

/* ── Theme=dark ─────────────────────────────────────────────────────────── */

.ag-subnavi--dark {
	--ag-subnavi-flaeche-rechts: var(--color-surface-darkest);
}

/* ── Responsiv ──────────────────────────────────────────────────────────── */

@media (max-width: 767px) {
	.ag-subnavi__panel {
		flex-direction: column;
	}

	.ag-subnavi__spalte--rechts {
		inline-size: 100%;
		min-inline-size: 0;
		padding-inline: var(--spacing-ml);
	}

	.ag-subnavi--mega .ag-subnavi__spalte--rechts {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Layout=bild-raster ─────────────────────────────────────────────────────
   Seit 20.09.2026 (Kontrakt ag_subnavi v0.3 §7). Quelle: Variante
   `subnavi · Layout=bild-raster` (Figma 4831:99999, beim Auftrag „Layout5"),
   Panel `cols-right` 4831:100002 — gemessen am selben Tag.

   Aufbau: EINE Fläche wie `mega`, darin drei Spalten aus `subnavi-group ·
   Bild=true`; darunter ein Trenner und eine dauerhaft sichtbare Reihe
   „Weitere …" aus Pills. Kein Disclosure, kein JavaScript — das ist der
   Unterschied zu `karten`, das dieselbe dritte Menüebene aufklappt.

   Die Zustände der Gruppe (Anhebung, Trenner dunkel, Dämpfung der übrigen)
   kommen aus dem Abschnitt „Gruppen-Zustand" weiter oben und gelten hier
   mit — nur der Trenner braucht einen eigenen Selektor, weil er in der
   Kachel eine Ebene tiefer sitzt (siehe unten).
   ────────────────────────────────────────────────────────────────────────── */

.ag-subnavi--bild-raster {
	/* L3 mit L2-Defaults */
	--ag-subnavi-bild-raster-gap-x: var(--spacing-xl);   /* Figma spacing/xl = 40 */
	--ag-subnavi-bild-raster-gap-y: var(--spacing-ml);   /* Figma spacing/ml = 24 */
	--ag-subnavi-bild-breite: 130px;                     /* Figma gemessen: media-placeholder 130 */
	--ag-subnavi-bild-radius: var(--radius-m);           /* Figma radius/m = 16 */
	--ag-subnavi-bild-gap: var(--spacing-m);             /* Figma spacing/m = 16 */
	--ag-subnavi-bild-flaeche: var(--color-surface-light);   /* Figma Surface/light */
	--ag-subnavi-bild-inhalt-gap: var(--spacing-s);      /* Figma: content gap 8 */
	--ag-subnavi-nebenreihe-gap: var(--spacing-ml);      /* Figma spacing/ml = 24 */
	--ag-subnavi-nebenpills-gap: var(--spacing-s);       /* Figma spacing/s = 8 */
	--ag-subnavi-nebenreihe-fs: var(--fs-300);           /* Figma Copy/M 16 */
	--ag-subnavi-nebenreihe-lh: calc(21 / 16);           /* Figma Copy/M 21 */
	--ag-subnavi-nebenreihe-fg: var(--color-text-standard);  /* Figma Text/standard */
	--ag-subnavi-nebenreihe-rule: var(--color-border-subtle, var(--color-border));
	--ag-subnavi-nebenpill-hover: var(--color-interaction-hover-tint);       /* Figma Interaction/hover-tint 6 % */
	--ag-subnavi-nebenpill-aktiv: var(--color-surface-brand-subtle);         /* Figma Surface/brand-subtle */
}

.ag-subnavi--bild-raster.ag-subnavi--dark {
	--ag-subnavi-nebenpill-hover: var(--color-interaction-hover-tint-inverse);   /* 10 % */
	--ag-subnavi-nebenpill-aktiv: var(--color-interaction-hover-tint-inverse);
}

/* Die Fläche stapelt Raster, Trenner und Nebenreihe — Figma `cols-right`:
   VERTICAL, gap 24. */
.ag-subnavi--bild-raster .ag-subnavi__spalte--rechts {
	display: flex;
	flex-direction: column;
	gap: var(--ag-subnavi-bild-raster-gap-y);
}

/* Panel 1198 = 2 × 64 Polster + 3 × 330 Spalten + 2 × 40 Abstand — dieselbe
   Rechnung wie `mega`. Spaltenabstand 40, Zeilenabstand 24 (Figma: `grid`
   HORIZONTAL 40, `col-n` VERTICAL 24). */
.ag-subnavi__raster-bild {
	display: grid;
	grid-template-columns: repeat(var(--ag-subnavi-spalten), minmax(0, 1fr));
	column-gap: var(--ag-subnavi-bild-raster-gap-x);
	row-gap: var(--ag-subnavi-bild-raster-gap-y);
	align-content: start;
}

/* ── Molekül: subnavi-group · Bild=true ─────────────────────────────────── */

.ag-subnavi-group--bild {
	flex-direction: row;
	gap: var(--ag-subnavi-bild-gap);
	align-items: flex-start;
}

.ag-subnavi-group__medien {
	flex: 0 0 var(--ag-subnavi-bild-breite);
	margin: 0;
	overflow: hidden;
	border-radius: var(--ag-subnavi-bild-radius);
}

.ag-subnavi-group__img,
.ag-subnavi-group__platzhalter {
	display: block;
	inline-size: 100%;
	aspect-ratio: 4 / 3;  /* Figma: media-placeholder · Format=4:3 (130 × 98) */
	object-fit: cover;
}

.ag-subnavi-group__platzhalter {
	background: var(--ag-subnavi-bild-flaeche);
}

.ag-subnavi--dark .ag-subnavi-group__platzhalter {
	background: var(--color-surface-dark, var(--color-surface-darkest));
}

.ag-subnavi-group__inhalt {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--ag-subnavi-bild-inhalt-gap);
	min-inline-size: 0;
}

/*
 * Trenner-Zustand in der Kachel.
 *
 * Der Abschnitt „Gruppen-Zustand" oben greift mit
 * `.ag-subnavi-group:hover > .ag-subnavi-group__rule` — also über den DIREKTEN
 * Kindselektor. In `Bild=true` liegt der Trenner aber in `__inhalt`, eine Ebene
 * tiefer, und wäre sonst als einziger Teil der Kachel ohne Zustand. Gleiche
 * Farbe, gleiche Dauer, gleiche Doppelklasse (Kit-Härtung gegen `.elementor hr`).
 */
@media (hover: hover) and (pointer: fine) {
	.ag-subnavi .ag-subnavi-group--bild:hover .ag-subnavi-group__rule.ag-subnavi-group__rule,
	.ag-subnavi .ag-subnavi-group--bild:focus-within .ag-subnavi-group__rule.ag-subnavi-group__rule {
		background-color: var(--ag-subnavi-gruppe-rule-aktiv);
	}
}

/* ── Unter-Untermenü ───────────────────────────────────────────────────────
 *
 * Auftrag Vincent, 24.09.2026: Eine Kachel in `bild-raster` darf Unterpunkte
 * tragen (3. Menüebene). Beim Hover über die Kachel blendet die Beschreibung
 * aus und die Unterpunkte ein. Grundlage ist ein Screenshot, keine
 * Figma-Quelle — Rückspielpunkt auf 0.8.
 *
 * Die Links sind das Atom `button · Typ=text, Größe=s` mit Pfeil
 * (render-subnavi.php, ag_render_subnavi_links()).
 *
 * Tausch nur, wenn die Kachel BEIDES hat (`--wechsel`). Hat sie nur Links,
 * stehen die Links dauerhaft da.
 *
 * Beide Listen liegen in derselben Rasterzelle übereinander. Die Kachel ist
 * dadurch so hoch wie die längere von beiden — beim Tausch springt nichts.
 *
 * Unsichtbar heißt hier `opacity: 0`, nicht `visibility: hidden`: So bleiben
 * die Links per Tab erreichbar. Der Fokus landet im Link, die Kachel bekommt
 * `:focus-within`, und der Link wird sichtbar.
 *
 * Ohne echten Hover (Touch) gibt es keinen Tausch — dann stehen Beschreibung
 * und Links untereinander. Sonst wären die Links auf Touch unerreichbar.
 */

.ag-subnavi-group__links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* 0 statt 4 (Auftrag Vincent, 24.09.2026: „setze es enger"). Mit 4 war
	   der Linkblock bei 2 Links 58,6 hoch, eine zweizeilige Beschreibung nur
	   51,5 — die Kachel wuchs um 7 und zog ihre Rasterzeile mit. Mit 0 sind
	   2 Links 48,6 hoch und passen in die Höhe der Beschreibung. Den Abstand
	   zwischen den Zeilen trägt das Polster des Text-Buttons (4 unten). */
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Kit-Härtung: Listen bekommen im Kit Innenabstände und Marker. */
.ag-subnavi .ag-subnavi-group__links {
	list-style: none;
	padding-inline-start: 0;
}

/* flex statt block: Der Button ist inline-flex und säße sonst auf der
   Grundlinie — darunter blieb je Zeile eine Lücke von 3 px (gemessen
   24.09.2026: 2 Links 54,6 statt 48,6). */
.ag-subnavi-group__link-eintrag {
	display: flex;
	margin: 0;
	padding: 0;
}

/* Text-Button ohne eigenes Polster links — Kante wie Titel und Beschreibung.
   Zeilenhöhe wie das nav-item der Beschreibung (nav-item.css, 21/16) statt
   der Button-Größe s (1,45): So ist eine Linkzeile nicht höher als eine
   Beschreibungszeile, und die Kachel wächst beim Tausch nicht (Auftrag
   Vincent, 24.09.2026). Das Polster für die Hover-Linie bleibt. */
.ag-subnavi .ag-button.ag-subnavi-group__link {
	padding-inline: 0;
	line-height: calc(21 / 16);
}

.ag-subnavi-group__wechsel {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);
}

@media (hover: hover) and (pointer: fine) {
	.ag-subnavi-group__wechsel {
		display: grid;
	}

	.ag-subnavi-group__wechsel > .ag-subnavi-group__liste,
	.ag-subnavi-group__wechsel > .ag-subnavi-group__links {
		grid-area: 1 / 1;
		transition: opacity var(--ag-subnavi-gruppe-dauer) var(--ag-subnavi-gruppe-easing);
	}

	/* Ruhe: Beschreibung sichtbar, Links aus. */
	.ag-subnavi-group__wechsel > .ag-subnavi-group__links {
		opacity: 0;
		pointer-events: none;
	}

	/* Hover oder Fokus in der Kachel: tauschen. */
	.ag-subnavi-group--wechsel:hover .ag-subnavi-group__wechsel > .ag-subnavi-group__liste,
	.ag-subnavi-group--wechsel:focus-within .ag-subnavi-group__wechsel > .ag-subnavi-group__liste {
		opacity: 0;
	}

	.ag-subnavi-group--wechsel:hover .ag-subnavi-group__wechsel > .ag-subnavi-group__links,
	.ag-subnavi-group--wechsel:focus-within .ag-subnavi-group__wechsel > .ag-subnavi-group__links {
		opacity: 1;
		pointer-events: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ag-subnavi-group__wechsel > .ag-subnavi-group__liste,
	.ag-subnavi-group__wechsel > .ag-subnavi-group__links {
		transition-duration: 1ms;
	}
}

/* ── Reihe „Weitere …" ──────────────────────────────────────────────────── */

/* Kit-Härtung wie bei `ag-subnavi-group__rule`: `.elementor hr` (0,1,1) macht
   den Trenner sonst lautlos durchsichtig — deshalb Doppelklasse, kein !important. */
.ag-subnavi .ag-subnavi__nebenreihe-rule.ag-subnavi__nebenreihe-rule {
	display: block;
	block-size: 1px;
	inline-size: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background-color: var(--ag-subnavi-nebenreihe-rule);
	background-image: none;
	opacity: 1;
}

.ag-subnavi__nebenreihe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ag-subnavi-nebenreihe-gap);  /* Figma `footer`: HORIZONTAL, 24 */
}

.ag-subnavi__nebenreihe-label {
	color: var(--ag-subnavi-nebenreihe-fg);
	font-size: var(--ag-subnavi-nebenreihe-fs);
	line-height: var(--ag-subnavi-nebenreihe-lh);
	font-weight: var(--fw-light);
}

.ag-subnavi--dark .ag-subnavi__nebenreihe-label {
	color: var(--color-text-inverse);
}

/* Kit-Härtung: Listen bekommen im Kit Innenabstände und Marker. */
.ag-subnavi .ag-subnavi__nebenpills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ag-subnavi-nebenpills-gap);  /* Figma `pill-list`: 8 */
	margin: 0;
	padding-inline-start: 0;
	list-style: none;
}

/* Doppelklasse gegen die Kit-Linkfarbe (`.elementor-kit-7 a`, Spezifität 0,1,1):
   Die Pille trägt ihre Farben selbst, der Link darum darf sie nicht überfärben. */
.ag-subnavi .ag-subnavi__nebenpill-link.ag-subnavi__nebenpill-link,
.ag-subnavi .ag-subnavi__nebenpill-link.ag-subnavi__nebenpill-link:visited,
.ag-subnavi .ag-subnavi__nebenpill-link.ag-subnavi__nebenpill-link:hover {
	display: inline-flex;
	color: inherit;
	text-decoration: none;
}

.ag-subnavi .ag-subnavi__nebenpill-link:focus-visible {
	outline: 2px solid var(--color-interaction-focus-ring);
	outline-offset: 2px;
	border-radius: var(--radius-pill);
}

/* ── Responsiv ──────────────────────────────────────────────────────────── */

@media (max-width: 1439px) {
	/* Wie `mega`: im 1440er-Raster fällt der Spaltenabstand eine Token-Stufe
	   tiefer, sonst sprengen drei Kacheln die Fläche. Das Polster bleibt 40. */
	.ag-subnavi--bild-raster .ag-subnavi__spalte--rechts {
		--ag-subnavi-bild-raster-gap-x: var(--spacing-l);    /* 40 → 32 */
	}
}

@media (max-width: 767px) {
	.ag-subnavi--bild-raster .ag-subnavi__raster-bild {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ── Gruppen-Klickfläche und Zustände der Nebenpills ───────────────────────
   Auftrag Vincent, 20.09.2026, drei Punkte:
     1. „Subbranchen pill auch states animieren"
     2. „Wenn klick auf linkbereiche soll der gesamte Bereich klickbar sein
         nicht nur der Titel"
     3. „Entferne farbänderung bei hover" — Rückfrage beantwortet: nur die
         Titelfarbe; das Ausgrauen der übrigen Gruppen bleibt.
   Nachtrag vom selben Tag: Punkt 2 und 3 gelten für ALLE Layouts, die
   `subnavi-group` verbauen — die Regeln stehen deshalb ohne Layout-Präfix
   (Punkt 1 unten bleibt bei den Nebenpills und damit bei `bild-raster`).
   ────────────────────────────────────────────────────────────────────────── */

/* 1 · Ganze Gruppe klickbar — in JEDEM Layout, das `subnavi-group` verbaut
   (`mega`, `simple`, `bild-raster`). Auftrag Vincent, 20.09.2026: erst für
   die Bildkacheln, dann auf Nachfrage für alle („den hover effekt auch
   hierrauf übertragen").

   Dasselbe Verfahren wie bei `subnavi-card-item` (Layout `karten`): Das Ziel
   bleibt der nav-item — ein zweites <a> um die Gruppe gäbe ein <a> im <a>,
   das der Browser auseinanderreisst. Stattdessen legt das ::after des Titels
   eine unsichtbare Fläche über die ganze Gruppe. Sie gehört zum Link, also
   erbt sie Cursor, Fokus und Tastaturweg.

   Der Selektor verlangt ausdrücklich ein <a>: Ein Titel ohne Ziel rendert als
   <span> und bekäme sonst eine unsichtbare Fläche über der Gruppe, die nirgends
   hinführt und nebenbei die Textauswahl stört. Gemessen am 20.09.2026 — mit
   `.ag-nav-item…::after` traf die Regel auch den <span>.

   Wirkung, die man kennen muss: In `mega` ist eine Gruppe eine ganze Spalte.
   Der Leerraum zwischen ihren Einträgen führt danach auf das Ziel des
   Gruppentitels. Genau das war der Auftrag; wer es enger will, begrenzt die
   Fläche auf `__kopf` statt auf die Gruppe. */
.ag-subnavi-group {
	position: relative;
}

.ag-subnavi a.ag-nav-item.ag-subnavi-group__titel::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* Ausnahme: Kachel mit Unter-Untermenü (Korrektur Vincent, 24.09.2026:
   „Nicht der ganze Menüpunkt soll klickbar sein, sondern die bei Hover
   auftauchenden Links"). Die Fläche über der ganzen Gruppe entfällt; klickbar
   bleiben der Titel selbst und die Links. Ohne diese Ausnahme lag die Fläche
   über den Links, schluckte Klick und Hover, und jeder Klick in der Kachel
   führte auf das Ziel des Titels.
   `:has()` statt Modifier: Die Regel gilt auch für eine Kachel, die NUR Links
   und keine Beschreibung hat (dort gibt es kein `--wechsel`). */
.ag-subnavi .ag-subnavi-group:has(.ag-subnavi-group__links) a.ag-nav-item.ag-subnavi-group__titel::after {
	content: none;
}

/* Die Links liegen in jedem Fall über einer etwaigen Fläche — wie die Einträge
   unten. Ihre Hover-Animation ist die des Atoms `button · Typ=text`: Linie
   läuft von links ein, Button hebt sich um 2 px (button.css). */
.ag-subnavi .ag-button.ag-subnavi-group__link {
	position: relative;
	z-index: 2;
}

/* Einträge und Beschreibungszeilen mit eigenem Ziel liegen ÜBER der Fläche —
   sonst verschluckt die Gruppe ihre eigenen Links. Gilt für die Punkte aus dem
   Menü genauso wie für Zeilen im Format „Text | /pfad". */
.ag-subnavi .ag-subnavi-group__eintrag > a.ag-nav-item {
	position: relative;
	z-index: 2;
}

/* 2 · Zustände der Nebenpills.
   Die Pille ist eine Kachel — sie hat eine eigene Fläche. Nach dem Konzept
   „Menü-Zustände" (20.09.2026, Abschnitt 3, Kachel-Familie) trägt sie den
   Zustand als Fläche `Interaction/hover-tint`, der Text bleibt ruhig.

   Der Zustand sitzt am LINK, nicht am Atom: `pill` wird auch dort verbaut,
   wo nichts klickbar ist (Tags, Technologien). Ein Hover im Atom würde dort
   Interaktion versprechen, die es nicht gibt — dieselbe Lehre wie beim
   nav-item (6.25.1). Figma kennt für `pill` keinen Hover-Zustand:
   Rückspielpunkt 0.8. */
.ag-subnavi .ag-subnavi__nebenpill {
	background-color: transparent;
	transition: background-color var(--ag-subnavi-gruppe-dauer) var(--ag-subnavi-gruppe-easing);
}

.ag-subnavi .ag-subnavi__nebenpill-link:hover .ag-subnavi__nebenpill,
.ag-subnavi .ag-subnavi__nebenpill-link:focus-visible .ag-subnavi__nebenpill {
	background-color: var(--ag-subnavi-nebenpill-hover);
}

/* Aktuelle Seite: gefüllte Fläche statt Kontur — Entscheidung E5 des
   Konzepts „Menü-Zustände" (Kachel-Familie markiert über die Fläche). */
.ag-subnavi .ag-subnavi__nebenpill-link[aria-current="page"] .ag-subnavi__nebenpill {
	background-color: var(--ag-subnavi-nebenpill-aktiv);
}

@media (prefers-reduced-motion: reduce) {
	.ag-subnavi .ag-subnavi__nebenpill {
		transition-duration: 1ms;
	}
}

/* ── Bild im <picture> (Imagify, live) — Muster card.css ─────────────
   Imagify packt das <img> auf agenic.com in ein <picture> und verschiebt die
   Klasse dorthin; das <img> steht ohne Klasse darin, füllt seinen Rahmen
   nicht und ignoriert Einpassung/Ausrichtung. Befund QS Vincent, 26.09.2026
   („Bild ausfüllen funktioniert mobil nicht"), gemessen live auf
   /loesungen/microsoft-dynamics-365-crm/: <picture> 358 × 250, <img> 358 × 239,
   object-fit fill. Das <img> füllt jetzt das <picture> und erbt Einpassung
   und Ausrichtung. (0,2,2) schlägt `.elementor img { height: auto }` (0,1,1). */
.ag-subnavi-group picture.ag-subnavi-group__img > img {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: inherit;
    object-fit: inherit;
    object-position: inherit;
}