/* ==========================================================================
   VISARO — Globaler Footer
   --------------------------------------------------------------------------
   Dunkel, viel Raum, klare Hierarchie. Vier Ebenen, von oben nach unten
   immer ruhiger:

     1. Abschluss — Frage und Text links, Button rechts
     2. Navigation — drei Linkspalten und der kompakte Kontakt
     3. Ruhige Zone — Wortmarke und Claim links, weiterer Kontakt rechts
     4. Rechtliches

   Die Wortmarke ist Markenanker, nicht Hauptelement. Kein Verlauf, keine
   Purple-Fläche, keine Karte.
   ========================================================================== */

.vis-footer {
	background: var(--vis-ink-950);
	color: var(--vis-white);

	--vis-text: var(--vis-white);
	--vis-text-2: var(--vis-ink-300);
	--vis-text-3: var(--vis-ink-400);
	--vis-border: var(--vis-ink-800);
	--vis-border-strong: var(--vis-ink-700);
	--vis-accent-text: var(--vis-purple-400);
}

.vis-footer__inner {
	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

/* ══════════════════════════════════════════════════════════════════════════
   1 — ABSCHLUSS
   ══════════════════════════════════════════════════════════════════════════ */

/* Der Abschluss ist ein Band, keine Spalte: Frage und Text links, der
   Button rechts auf gleicher Höhe.

   Die Abstände sind eine Stufe kleiner als in den Sektionen darüber —
   durchgehend section-s. Der Footer ist ein Abschluss, keine eigene Seite. */
.vis-footer__cta {
	display: grid;
	gap: var(--vis-space-8);
	padding-block: var(--vis-section-s);
	border-block-end: var(--vis-border-width) solid var(--vis-border);
}

@media (min-width: 1024px) {
	.vis-footer__cta {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--vis-space-16);
		align-items: center;
	}
}

.vis-footer__question {
	font-size: var(--vis-fs-display-l);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-display);
	letter-spacing: var(--vis-ls-display);
	max-inline-size: 14ch;
}

.vis-footer__lead {
	margin-block-start: var(--vis-space-5);
	max-inline-size: 46ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

.vis-footer__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-4);
	margin-block-start: var(--vis-space-8);
}

/* Ab Desktop steht der Button neben dem Text, nicht darunter. */
@media (min-width: 1024px) {
	.vis-footer__actions { margin-block-start: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   2 — NAVIGATION
   Mobil als zugängliche Aufklapper, damit keine Linkwand entsteht.
   Ab Tablet als Spalten, dauerhaft offen.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-footer__nav {
	padding-block: var(--vis-section-s);
	border-block-end: var(--vis-border-width) solid var(--vis-border);
}

.vis-footer__cols {
	display: grid;
	gap: 0;
}

@media (min-width: 768px) {
	.vis-footer__cols {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--vis-space-10) var(--vis-space-8);
	}
}

/* Tablet zwei, Desktop vier Spalten. Ein Sonderraster für den Kontakt
   braucht es nicht mehr: Die vierte Spalte trägt nur noch drei Zeilen und
   ist damit so hoch wie ihre Nachbarn. */
@media (min-width: 1024px) {
	.vis-footer__cols { grid-template-columns: repeat(4, 1fr); }
}

.vis-footer__col { min-inline-size: 0; }

/* Mobil: <details> als Aufklapper — funktioniert ohne JavaScript. */
.vis-footer__col > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-3);

	min-block-size: var(--vis-tap-target-min);
	padding-block: var(--vis-space-4);
	border-block-end: var(--vis-border-width) solid var(--vis-border);

	cursor: pointer;
	list-style: none;

	color: var(--vis-text);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.vis-footer__col > summary::-webkit-details-marker { display: none; }

.vis-footer__col > summary .vis-icon {
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
	color: var(--vis-text-3);
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-footer__col[open] > summary .vis-icon { transform: rotate(180deg); }

.vis-footer__col > summary:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-purple-400);
	outline-offset: calc(var(--vis-focus-offset) * -1);
}

.vis-footer__links {
	margin: 0;
	padding-block: var(--vis-space-3) var(--vis-space-6);
	list-style: none;
	display: grid;
	gap: var(--vis-space-1);
}

.vis-footer__link {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--vis-tap-target-min);

	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	text-decoration: none;

	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

/* Der Purple-Marker sitzt hinter der Beschriftung und ist immer vorhanden,
   nur unsichtbar. Dadurch wächst beim Hover nichts und die Zeile springt
   nicht — sichtbar wird ausschließlich die Deckkraft. Dieselbe 60°-Form
   wie im Mega-Menü: eine Interaktionssprache für die ganze Navigation. */
a.vis-footer__link::after {
	content: "";
	flex: none;

	inline-size: var(--vis-space-2);
	block-size: calc(var(--vis-space-2) / var(--vis-tan60) * 2);
	margin-inline-start: var(--vis-space-2);

	background: var(--vis-purple-400);
	clip-path: polygon(0 0, 100% 50%, 0 100%);

	opacity: 0;
	transform: translateX(calc(var(--vis-nudge) * -1));
	transition:
		opacity var(--vis-duration-ui) var(--vis-ease-out),
		transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-footer__link:hover { color: var(--vis-white); }

a.vis-footer__link:hover::after,
a.vis-footer__link:focus-visible::after {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	a.vis-footer__link::after { transform: none; }
}

.vis-footer__link:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-purple-400);
	outline-offset: var(--vis-focus-offset);
	border-radius: var(--vis-radius-xs);
}

/* Ohne Ziel: dunkler als ein echter Link, ohne Marker, ohne Reaktion. */
.vis-footer__link.is-pending { color: var(--vis-text-3); cursor: default; }
.vis-footer__link.is-pending:hover { color: var(--vis-text-3); }

/* ── Kontakt in der vierten Spalte ───────────────────────────────────────
   Drei Zeilen, dieselbe Zeilenmechanik wie die Linkspalten daneben — nur
   mit einem Icon davor, damit E-Mail, Telefon und Ort auf einen Blick
   unterscheidbar sind. */

.vis-footer__link--contact {
	gap: var(--vis-space-2);
}

.vis-footer__link--contact .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
	color: var(--vis-text-3);
	flex: none;
	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

a.vis-footer__link--contact:hover .vis-icon { color: var(--vis-purple-400); }

/* Der Ort ist eine Angabe, kein Ziel: kein Marker, keine Reaktion. */
.vis-footer__link--contact.is-static {
	color: var(--vis-text-3);
	cursor: default;
}

/* ── Weitere Kontaktangaben in der unteren Zone ──────────────────────────
   Gruppiert nach Bereich, nicht nach Kanal: Wer VISARO Textil erreichen
   will, findet Mail und Durchwahl beieinander.

   Jeder Block hat ein Label mit Icon und darunter seine Werte. Das Icon
   steht einmal je Block, nicht je Zeile — sonst wird die Zone zur
   Symbolwand. Die Werte sind echte Ziele: mailto, tel, wa.me. */

.vis-footer__contact-group {
	display: grid;
	gap: var(--vis-space-1);
}

.vis-footer__contact-label {
	display: flex;
	align-items: center;
	gap: var(--vis-space-2);
	margin: 0;

	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.vis-footer__contact-label .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
	flex: none;
}

.vis-footer__contact-value {
	display: inline-flex;
	align-items: center;
	align-self: start;
	min-block-size: var(--vis-tap-target-min);

	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	text-decoration: none;

	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

a.vis-footer__contact-value:hover { color: var(--vis-white); }

/* Derselbe Purple-Marker wie bei den Linkspalten — eine
   Interaktionssprache für den ganzen Footer. */
a.vis-footer__contact-value::after {
	content: "";
	flex: none;

	inline-size: var(--vis-space-2);
	block-size: calc(var(--vis-space-2) / var(--vis-tan60) * 2);
	margin-inline-start: var(--vis-space-2);

	background: var(--vis-purple-400);
	clip-path: polygon(0 0, 100% 50%, 0 100%);

	opacity: 0;
	transform: translateX(calc(var(--vis-nudge) * -1));
	transition:
		opacity var(--vis-duration-ui) var(--vis-ease-out),
		transform var(--vis-duration-ui) var(--vis-ease-out);
}

a.vis-footer__contact-value:hover::after,
a.vis-footer__contact-value:focus-visible::after {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	a.vis-footer__contact-value::after { transform: none; }
}

a.vis-footer__contact-value:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-purple-400);
	outline-offset: var(--vis-focus-offset);
	border-radius: var(--vis-radius-xs);
}

/* Die Anschrift ist eine Angabe, kein Tippziel — sie steht deshalb enger
   und ohne Trefferfläche. */
.vis-footer__contact-value.is-static {
	min-block-size: 0;
	padding-block: var(--vis-space-1);
}

/* Ab Tablet: Spalten statt Aufklapper. */
@media (min-width: 768px) {
	.vis-footer__col > summary {
		border-block-end: 0;
		padding-block: 0 var(--vis-space-4);
		cursor: default;
		pointer-events: none;
	}

	.vis-footer__col > summary .vis-icon { display: none; }

	.vis-footer__links { padding-block: 0; }

	.vis-footer__link { min-block-size: var(--vis-space-8); }
	.vis-footer__contact-value { min-block-size: var(--vis-space-8); }
}

/* ══════════════════════════════════════════════════════════════════════════
   3 — RUHIGE ZONE: MARKE UND WEITERER KONTAKT
   ══════════════════════════════════════════════════════════════════════════ */

/* Zwei Hälften: links die Marke, rechts die Firmenangaben, die oben die
   Spalte zu lang gemacht hätten. Ab Desktop nebeneinander, darunter
   gestapelt. */
.vis-footer__brand {
	display: grid;
	gap: var(--vis-space-10);
	padding-block: var(--vis-section-s) var(--vis-space-8);
}

/* Schon ab Tablet nebeneinander. Gestapelt wurde die Zone dort rund 180 px
   höher, ohne dass daneben etwas gestanden hätte. */
@media (min-width: 768px) {
	.vis-footer__brand {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: var(--vis-space-10);
		align-items: start;
	}
}

@media (min-width: 1024px) {
	.vis-footer__brand { gap: var(--vis-space-16); }
}

.vis-footer__brand-main { min-inline-size: 0; }

/* Die Wortmarke ist Markenanker, nicht Hauptdarsteller.

   Zwei Grenzen wirken zusammen. Der Token deckelt bei 220 px, das ergibt
   rund 40 px Höhe. Auf schmalen Geräten würde der Token allein die Marke
   im Verhältnis zu klein lassen wirken; dort greift die prozentuale Grenze
   und hält sie proportional zur Spalte. */
.vis-footer__wordmark {
	display: block;
	inline-size: 100%;
	max-inline-size: min(var(--vis-footer-wordmark-max), 50%);
	block-size: auto;
	opacity: 0.92;
}

/* Weitere Kontaktangaben, rechts neben der Marke. Zwei Blockspalten ab
   Tablet, damit aus vier Angaben keine Säule wird. */
.vis-footer__brand-contact {
	display: grid;
	gap: var(--vis-space-5);
	align-content: start;
	min-inline-size: 0;
}

@media (min-width: 768px) {
	.vis-footer__brand-contact {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vis-space-5) var(--vis-space-8);
	}
}

/* Die Anschrift ist der breiteste Block und steht immer zuletzt — sie
   bekommt beide Spalten. Sonst stünde sie in einer halben Spalte und
   umbräche, während daneben Platz frei bliebe. */
@media (min-width: 768px) {
	.vis-footer__brand-contact .vis-footer__contact-group:last-of-type {
		grid-column: 1 / -1;
	}
}

/* Der Rechtsträger-Zusatz schließt die Angaben ab und läuft dabei über
   beide Blockspalten. */
.vis-footer__brand-contact .vis-footer__entity {
	grid-column: 1 / -1;
	padding-block-start: var(--vis-space-2);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
	font-size: var(--vis-fs-caption);
}

/* Claim und erklärende Zeile unter der Wortmarke.

   Ohne eigene Fläche, ohne Karte, direkt unter dem Logo und typografisch
   klar untergeordnet: Die Wortmarke ist der Anker, der Text die
   Bildunterschrift. Die Zeile darf breiter laufen als die Wortmarke, sonst
   bräche sie nach jedem zweiten Wort um. */
.vis-footer__claim {
	margin-block: var(--vis-space-5) 0;

	color: var(--vis-white);
	font-size: var(--vis-fs-body-l);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-heading);
}

.vis-footer__brand-note {
	margin-block: var(--vis-space-2) 0;
	max-inline-size: 62ch;

	color: var(--vis-text-3);
	font-size: var(--vis-fs-body-s);
}

/* Rechtliches: mobil gestapelt und linksbündig, ab Tablet eine Zeile.
   „space-between" auf schmalen Geräten riss die drei Gruppen sonst
   unschön auseinander. */
.vis-footer__legal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--vis-space-4);

	padding-block: var(--vis-space-5) var(--vis-space-8);
	border-block-start: var(--vis-border-width) solid var(--vis-border);

	color: var(--vis-text-3);
	font-size: var(--vis-fs-caption);
}

/* Rechtszeile links: Copyright und darunter der Rechtsträger-Zusatz.
   Der Rechtsträger-Zusatz steht eine Zone höher bei den übrigen
   Firmenangaben — hier unten nur Copyright und die beiden Rechtstexte. */
.vis-footer__copyright { margin: 0; }

/* Bewusst dieselbe Farbe wie die übrigen Angaben. Der Zusatz wird durch
   seine Position leise, nicht durch einen dunkleren Grauton — ink-600 auf
   ink-950 ergibt rund 2,9:1 und wäre schlicht schlecht lesbar. */
.vis-footer__entity {
	margin: 0;
	color: var(--vis-text-3);
}

@media (min-width: 768px) {
	.vis-footer__legal {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--vis-space-4) var(--vis-space-8);
	}
}

.vis-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-2) var(--vis-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vis-footer__legal a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--vis-tap-target-min);
	color: var(--vis-text-3);
	text-decoration: none;
}

.vis-footer__legal a:hover {
	color: var(--vis-white);
	text-decoration: underline;
	text-underline-offset: var(--vis-space-1);
	text-decoration-thickness: var(--vis-border-width);
}

.vis-footer__legal-links .is-featured a {
	color: var(--vis-white);
	font-weight: var(--vis-fw-medium);
	text-decoration: underline;
	text-decoration-thickness: var(--vis-border-width-strong);
	text-underline-offset: var(--vis-space-1);
}

/* Rechtstexte, die es noch nicht gibt: sichtbar, aber eindeutig kein Link.
   ink-500 statt ink-600 — letzteres kam auf dem Footergrund auf rund 2,9:1
   und war damit kaum zu entziffern. */
.vis-footer__legal-pending {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--vis-tap-target-min);
	color: var(--vis-ink-500);
	cursor: default;
}

@media (min-width: 768px) {
	.vis-footer__legal-pending { min-block-size: 0; }
}

.vis-footer__legal a:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-purple-400);
	outline-offset: var(--vis-focus-offset);
	border-radius: var(--vis-radius-xs);
}

@media (min-width: 768px) {
	.vis-footer__legal a { min-block-size: 0; }
}

/* ── Social ───────────────────────────────────────────────────────────── */

.vis-footer__social {
	display: flex;
	gap: var(--vis-space-2);
}

.vis-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-tap-target-min);
	block-size: var(--vis-tap-target-min);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-sm);

	color: var(--vis-text-2);

	transition:
		border-color var(--vis-duration-micro) var(--vis-ease-out),
		color var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-footer__social a:hover {
	border-color: var(--vis-ink-600);
	color: var(--vis-white);
}

.vis-footer__social .vis-icon {
	inline-size: var(--vis-space-5);
	block-size: var(--vis-space-5);
}

/* ── Du bist hier ────────────────────────────────────────────────────────
   Markierung statt Link. Im dunklen Footer trägt sie Purple-400, damit sie
   sich von den ruhigen Ink-Tönen der übrigen Einträge abhebt, ohne lauter
   zu sein als der Inhalt darüber. */

.vis-footer__link.is-current {
	color: var(--vis-accent-text);
	font-weight: var(--vis-fw-medium);
	cursor: default;
}