/*
 * ag_footer — Seitenabschluss (Organismus)
 *
 * Quelle  : Figma `footer` (691:420), Seite 0.5
 *           Desktop 691:393 · Mobil 2658:34994 — nachgemessen 17.08.2026
 * Kontrakt: v0.1 (claude/kontrakt-ag-footer.md)
 *
 * Token-Kette: L3 (--ag-footer-*) → L2 (--color-*, --spacing-*) → L1.
 * Kein Hex, keine harten Spacings. Der Footer ist per Definition dunkel —
 * die einwertige Theme-Achse wurde am 11.08.2026 aus der Quelle entfernt.
 *
 * Typografie exakt nach den Text Styles der Quelle:
 *   Claim         Digital/General/Display/S  38/44  → --fs-750
 *   Nav, Kontakt  Digital/General/Copy/L     24/32  → --fs-600
 *   Rechtliches   Digital/General/Copy/S     14/19  → --fs-200
 * Zwei Inverse-Weißtöne, weil die Quelle zwei führt (Finding F-FTR-3):
 *   Text/inverse (#ebf1f2, gebunden)  → --color-text-inverse-soft
 *   #ffffff (ungebunden in `text`-Instanzen) → --color-text-inverse
 */

.ag-footer {
	/* L3 mit L2-Defaults */
	/* Tiefenfläche wie im Testimonial-Bereich (Entscheidung Vincent, 26.09.2026;
	   Konzept claude/footer-sitemap-konzept-26-09.md). Bewusst NICHT additiv:
	   gilt für beide Aufbauten und folgt der globalen Einstellung „Flächen" —
	   „Glatt" stellt den alten Stand her. Figma: Surface/darkest + Lage `tiefe`
	   (Paint Style Fusion | Tiefe/diagonal-hell, wertgleich zu --gradient-tiefe-diagonal). */
	--ag-footer-flaeche:      var(--gradient-surface-darkest-tiefe);
	--ag-footer-text:         var(--color-text-inverse);         /* #ffffff — `text`-Instanzen Farbe=Inverse */
	--ag-footer-text-soft:    var(--color-text-inverse-soft);    /* #ebf1f2 — Figma Text/inverse (gebunden) */
	--ag-footer-luft-block:   var(--spacing-4xl);   /* 128 — Desktop */
	/* Mindest-Seitenpolster, NICHT das Desktop-Padding. Ab 1248 px übernimmt die
	   calc() unten und hält den Inhalt exakt auf --content-width (1200). Bei 1440
	   ergibt das 120 px je Seite — genau das Maß der Figma-Quelle. Ein höheres
	   Minimum (64) würde den Inhalt zwischen 1200 und 1448 px schmaler als 1200
	   machen; deshalb steht hier ml wie bei hero, intro-media und card-grid. */
	--ag-footer-luft-inline:  var(--spacing-ml);    /*  24 */
	--ag-footer-spalten-gap:  var(--spacing-xxl);   /*  64 — Quelle `row` gap */
	--ag-footer-zeilen-gap:   var(--spacing-xxl);   /*  64 — Quelle `footer-content` gap */
	--ag-footer-legals-gap:   var(--spacing-m);     /*  16 — Quelle `legals` gap */
	/* Quelle `col-2` (1734:26799) ist 585 px breit — eine ungebundene Rahmenbreite,
	   kein Figma-Token. Sie bestimmt den Umbruch des Claims nach „through".
	   tmp bis entschieden ist, ob dafür ein Token entsteht (Finding F-FTR-1). */
	--ag-footer-claim-breite: 585px;                /* tmp */
	--ag-footer-space-before: 0px;
	--ag-footer-space-after:  0px;

	box-sizing: border-box;
	margin-block-start: var(--ag-footer-space-before);
	margin-block-end:   var(--ag-footer-space-after);
	padding-block: var(--ag-footer-pad-oben, var(--ag-footer-luft-block)) var(--ag-footer-pad-unten, var(--ag-footer-luft-block));
	/* Full-Bleed-Regel: Flaeche ueber die volle Breite, Inhalt im Container */
	padding-inline: max(var(--ag-footer-luft-inline), calc((100% - var(--content-width, 1200px)) / 2));
	background: var(--ag-footer-flaeche);
	color: var(--ag-footer-text);
}

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

/* Keine max-width hier: Die Breitenbegrenzung leistet allein das Polster der
   Wurzel (Full-Bleed-Regel). Eine zusaetzliche max-width wuerde sich mit dem
   Polster addieren und den Inhalt schmaler als --content-width machen. */
.ag-footer__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ag-footer-zeilen-gap);
}

/* ── Obere Reihe ──────────────────────────────────────────── */

/* Quelle `row` (1738:26849): HORIZONTAL, SPACE_BETWEEN, counter CENTER, gap 64.
   Das space-between ist der Grund, warum die Claim-Spalte rechts steht — mit
   reinem gap saesse sie direkt neben der Navigation. */
.ag-footer__row {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	gap: var(--ag-footer-spalten-gap);
	align-items: center;
}

.ag-footer__col {
	display: flex;
	flex-direction: column;
}

/* Quelle `col-1` (1734:26682): counter MIN — Bildmarke und Navigation stehen
   oben buendig. Ohne das greift der Flex-Default `stretch`: der Logo-Link wird
   auf Spaltenhoehe gezogen (gemessen 17.08.2026: SVG 32 x 296 statt 32 x 34)
   und die Marke sitzt scheinbar mittig. */
.ag-footer__col--marke {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ag-footer-spalten-gap);
	flex: 0 0 auto;
}

/* Quelle `col-2` (1734:26799): VERTICAL, SPACE_BETWEEN, Hoehe FILL (= Reihenhoehe),
   Breite 585 FIXED. Der Abstand Claim → Kontakt entsteht dadurch rechnerisch
   (296 − 88 − 112 = 96) und ist keine eigene Abstandsstufe. */
.ag-footer__col--claim {
	justify-content: space-between;
	align-self: stretch;
	gap: var(--spacing-s);
	flex: 0 1 var(--ag-footer-claim-breite);
	min-width: 0;
}

/* ── Logo ─────────────────────────────────────────────────── */

.ag-footer__logo {
	display: inline-flex;
	line-height: 0;
	flex: 0 0 auto;
	align-self: flex-start;
}

/* Die Bildmarke ist ein <a> und faellt damit unter die Kit-Linkfarbe
   `.elementor-kit-7 a` (0,2,0) — `color: inherit` mit (0,1,0) verlor, das SVG
   zeichnete in `rgb(14,18,22)` statt Weiss (gemessen 17.08.2026). Farbe
   deshalb auf (0,2,0) und alle Linkzustaende mit abdecken; das SVG fuellt
   mit currentColor. Quelle: `agenic-logo / Farbe=Weiss`. */
.ag-footer .ag-footer__logo,
.ag-footer .ag-footer__logo:visited,
.ag-footer .ag-footer__logo:hover,
.ag-footer .ag-footer__logo:focus-visible {
	color: var(--ag-footer-text);
	text-decoration: none;
}

.ag-footer__logo-mark {
	display: block;
	width: var(--spacing-l);   /* 32 — Quelle 35,5 × 37,7, auf die Leiter gezogen */
	height: auto;
	aspect-ratio: 125 / 133;   /* viewBox — haelt die Hoehe, egal wie der Flex-Kontext dehnt */
}

/* ── Navigation ───────────────────────────────────────────── */

.ag-footer__nav {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-l);
}

/* Quelle: `text` (1750:31161) unter der Liste, gleicher Style wie die Links —
   Copy/L, kein Titel-Look. Reihenfolge im Markup: Liste zuerst, dann dies. */
.ag-footer__nav-titel {
	margin: 0;
	font-size: var(--fs-600);              /* Copy/L 24 */
	line-height: calc(32 / 24);
	color: var(--ag-footer-text);
}

.ag-footer__nav-liste,
.ag-footer__rechtslinks,
.ag-footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ag-footer__nav-liste {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-s);                 /* Quelle `primary` gap 8 */
}

/* Quelle: Nav-Links sind `text / Copy/L, Farbe=Inverse` — 24/32, nicht das
   gedaempfte Grau der Rechtszeile. */
.ag-footer .ag-footer__nav-link {
	display: block;
	font-size: var(--fs-600);
	line-height: calc(32 / 24);
}

/* Links: Spezifitaet (0,2,0) gegen Kit-/Theme-Linkfarben (0,1,1).
   Farben nach Quelle, nicht gedaempft: Nav und Rechtszeile sind
   `Farbe=Inverse` (#ffffff), Kontaktzeilen `Text/inverse` (#ebf1f2). */
.ag-footer .ag-footer__nav-link,
.ag-footer .ag-footer__rechtslink {
	color: var(--ag-footer-text);
	text-decoration: none;
	transition: color var(--motion-duration-xs, 150ms) ease;
}

.ag-footer .ag-footer__kontakt-zeile {
	color: var(--ag-footer-text-soft);
	text-decoration: none;
	transition: color var(--motion-duration-xs, 150ms) ease;
}

.ag-footer .ag-footer__nav-link:visited,
.ag-footer .ag-footer__rechtslink:visited {
	color: var(--ag-footer-text);
}

.ag-footer .ag-footer__kontakt-zeile:visited {
	color: var(--ag-footer-text-soft);
}

/* Hover-Zustand: durchlaufende Linie statt `text-decoration: underline`.
   Gleiche Mechanik wie .ag-link im Child-Theme und der Button-Typ Text
   (Variante V3, Entscheidung Vincent 24.08.2026): Die Linie faehrt von
   links ein und laeuft beim Verlassen nach rechts weiter hinaus. Den
   Richtungswechsel traegt allein der Sprung des Ankerpunkts
   (background-position 100% → 0%) — auf diese Eigenschaft darf kein
   Uebergang liegen, sonst wandert die Linie sichtbar quer.

   `currentColor` statt eines Farb-Tokens: Die drei Linksorten tragen
   unterschiedliche Farben (--ag-footer-text bzw. --ag-footer-text-soft),
   und die Linie soll jeweils die des Textes annehmen. */
.ag-footer .ag-footer__nav-link,
.ag-footer .ag-footer__rechtslink,
.ag-footer .ag-footer__kontakt-zeile {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0% var(--border-width-s);
	background-position: 100% 100%;   /* Ruhe: Anker rechts */
	transition:
		color var(--motion-duration-xs, 150ms) ease,
		background-size var(--motion-duration-xs) var(--motion-ease-standard),
		transform var(--motion-duration-xs) var(--motion-ease-standard);
}

/* nav-link und kontakt-zeile stehen auf `display: block` (Z. 174 / 241) und
   fuellen damit die volle Spaltenbreite. Ohne diese Begrenzung liefe die
   Linie ueber die ganze Spalte statt unter dem Text. `width: fit-content`
   behaelt den Blockfluss bei — jede Zeile bleibt auf ihrer eigenen Zeile —
   und begrenzt nur die Box. ACHTUNG: Damit schrumpft auch die Klickflaeche
   von der Spaltenbreite auf die Textbreite. Das ist die uebliche Erwartung
   bei einer Textnavigation, aber es ist eine Verhaltensaenderung.
   `.ag-footer__rechtslink` braucht das nicht — der ist inline. */
.ag-footer .ag-footer__nav-link,
.ag-footer .ag-footer__kontakt-zeile {
	width: fit-content;
}

.ag-footer .ag-footer__nav-link:hover,
.ag-footer .ag-footer__nav-link:focus-visible,
.ag-footer .ag-footer__rechtslink:hover,
.ag-footer .ag-footer__rechtslink:focus-visible,
.ag-footer .ag-footer__kontakt-zeile:hover,
.ag-footer .ag-footer__kontakt-zeile:focus-visible {
	color: var(--ag-footer-text);
	background-size: 100% var(--border-width-s);
	background-position: 0% 100%;     /* Hover: Anker links */
}

/* Anhebung nur in der Navigation. Die Rechtszeile steht als Reihe
   kleingedruckter Links nebeneinander und die Kontaktzeilen sind eine
   Adresse — dort macht ein springender Text die Zeile unruhig. Gleiche
   Unterscheidung wie .ag-link gegen .ag-link--flat im Child-Theme. */
.ag-footer .ag-footer__nav-link:hover,
.ag-footer .ag-footer__nav-link:focus-visible {
	transform: translateY(-2px);   /* tmp — wie .ag-button.ag-button:hover;
	                                  Figma kennt kein Token
	                                  Values/motion/distance/lift. */
}

/* Bewegung reduziert: Die Linie bleibt, sie erscheint nur ohne Lauf, und
   der Text springt nicht. */
@media (prefers-reduced-motion: reduce) {
	.ag-footer .ag-footer__nav-link,
	.ag-footer .ag-footer__rechtslink,
	.ag-footer .ag-footer__kontakt-zeile {
		transition-duration: 1ms;
	}
	.ag-footer .ag-footer__nav-link:hover,
	.ag-footer .ag-footer__nav-link:focus-visible {
		transform: none;
	}
}

.ag-footer :focus-visible {
	outline: 2px solid var(--ag-footer-text);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ── Claim, Kontakt, Soziales ─────────────────────────────── */

/* Quelle: Text Style Digital/General/Display/S — 38/44, Fill Text/inverse. */
.ag-footer__claim {
	margin: 0;
	font-size: var(--fs-750);
	line-height: calc(44 / 38);
	color: var(--ag-footer-text-soft);
}

/* Quelle `contact` (1750:31112): ein einziger Textknoten mit Zeilenhoehe 32 —
   zwischen den Zeilen sitzt kein zusaetzlicher Abstand. Der Abstand nach oben
   entsteht aus dem space-between der Spalte, nicht aus einer Margin. */
.ag-footer__kontakt {
	display: flex;
	flex-direction: column;
	gap: 0;
	font-style: normal;
}

.ag-footer__kontakt-zeile {
	display: block;
}

/* Quelle `contact` (1750:31112): VERTICAL, gap 16, HUG. Ein Block — damit das
   space-between der Spalte zwei Kinder verteilt (Claim oben, Kontakt unten)
   und nicht drei. */
.ag-footer__contact {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-m);
	align-items: flex-start;
}

.ag-footer__social {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-m);              /* Quelle `social-icons` gap 16 */
}

/* Das Badge liefert Flaeche, Radius und Groesse (Atom `icon-badge`,
   Farbe=light, Groesse=S). Der Link ist nur noch Huelle — er darf dem
   Badge weder Groesse noch Farbe aufzwingen. */
.ag-footer__social-link {
	display: inline-flex;
	text-decoration: none;
}

.ag-footer .ag-footer__social-link,
.ag-footer .ag-footer__social-link:visited,
.ag-footer .ag-footer__social-link:hover,
.ag-footer .ag-footer__social-link:focus-visible {
	text-decoration: none;
}

/* ── Trenner ──────────────────────────────────────────────── */

.ag-footer__trenner {
	width: 100%;
}

/* Paritaets-Abweichung der Quelle (Kontrakt G-4): nur mobil sichtbar.
   Dreifach verankert, weil `.ag-divider.ag-divider { display: block }`
   ebenfalls (0,2,0) hat und divider.css NACH footer.css geladen wird —
   bei Gleichstand entscheidet die Ladereihenfolge. Der Trenner stand
   dadurch auch auf Desktop im Fluss und war das dritte Kind der
   space-between-Spalte (gemessen 17.08.2026: 47,5 px statt 96 px). */
.ag-footer .ag-footer__trenner--nur-mobil.ag-footer__trenner--nur-mobil {
	display: none;
}

/* ── Rechtsbereich ────────────────────────────────────────── */

.ag-footer__legals {
	display: flex;
	flex-direction: column;
	gap: var(--ag-footer-legals-gap);
}

.ag-footer__legals-inner {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-m);
	align-items: flex-start;
	justify-content: space-between;
}

/* Quelle `tertiary` (1750:30566): gap 8, dazwischen ein senkrechter Strich
   ueber die Zeilenhoehe (19).
   Der Strich ist bewusst KEIN `ag-divider`: ein Divider nimmt im System immer
   die volle Breite, die Vertikal-Achse wird nicht mehr genutzt (Entscheidung
   Vincent, 17.08.2026). Er entsteht deshalb als Kontur zwischen zwei
   Eintraegen — Farbe und Staerke bleiben an denselben Tokens wie die
   `auf-dunkel`-Variante des Atoms, damit beide nicht auseinanderlaufen. */
.ag-footer__rechtslinks {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-s);
	flex-wrap: wrap;
	align-items: stretch;
}

.ag-footer__rechtslink-item {
	display: flex;
	align-items: center;
}

.ag-footer__rechtslink-item + .ag-footer__rechtslink-item {
	border-inline-start: var(--border-width-xs) solid var(--color-border-inverse);
	padding-inline-start: var(--spacing-s);
}

.ag-footer__copyright {
	margin: 0;
	text-align: right;
	color: var(--ag-footer-text);
	font-size: var(--fs-200);
	line-height: calc(19 / 14);
}

/* Quelle: Digital/General/Copy/S — 14/19. */
.ag-footer__rechtslink {
	font-size: var(--fs-200);
	line-height: calc(19 / 14);
}

/* Quelle: Digital/General/Copy/L — 24/32. */
.ag-footer__kontakt-zeile {
	font-size: var(--fs-600);
	line-height: calc(32 / 24);
}

/* ── Aufbau „Sitemap" (seit 10.52.0) ─────────────────────────── */
/* Quelle `footer · Aufbau=sitemap` — Desktop 5071:25148, Mobil 5071:25182.
   Kopf (Marke · Claim · Kontakt) und Sitemap teilen ein Raster aus fünf
   Spalten: Der Claim steht über der zweiten, der Kontakt über der vierten
   Spalte — gleiche Kanten ohne feste Breiten. Die Quelle baut das mit
   Auto-Layout nach (Spalte 214,4 = (1200 − 4 × 32) / 5). */

.ag-footer--sitemap {
	--ag-footer-raster-spalten: 5;
	--ag-footer-raster-gap:     var(--spacing-l);    /* 32 — Quelle `kopf`/`sitemap` gap */
	--ag-footer-spalte-gap:     var(--spacing-m);    /* 16 — Titel → Liste */
	--ag-footer-liste-gap:      var(--spacing-s);    /*  8 — zwischen den Links */
}

.ag-footer__kopf,
.ag-footer__sitemap {
	display: grid;
	grid-template-columns: repeat(var(--ag-footer-raster-spalten), minmax(0, 1fr));
	column-gap: var(--ag-footer-raster-gap);
}

.ag-footer__kopf {
	align-items: start;
}

.ag-footer__marke {
	grid-column: 1 / 2;
	display: flex;
}

.ag-footer--sitemap .ag-footer__claim {
	grid-column: 2 / 4;
}

.ag-footer--sitemap .ag-footer__contact {
	grid-column: 4 / 6;
}

.ag-footer__sitemap {
	row-gap: var(--spacing-l);
}

.ag-footer__spalte {
	display: flex;
	flex-direction: column;
	gap: var(--ag-footer-spalte-gap);
	min-width: 0;
}

/* Quelle `titel`: Digital/General/Headline/S — 16/21 Medium, Farbe=Inverse. */
.ag-footer__spalte-titel {
	margin: 0;
	font-size: var(--fs-300);
	line-height: calc(21 / 16);
	font-weight: var(--fw-medium);
	color: var(--ag-footer-text);
}

.ag-footer__spalte-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ag-footer-liste-gap);
}

/* Quelle `link`: Digital/General/Copy/M — 16/21, Farbe=Inverse. Linkfarbe
   auf (0,2,0) gegen die Kit-Linkfarbe (0,1,1). Hover wie die Navigation des
   kompakten Aufbaus: durchlaufende Linie, ohne Anheben — in einer dichten
   Liste macht ein springender Text die Spalte unruhig. */
.ag-footer .ag-footer__spalte-link,
.ag-footer .ag-footer__spalte-link:visited,
.ag-footer .ag-footer__spalte-titel-link,
.ag-footer .ag-footer__spalte-titel-link:visited {
	color: var(--ag-footer-text);
	text-decoration: none;
}

.ag-footer .ag-footer__spalte-link {
	font-size: var(--fs-300);
	line-height: calc(21 / 16);
}

/* Hervorgehobener Link (seit 10.67.0, Anweisung Vincent 27.09.2026): Menüpunkt
   trägt die Menü-CSS-Klasse `ag-footer-stark`. Fett = --fw-bold (700) — kräftiger
   als die Spaltentitel (--fw-medium, 500). Abweichung von der Figma-Quelle, dort
   gibt es keine hervorgehobenen Links (Rückspielpunkt). */
.ag-footer .ag-footer__spalte-item--stark .ag-footer__spalte-link {
	font-weight: var(--fw-bold);
}

.ag-footer .ag-footer__spalte-link,
.ag-footer .ag-footer__spalte-titel-link {
	display: block;
	width: fit-content;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-size: 0% var(--border-width-s);
	background-position: 100% 100%;   /* Ruhe: Anker rechts */
	transition: background-size var(--motion-duration-xs) var(--motion-ease-standard);
}

.ag-footer .ag-footer__spalte-link:hover,
.ag-footer .ag-footer__spalte-link:focus-visible,
.ag-footer .ag-footer__spalte-titel-link:hover,
.ag-footer .ag-footer__spalte-titel-link:focus-visible {
	background-size: 100% var(--border-width-s);
	background-position: 0% 100%;     /* Hover: Anker links */
}

@media (prefers-reduced-motion: reduce) {
	.ag-footer .ag-footer__spalte-link,
	.ag-footer .ag-footer__spalte-titel-link {
		transition-duration: 1ms;
	}
}

/* ── Mobil ────────────────────────────────────────────────── */
/* Strukturell, nicht nur kosmetisch — Quelle: Breakpoint=Mobil */

@media (max-width: 767px) {

	.ag-footer {
		--ag-footer-luft-block:  var(--spacing-xxl);   /* 128 → 64 */
		/* 64 → 16. Figma fuehrt `Layout/padding/mobile`; die Variable ist dort ein
		   Alias auf `Values/spacing/m` (16) — im CSS ist --spacing-m die Entsprechung. */
		--ag-footer-luft-inline: var(--spacing-m);
		/* Quelle Mobil (2658:34994) fuehrt fuer `footer-content` und `row` je gap 48.
		   48 ist ungebunden und steht nicht auf der Leiter (xl 40 · xxl 64).
		   Entscheidung Vincent, 17.08.2026: auf die Leiter anpassen, Richtung xxl —
		   damit gilt mobil derselbe Zeilen- und Spaltenabstand wie auf Desktop und
		   die Ueberschreibung entfaellt ganz. Bewusste Abweichung von der Quelle
		   (+16 px); Rueckspielpunkt auf 0.8, damit Figma nachzieht (F-FTR-2). */
		--ag-footer-legals-gap:  var(--spacing-ml);    /* 16 → 24 (Quelle `legals` Mobil) */
	}

	.ag-footer__row {
		flex-direction: column;
		align-items: stretch;
	}

	.ag-footer__col--marke {
		flex-direction: column;
		gap: var(--spacing-l);
	}

	/* Mobil stapelt die Spalte regulaer mit gap 32 — kein space-between,
	   keine gestreckte Hoehe (Quelle `col-2` Mobil: MIN, HUG, gap 32). */
	.ag-footer__col--claim {
		justify-content: flex-start;
		align-self: auto;
		flex: 0 1 auto;
		gap: var(--spacing-l);
	}

	.ag-footer .ag-footer__trenner--nur-mobil.ag-footer__trenner--nur-mobil {
		display: block;
	}

	.ag-footer__legals-inner {
		flex-direction: column;
		align-items: stretch;
		gap: var(--spacing-m);
	}

	.ag-footer__copyright {
		text-align: left;
	}

	/* Aufbau „Sitemap" mobil — Quelle 5071:25182: Kopf untereinander (gap 32),
	   Sitemap zwei Spalten mit Umbruch (Spaltenabstand 24, Zeilenabstand 32). */
	.ag-footer--sitemap .ag-footer__kopf {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-l);
	}

	.ag-footer__sitemap {
		--ag-footer-raster-spalten: 2;
		column-gap: var(--spacing-ml);
		row-gap: var(--spacing-l);
	}
}

/* ── Einblendung ──────────────────────────────────────────── */
/* Default `aus` laut Kontrakt §10 — hier nur die Anbindung, falls
   eine Instanz sie ausdruecklich einschaltet. */

html.ag-anim-ready .ag-footer[data-ag-anim="reveal"]:not(.is-inview) {
	opacity: 0;
	transform: translateY(var(--motion-distance-reveal, 36px));
}

.ag-footer[data-ag-anim="reveal"] {
	transition:
		opacity   var(--motion-duration-s, 350ms) ease-out,
		transform var(--motion-duration-s, 350ms) ease-out;
}

@media (prefers-reduced-motion: reduce) {
	.ag-footer[data-ag-anim="reveal"] {
		opacity: 1 !important;
		transform: none !important;
		transition: none;
	}
}