/* ==========================================================================
   VISARO — Mega-Menüs
   --------------------------------------------------------------------------
   Zwei Panels: „Leistungen" erklärt, „Shops" verkauft.

   Haltung: Teil der Website, kein Browser-Popup. Weiß, Haarlinien, klare
   Typografie, großzügiges Raster. Kein schwerer Schatten, kein Glas, kein
   Mega-Radius, keine schwebenden Karten.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   PANEL
   ══════════════════════════════════════════════════════════════════════════ */

.vis-mega {
	position: absolute;
	inset-inline: 0;
	inset-block-start: 100%;
	z-index: var(--vis-z-header);

	background: var(--vis-bg);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
	box-shadow: var(--vis-shadow-menu);

	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	pointer-events: none;

	transition:
		opacity var(--vis-duration-micro) var(--vis-ease-out),
		transform var(--vis-duration-ui) var(--vis-ease-out),
		visibility 0s linear var(--vis-duration-ui);
}

.vis-mega.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
	transition-delay: 0s;
}

.vis-mega__inner {
	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
	padding-block: var(--vis-space-12) var(--vis-space-10);

	max-block-size: min(560px, calc(100svh - var(--vis-header-height) - var(--vis-space-8)));
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Spalten fahren beim Öffnen leicht nach — gestaffelt, aber kurz.
   Beim Schließen ohne Staffelung, sonst wirkt es zäh. */
.vis-mega.is-open .vis-mega__col {
	animation: vis-mega-in var(--vis-duration-content) var(--vis-ease-out) both;
}

.vis-mega.is-open .vis-mega__col:nth-child(2) { animation-delay: 40ms; }
.vis-mega.is-open .vis-mega__col:nth-child(3) { animation-delay: 80ms; }
.vis-mega.is-open .vis-mega__col:nth-child(4) { animation-delay: 120ms; }
.vis-mega.is-open .vis-mega__col:nth-child(5) { animation-delay: 160ms; }
.vis-mega.is-open .vis-mega__col:nth-child(6) { animation-delay: 200ms; }

@keyframes vis-mega-in {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vis-mega.is-open .vis-mega__col { animation: none; }
	.vis-mega { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   LEISTUNGEN
   ══════════════════════════════════════════════════════════════════════════ */

.vis-mega__intro {
	max-inline-size: 48ch;
	margin-block-end: var(--vis-space-10);
}

.vis-mega__title {
	font-size: var(--vis-fs-h3);
	letter-spacing: var(--vis-ls-heading);
}

.vis-mega__lead {
	margin-block-start: var(--vis-space-2);
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

.vis-mega__grid {
	display: grid;
	gap: var(--vis-space-8) var(--vis-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

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

/* Gruppentitel — Icon, Label, darunter eine Haarlinie.

   Icon (space-4) plus gap (space-2) ergeben genau space-6. Das ist
   dieselbe Einrückung, die der Link darunter für seinen Marker reserviert:
   Beschriftung steht unter Beschriftung, ohne dass irgendwo eine Zahl
   doppelt gepflegt werden müsste. */
.vis-mega__group {
	display: flex;
	align-items: center;
	gap: var(--vis-space-2);

	padding-block-end: var(--vis-space-2);
	border-block-end: var(--vis-border-width) solid var(--vis-border);
	margin-block-end: var(--vis-space-2);

	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;
	text-decoration: none;
}

.vis-mega__group .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-mega__group {
	transition: color var(--vis-duration-ui) var(--vis-ease-out);
}

/* Verlinkte Gruppentitel bekommen beim Hover eine Unterstreichung.
   Der Farbwechsel allein reicht bei Versalien in Mono nicht aus. */
a.vis-mega__group:hover {
	color: var(--vis-accent-text);
	text-decoration: underline;
	text-underline-offset: var(--vis-space-1);
	text-decoration-thickness: var(--vis-border-width);
}

a.vis-mega__group:hover .vis-icon { color: var(--vis-accent-text); }

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

.vis-mega__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Die Signatur-Interaktion der Navigation: Beim Hover fährt der 60°-Marker
   von links ein, gleichzeitig rückt der Text ein Stück nach rechts.

   Zwei Dinge sind hier bewusst gelöst:

   1. Die ganze Zeile ist das Ziel, nicht die Buchstaben. Der Link ist ein
      Block über die volle Spaltenbreite und bekommt beim Hover eine ruhige
      Fläche — dadurch ist überhaupt erst sichtbar, wie groß die Trefferzone
      ist.
   2. Bewegt wird nur die Beschriftung, nie der Link selbst. Verschöbe sich
      der Link, verließe der Zeiger unter Umständen sein eigenes Ziel und
      der Zustand flackerte.

   Der Platz für den Marker ist dauerhaft reserviert (space-6). Dadurch
   springt beim Hover nichts, und die Beschriftung steht exakt unter dem
   Gruppentitel, dessen Icon dieselbe Breite einnimmt. */
.vis-mega__link {
	position: relative;
	display: flex;
	align-items: center;
	inline-size: 100%;

	min-block-size: var(--vis-mega-row);
	padding-block: var(--vis-space-2);
	padding-inline: var(--vis-space-6) var(--vis-space-2);
	border-radius: var(--vis-radius-sm);

	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),
		background-color var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-mega__link-label {
	display: block;
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-mega__link::before {
	content: "";
	position: absolute;
	inset-inline-start: var(--vis-space-2);

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

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

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

/* Hover: Text wird Ink statt Secondary — das ist der eigentliche
   Lesbarkeitssprung, den die Abnahme eingefordert hat. */
.vis-mega__link:hover,
.vis-mega__link:focus-visible {
	background: var(--vis-bg-subtle);
	color: var(--vis-ink-950);
}

.vis-mega__link:hover .vis-mega__link-label,
.vis-mega__link:focus-visible .vis-mega__link-label {
	transform: translateX(var(--vis-space-1));
}

.vis-mega__link:hover::before,
.vis-mega__link:focus-visible::before {
	opacity: 1;
	transform: translateX(0);
}

.vis-mega__link:active { background: var(--vis-ink-100); }

.vis-mega__link:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: calc(var(--vis-focus-offset) * -1);
}

/* Ohne Ziel: sichtbar, strukturiert — und ohne jede Reaktion.
   Der Eintrag darf nicht so tun, als ließe er sich anklicken. */
.vis-mega__link.is-pending {
	color: var(--vis-text-3);
	cursor: default;
}

.vis-mega__link.is-pending:hover {
	background: transparent;
	color: var(--vis-text-3);
}

.vis-mega__link.is-pending:hover .vis-mega__link-label { transform: none; }
.vis-mega__link.is-pending:hover::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.vis-mega__link:hover .vis-mega__link-label,
	.vis-mega__link:focus-visible .vis-mega__link-label { transform: none; }
	.vis-mega__link::before { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FUSSZEILE — der VISARO-typische Ausweg aus der Kategorienlogik
   ══════════════════════════════════════════════════════════════════════════ */

.vis-mega__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-4) var(--vis-space-8);

	margin-block-start: var(--vis-space-10);
	padding-block-start: var(--vis-space-6);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-mega__foot-text { max-inline-size: 52ch; }

/* Dieselbe 60°-Signatur wie beim Link-Marker, hier als ruhiges Zeichen
   ohne Bewegung: Das ist ein Angebot, keine Kategorie. */
.vis-mega__foot-title {
	display: flex;
	align-items: center;
	gap: var(--vis-space-2);

	font-size: var(--vis-fs-body-l);
	font-weight: var(--vis-fw-medium);
	color: var(--vis-text);
}

.vis-mega__foot-title::before {
	content: "";
	flex: none;

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

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

/* Der Pfeil rückt beim Hover nach — der sekundäre Button soll sich
   genauso lebendig anfühlen wie ein Menülink. */
.vis-mega__foot .vis-btn .vis-icon {
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-mega__foot .vis-btn:hover .vis-icon {
	transform: translateX(var(--vis-nudge));
}

.vis-mega__foot-sub {
	margin-block-start: var(--vis-space-1);
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

/* ══════════════════════════════════════════════════════════════════════════
   SHOPS — visueller als Leistungen, hier wird verkauft
   ══════════════════════════════════════════════════════════════════════════ */

.vis-mega__shops {
	display: grid;
	gap: var(--vis-space-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

@media (min-width: 1280px) {
	.vis-mega__shops {
		grid-template-columns: repeat(4, 1fr) minmax(240px, 1.15fr);
	}
}

.vis-shop-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--vis-space-3);

	padding: var(--vis-space-5);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-md);

	color: inherit;
	text-decoration: none;

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

/* Wie im Leistungen-Menü: die Fläche antwortet, nicht nur die Kante.
   Die Kontur bekommt zusätzlich die Farbe der Shopwelt — dadurch ist beim
   Überfahren sofort klar, in welcher Welt man landet. */
.vis-shop-tile:hover {
	background: var(--vis-bg-subtle);
	border-color: var(--vis-shop-accent, var(--vis-accent));
}

.vis-shop-tile:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
}

.vis-shop-tile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	inline-size: var(--vis-space-10);
	block-size: var(--vis-space-10);
	border-radius: var(--vis-radius-sm);
	background: var(--vis-bg-surface);
	color: var(--vis-shop-accent, var(--vis-accent));
}

.vis-shop-tile__title {
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-heading);
	letter-spacing: var(--vis-ls-heading);
}

.vis-shop-tile__text {
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	margin: 0;
}

.vis-shop-tile__more {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);
	margin-block-start: auto;
	padding-block-start: var(--vis-space-3);

	color: var(--vis-text);
	font-size: var(--vis-fs-caption);
	font-weight: var(--vis-fw-medium);
}

.vis-shop-tile__more .vis-icon {
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
	transition: transform var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-shop-tile:hover .vis-shop-tile__more .vis-icon { transform: translateX(var(--vis-nudge)); }

/* Akzentkante der Shopwelt. */
.vis-shop-tile__accent {
	position: absolute;
	inset-block-end: 0;
	inset-inline: var(--vis-space-5);
	block-size: var(--vis-accent-bar);
	border-radius: var(--vis-radius-full);
	background: var(--vis-shop-accent, var(--vis-accent));
	transition: inset-inline var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-shop-tile:hover .vis-shop-tile__accent { inset-inline: var(--vis-space-3); }

/* „In Vorbereitung" reagiert auf nichts. Sonst verspricht die Kachel ein
   Ziel, das es noch nicht gibt. */
.vis-shop-tile.is-pending { cursor: default; }

.vis-shop-tile.is-pending:hover {
	background: transparent;
	border-color: var(--vis-border);
}

.vis-shop-tile.is-pending .vis-shop-tile__more { color: var(--vis-text-3); }
.vis-shop-tile.is-pending:hover .vis-shop-tile__more .vis-icon { transform: none; }
.vis-shop-tile.is-pending:hover .vis-shop-tile__accent { inset-inline: var(--vis-space-5); }

/* ── Vereinsshop-CTA ─────────────────────────────────────────────────────
   Strategisch wichtig laut Briefing, deshalb dauerhaft im Menü — aber
   ruhig gehalten, keine Werbefläche. */

.vis-shop-cta {
	display: flex;
	flex-direction: column;
	gap: var(--vis-space-3);

	padding: var(--vis-space-6);
	border-radius: var(--vis-radius-md);
	background: var(--vis-ink-950);
	color: var(--vis-white);

	--vis-text: var(--vis-white);
	--vis-text-2: var(--vis-ink-300);
	--vis-border-strong: var(--vis-ink-600);
}

.vis-shop-cta__title {
	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-heading);
}

.vis-shop-cta__text {
	margin: 0;
	color: var(--vis-ink-300);
	font-size: var(--vis-fs-body-s);
}

.vis-shop-cta .vis-btn { margin-block-start: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   ÜBERLAGERUNG
   Legt sich unter das Panel über den Seiteninhalt. Sehr dezent — das Panel
   ist Teil der Seite, kein Dialog.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-mega-scrim {
	position: fixed;
	inset: 0;
	z-index: calc(var(--vis-z-header) - 1);

	background: color-mix(in srgb, var(--vis-ink-950) 18%, transparent);
	background: rgba(23, 33, 58, 0.18);

	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--vis-duration-ui) var(--vis-ease-out),
		visibility 0s linear var(--vis-duration-ui);
}

.vis-mega-scrim.is-open {
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
}

/* Mega-Menüs gibt es nur auf dem Desktop. Darunter übernimmt der Drawer. */
@media (max-width: 1099.98px) {
	.vis-mega,
	.vis-mega-scrim { display: none; }
}

/* Der Ausweg aus der Kategorienfalle. Er steht bewusst nach einer
   Trennlinie und in Purple: Er ist kein weiterer Unterpunkt, sondern der
   Hinweis, dass die Liste darüber eine Auswahl ist. */
.vis-mega__more {
	/* Block statt Flex: Bei einem umbrechenden Label soll der Pfeil dem
	   letzten Wort folgen und nicht senkrecht in der Mitte hängen. */
	display: block;

	margin-block-start: var(--vis-space-3);
	padding-block-start: var(--vis-space-3);
	padding-inline-start: var(--vis-space-6);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
	inline-size: 100%;

	color: var(--vis-accent-text);
	font-size: var(--vis-fs-caption);
	font-weight: var(--vis-fw-medium);
	text-decoration: none;

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

.vis-mega__more .vis-icon {
	display: inline-block;
	vertical-align: -0.15em;
	margin-inline-start: var(--vis-space-2);
	inline-size: var(--vis-space-4);
	block-size: var(--vis-space-4);
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

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

.vis-mega__more:hover .vis-icon { transform: translateX(var(--vis-nudge)); }

.vis-mega__more:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: var(--vis-focus-offset);
	border-radius: var(--vis-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
	.vis-mega__more .vis-icon,
	.vis-mega__more { transition: none; }
	.vis-mega__more:hover .vis-icon { transform: none; }
}

/* ── Du bist hier ────────────────────────────────────────────────────────
   Auf der Seite, auf die ein Eintrag zeigt, wird er zur Markierung statt
   zum Link. Das ist bewusst kein „ausgegrauter" Zustand wie is-pending:
   Der Eintrag ist nicht unfertig, er ist erreicht. Deshalb Purple und
   voller Kontrast, nur ohne Klickziel. */

.vis-mega__group.is-current {
	color: var(--vis-accent-text);
	cursor: default;
}

.vis-mega__group.is-current .vis-icon { color: var(--vis-accent-text); }

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

/* Der 60°-Marker steht hier dauerhaft, statt beim Hover einzufahren. */
.vis-mega__link.is-current::before {
	opacity: 1;
	transform: none;
}

.vis-mega__link.is-current:hover { background: transparent; }
.vis-mega__link.is-current:hover .vis-mega__link-label { transform: none; }

/* ══════════════════════════════════════════════════════════════════════════
   LEISTUNGEN — KOMPAKT (07.10.2026)
   Sechs Spalten, je Bereich ein Kopf-Link und seine Einstiege. Keine
   Bilder, keine Beschreibungen: Das Menü ist schnelle Navigation.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-mega--services .vis-mega__inner {
	padding-block: var(--vis-space-8) var(--vis-space-6);
}

.vis-mega__cols {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--vis-space-8) var(--vis-space-8);
}

@media (min-width: 1280px) {
	.vis-mega__cols { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--vis-space-6); }
}

/* Gruppenkopf: Bereich als klarer Link, Icon in Purple. */
.vis-mega__head {
	display: flex;
	align-items: center;
	gap: var(--vis-space-2);
	margin: 0 0 var(--vis-space-3);
	padding-block-end: var(--vis-space-3);
	border-block-end: var(--vis-border-width) solid var(--vis-border);
	color: var(--vis-text);
	font-size: var(--vis-fs-body);
	font-weight: var(--vis-fw-bold);
	letter-spacing: var(--vis-ls-heading);
	text-decoration: none;
	transition: color var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-mega__head .vis-icon {
	flex: none;
	inline-size: 18px;
	block-size: 18px;
	color: var(--vis-accent);
}

a.vis-mega__head:hover { color: var(--vis-accent-text); }

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

.vis-mega__head.is-current { color: var(--vis-accent-text); }

/* Einstiege: ruhige Textlinks, ganze Zeile klickbar, kein Einzug. */
.vis-mega--services .vis-mega__link {
	min-block-size: 34px;
	padding: var(--vis-space-1) var(--vis-space-2);
	margin-inline: calc(var(--vis-space-2) * -1);
	inline-size: calc(100% + var(--vis-space-4));
	font-size: var(--vis-fs-body-s);
}

.vis-mega--services .vis-mega__link::before { display: none; }

.vis-mega--services .vis-mega__link:hover,
.vis-mega--services .vis-mega__link:focus-visible {
	background: var(--vis-bg-subtle);
	color: var(--vis-ink-950);
	text-decoration: underline;
	text-decoration-color: var(--vis-accent);
	text-underline-offset: 0.25em;
}

.vis-mega--services .vis-mega__more {
	margin-block-start: var(--vis-space-2);
	padding: var(--vis-space-2) 0 0;
	border: 0;
	font-size: var(--vis-fs-caption);
}

/* Fuß: eine Zeile statt Titel plus Absatz plus Knopf. */
.vis-mega--services .vis-mega__foot {
	justify-content: flex-start;
	gap: var(--vis-space-4);
	margin-block-start: var(--vis-space-6);
	padding-block-start: var(--vis-space-4);
}

.vis-mega--services .vis-mega__foot-title { font-size: var(--vis-fs-body-s); }

.vis-mega__foot-link {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);
	color: var(--vis-accent-text);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-bold);
	text-decoration: none;
}

.vis-mega__foot-link .vis-icon { inline-size: 16px; block-size: 16px; transition: transform var(--vis-duration-micro) var(--vis-ease-out); }
.vis-mega__foot-link:hover .vis-icon { transform: translateX(var(--vis-nudge)); }
.vis-mega__foot-link:focus-visible { outline: var(--vis-focus-width) solid var(--vis-accent); outline-offset: var(--vis-focus-offset); border-radius: var(--vis-radius-xs); }

/* Panelwechsel Leistungen ↔ Shops: Das alte Panel blendet aus, während
   das neue einblendet — beide liegen an derselben Stelle. Ohne diesen
   Übergang sprang der Inhalt hart um. */
.vis-mega.is-leaving {
	visibility: visible;
	transition:
		opacity var(--vis-duration-micro) var(--vis-ease-out),
		visibility 0s linear var(--vis-duration-micro);
}


/* Gleiche Kopfhöhe in allen Spalten: Ein umbrechender Bereichsname
   („Content & Sichtbarkeit") verschiebt sonst seine Liste nach unten. */
@media (min-width: 1280px) {
	.vis-mega__head { min-block-size: calc(2lh + var(--vis-space-3)); align-items: flex-end; }
	.vis-mega__head .vis-icon { align-self: flex-end; margin-block-end: 0.2em; }
}