/* ══════════════════════════════════════════════════════════════════════════
   VISARO — Shops-Übersicht (/shops/)

   Corporate-Seite, kein Shop: Hier gibt es keine Produktkacheln und keinen
   Warenkorb. Die Welten tragen ihren Akzent als Kante und als 60°-Keil —
   dieselben Akzenttokens wie die Kacheln der Startseite, aber eine eigene,
   ruhigere Form: breite Zeilen für die offenen Welten, eine Liste mit
   Status für die, die noch entstehen.

     1  Abschnitte und Köpfe
     2  Geöffnet — breite Zeilen mit Keil
     3  Hinweis
     4  In Vorbereitung — Liste mit Status
     5  Nächster Schritt — dunkles Band
     6  Touch und reduzierte Bewegung

   Kein Hexwert und keine freie Pixelzahl in dieser Datei (E20).
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 — Abschnitte und Köpfe ════════════════════════════════════════════ */

.vis-worlds {
	padding-block: var(--vis-section-m);
	background: var(--vis-bg);
}

.vis-worlds--pending { background: var(--vis-bg-subtle); }

/* Gleicher Grund hintereinander teilt sich den Abstand (Kollaps-Regel). */
.vis-worlds:not(.vis-worlds--pending) + .vis-worlds--next { padding-block-start: 0; }

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

.vis-worlds__head {
	display: grid;
	gap: var(--vis-space-5);
	margin-block-end: var(--vis-space-10);
}

@media (min-width: 1024px) {
	.vis-worlds__head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vis-space-16);
		align-items: end;
		margin-block-end: var(--vis-space-12);
	}
}

.vis-worlds__headline {
	margin: 0;
	max-inline-size: 20ch;

	font-size: var(--vis-fs-h1);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-heading);
	letter-spacing: var(--vis-ls-display);
	text-wrap: balance;
}

.vis-worlds__lead {
	margin: 0;
	max-inline-size: 54ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

/* ══ 2 — Geöffnet ════════════════════════════════════════════════════════

   Eine Zeile je Welt. Der ganze Bereich ist klickbar, über das `::after`
   des einen Links in der Überschrift — so bleibt es ein Link mit einem
   Namen, und die Überschrift bleibt eine Überschrift.

   Der Keil oben rechts ist die 60°-Kante im Kleinen: Breite `--vis-cut-sm`,
   Höhe Breite / tan 60°. Er steht innerhalb des Innenabstands und
   überdeckt nie Text.                                                    */

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

@media (min-width: 1024px) {
	.vis-worlds__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.vis-worlds__item,
.vis-worlds__soon-item {
	--vis-worlds-accent: var(--vis-accent);
}

.vis-worlds__item--feuerwehr { --vis-worlds-accent: var(--vis-world-feuerwehr); }
.vis-worlds__item--verein    { --vis-worlds-accent: var(--vis-world-verein); }
.vis-worlds__item--sport     { --vis-worlds-accent: var(--vis-world-sport); }
.vis-worlds__item--textil    { --vis-worlds-accent: var(--vis-world-textil); }

.vis-worlds__item {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"mark body"
		"go   go";
	gap: var(--vis-space-6) var(--vis-space-5);

	padding: var(--vis-space-8) var(--vis-space-6) var(--vis-space-6);
	background: var(--vis-bg);
	border: var(--vis-border-width) solid var(--vis-border);
	border-block-start: var(--vis-accent-bar) solid var(--vis-worlds-accent);

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

@media (min-width: 768px) {
	.vis-worlds__item {
		gap: var(--vis-space-8) var(--vis-space-6);
		padding: var(--vis-space-10);
	}
}

.vis-worlds__item:hover {
	border-color: var(--vis-worlds-accent);
	box-shadow: var(--vis-shadow-hover);
}

.vis-worlds__wedge {
	position: absolute;
	inset-block-start: 0;
	inset-inline-end: 0;

	inline-size: var(--vis-cut-sm);
	block-size: calc(var(--vis-cut-sm) / var(--vis-tan60));

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

.vis-worlds__mark {
	grid-area: mark;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	inline-size: var(--vis-space-12);
	block-size: var(--vis-space-12);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-sm);

	color: var(--vis-worlds-accent);
}

.vis-worlds__mark .vis-icon {
	inline-size: var(--vis-space-6);
	block-size: var(--vis-space-6);
}

@media (min-width: 768px) {
	.vis-worlds__mark {
		inline-size: var(--vis-space-16);
		block-size: var(--vis-space-16);
	}

	.vis-worlds__mark .vis-icon {
		inline-size: var(--vis-space-8);
		block-size: var(--vis-space-8);
	}
}

.vis-worlds__logo {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	padding: var(--vis-space-1);
	object-fit: contain;
}

.vis-worlds__body {
	grid-area: body;
	min-inline-size: 0;
}

.vis-worlds__title {
	margin: 0;
	font-size: var(--vis-fs-h3);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-heading);
	letter-spacing: var(--vis-ls-heading);
}

.vis-worlds__link {
	color: inherit;
	text-decoration: none;
}

.vis-worlds__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.vis-worlds__link:focus-visible { outline: none; }

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

.vis-worlds__text {
	margin: var(--vis-space-3) 0 0;
	max-inline-size: 52ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body);
	line-height: var(--vis-lh-body);
}

.vis-worlds__go {
	grid-area: go;
	display: flex;
	align-items: center;
	gap: var(--vis-space-2);

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

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

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

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

/* ══ 3 — Hinweis ═════════════════════════════════════════════════════════ */

.vis-worlds__note {
	display: flex;
	align-items: flex-start;
	gap: var(--vis-space-3);

	margin: var(--vis-space-8) 0 0;
	max-inline-size: 72ch;

	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-body);
}

.vis-worlds__note-icon {
	flex: none;
	display: inline-flex;
	color: var(--vis-accent-text);
}

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

/* ══ 4 — In Vorbereitung ═════════════════════════════════════════════════

   Bewusst leiser als die offenen Welten: gestrichelte Marke, gedämpftes
   Icon, kein Hover, kein Link. Der Status steht als Text im Badge — nie
   nur als Farbe.                                                         */

.vis-worlds__soon {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-worlds__soon-item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"mark body"
		".    status";
	gap: var(--vis-space-3) var(--vis-space-5);

	padding-block: var(--vis-space-6);
	border-block-end: var(--vis-border-width) solid var(--vis-border);
}

@media (min-width: 768px) {
	.vis-worlds__soon-item {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "mark body status";
		align-items: center;
		gap: var(--vis-space-8);
	}
}

.vis-worlds__soon-mark {
	grid-area: mark;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;

	inline-size: var(--vis-space-12);
	block-size: var(--vis-space-12);
	border: var(--vis-border-width) dashed var(--vis-border-strong);
	border-radius: var(--vis-radius-sm);

	color: var(--vis-text-3);
}

.vis-worlds__soon-mark .vis-icon {
	inline-size: var(--vis-space-6);
	block-size: var(--vis-space-6);
}

.vis-worlds__soon-body {
	grid-area: body;
	min-inline-size: 0;
}

.vis-worlds__soon-title {
	margin: 0;
	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-worlds__soon-text {
	margin: var(--vis-space-1) 0 0;
	max-inline-size: 60ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

.vis-worlds__status {
	grid-area: status;
	justify-self: start;
}

/* ══ 5 — Nächster Schritt ════════════════════════════════════════════════

   Dasselbe dunkle Band mit 60°-Schnitt wie unter den Kacheln der
   Startseite (`vis-cut`), mit zwei Wegen: der Vereinsshop als Knopf, der
   eigene Shop als Aktionslink.                                           */

.vis-worlds--next { padding-block: var(--vis-section-m); }

.vis-worlds__next {
	display: grid;
	gap: var(--vis-space-8);

	padding: var(--vis-space-10) var(--vis-space-6);

	--vis-cut-size: var(--vis-cut);
	background: var(--vis-ink-950);
}

@media (min-width: 768px) {
	.vis-worlds__next {
		gap: var(--vis-space-10);
		align-items: center;
		padding: var(--vis-space-12);
	}
}

@media (min-width: 1024px) {
	.vis-worlds__next { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.vis-worlds__next-actions { min-inline-size: 0; }

.vis-worlds__next .vis-btn {
	max-inline-size: 100%;
	white-space: normal;
	text-align: start;
}

.vis-worlds__next-title {
	display: flex;
	align-items: center;
	gap: var(--vis-space-3);
	margin: 0;

	color: var(--vis-text);
	font-size: var(--vis-fs-h3);
	font-weight: var(--vis-fw-bold);
	line-height: var(--vis-lh-heading);
	letter-spacing: var(--vis-ls-heading);
}

.vis-worlds__next-lead {
	margin: var(--vis-space-3) 0 0;
	max-inline-size: 56ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
}

.vis-worlds__next-actions {
	display: grid;
	justify-items: start;
	gap: var(--vis-space-5);
}

.vis-worlds__more {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vis-space-1) var(--vis-space-3);
	margin: 0;

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

/* ══ 6 — Touch und reduzierte Bewegung ═══════════════════════════════════ */

@media (hover: none) {
	.vis-worlds__item:hover { box-shadow: none; }
	.vis-worlds__item:hover .vis-worlds__go .vis-icon { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.vis-worlds__item,
	.vis-worlds__go .vis-icon {
		transition: none;
	}

	.vis-worlds__item:hover .vis-worlds__go .vis-icon { transform: none; }
}

/* Drei geöffnete Welten bilden auf breiten Bildschirmen eine vollständige Reihe. */
@media (min-width: 1280px) {
	.vis-worlds__list:has(> :nth-child(3):last-child) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}