/* ==========================================================================
   VISARO — Komponenten: Steuerelemente, Links, Icons, Badges, Formulare
   --------------------------------------------------------------------------
   Alle Werte kommen aus tokens.css. Kein Hexwert, keine Pixelzahl hier.

   Haltung: ruhig, editorial, präzise. Purple ist Akzent, nicht Fläche.
   Keine Glows, kein Glassmorphism, keine überflüssigen Schatten,
   keine übertriebenen Rundungen.
   ========================================================================== */

/* ══════════════════════════════════════════════════════════════════════════
   BUTTONS
   Vier Varianten, drei Größen. Die Zustände sind vollständig: Ruhe, Hover,
   Fokus, Aktiv, Deaktiviert.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vis-space-2);

	min-height: var(--vis-control-height);
	min-width: var(--vis-tap-target-min);
	padding-inline: var(--vis-space-6);

	border: var(--vis-border-width) solid transparent;
	border-radius: var(--vis-radius-sm);

	font-family: var(--vis-font-sans);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	line-height: 1;
	letter-spacing: 0;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;

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

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

/* Echt deaktiviert: gedämpfte Fläche statt Transparenz. Transparenz macht
   den Text unlesbar und lässt jeden Button daneben blass wirken. */
.vis-btn:disabled {
	cursor: not-allowed;
	background: var(--vis-ink-200);
	border-color: transparent;
	color: var(--vis-text-disabled);
}

.vis-btn:disabled:hover {
	background: var(--vis-ink-200);
	color: var(--vis-text-disabled);
}

/* „Ziel folgt" ist NICHT deaktiviert.
   Ein CTA, dessen Zielseite noch entsteht, behält sein volles Aussehen
   samt Hover und Fokus — sonst lässt sich das Design nicht beurteilen und
   der wichtigste Button der Seite wirkt kaputt. Assistive Technik erfährt
   über aria-disabled, dass er noch nicht aktiv ist. */
.vis-btn[aria-disabled="true"] {
	cursor: default;
}

/* Icons im Button folgen der Schriftgröße und rutschen nie aus der Reihe. */
.vis-btn .vis-icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

/* ── Größen ──────────────────────────────────────────────────────────── */

.vis-btn--sm {
	min-height: var(--vis-control-height-sm);
	padding-inline: var(--vis-space-4);
	font-size: var(--vis-fs-caption);
}

.vis-btn--lg {
	min-height: var(--vis-control-height-lg);
	padding-inline: var(--vis-space-8);
	font-size: var(--vis-fs-body);
}

.vis-btn--block {
	display: flex;
	width: 100%;
}

/* ── Primary: der eine Purple-Button ─────────────────────────────────── */

.vis-btn--primary {
	background: var(--vis-accent-fill);
	color: var(--vis-white);
}

.vis-btn--primary:hover:not(:disabled) {
	background: var(--vis-purple-700);
	color: var(--vis-white);
}

.vis-btn--primary:active:not(:disabled) {
	background: var(--vis-purple-900);
}

/* ── Dark: der ruhige Standard für die Corporate-Seite ───────────────── */

.vis-btn--dark {
	background: var(--vis-ink-950);
	color: var(--vis-white);
}

.vis-btn--dark:hover:not(:disabled) {
	background: var(--vis-ink-800);
	color: var(--vis-white);
}

.vis-btn--dark:active:not(:disabled) {
	background: var(--vis-ink-700);
}

/* ── Outline: sekundär, gleichwertig in der Fläche ───────────────────── */

.vis-btn--outline {
	background: transparent;
	border-color: var(--vis-border-strong);
	color: var(--vis-text);
}

/* Hover kehrt den Button um. Nur die Rahmenfarbe zu wechseln war zu wenig:
   Auf einer weißen Fläche sieht man den Unterschied zwischen zwei Grautönen
   im Rahmen praktisch nicht, und der sekundäre Button wirkte deshalb tot. */
.vis-btn--outline:hover:not(:disabled) {
	background: var(--vis-ink-950);
	border-color: var(--vis-ink-950);
	color: var(--vis-white);
}

.vis-btn--outline:active:not(:disabled) {
	background: var(--vis-ink-800);
	border-color: var(--vis-ink-800);
	color: var(--vis-white);
}

/* Auf dunklem Grund kehrt sich die Kontur um. */
.vis-on-dark .vis-btn--outline {
	border-color: var(--vis-ink-600);
	color: var(--vis-white);
}

.vis-on-dark .vis-btn--outline:hover:not(:disabled) {
	background: var(--vis-white);
	border-color: var(--vis-white);
	color: var(--vis-ink-950);
}

.vis-on-dark .vis-btn--outline:active:not(:disabled) {
	background: var(--vis-ink-200);
	border-color: var(--vis-ink-200);
	color: var(--vis-ink-950);
}

/* ── Ghost: für dichte Bereiche wie Filterleisten ────────────────────── */

.vis-btn--ghost {
	background: transparent;
	color: var(--vis-text-2);
	padding-inline: var(--vis-space-4);
}

.vis-btn--ghost:hover:not(:disabled) {
	background: var(--vis-bg-surface);
	color: var(--vis-text);
}

/* ── Icon-Button: quadratisch, Beschriftung nur für Screenreader ─────── */

.vis-btn--icon {
	padding: 0;
	width: var(--vis-control-height);
	height: var(--vis-control-height);
	min-height: 0;
}

.vis-btn--icon.vis-btn--sm {
	width: var(--vis-control-height-sm);
	height: var(--vis-control-height-sm);
}

.vis-btn--icon.vis-btn--lg {
	width: var(--vis-control-height-lg);
	height: var(--vis-control-height-lg);
}

.vis-btn--icon .vis-icon {
	width: var(--vis-space-5);
	height: var(--vis-space-5);
}

/* ══════════════════════════════════════════════════════════════════════════
   LINKS
   Nicht jeder Link ist lila und unterstrichen. Drei klar getrennte Rollen.
   ══════════════════════════════════════════════════════════════════════════ */

/* Fließtextlink: unterstrichen, weil er im Satz erkennbar sein muss. */
.vis-link {
	color: var(--vis-accent-text);
	text-decoration: underline;
	text-decoration-thickness: var(--vis-border-width);
	text-underline-offset: 0.2em;
	text-decoration-color: currentColor;
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	transition:
		color var(--vis-duration-micro) var(--vis-ease-out),
		text-decoration-color var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-link:hover {
	color: var(--vis-text);
	text-decoration-color: currentColor;
}

/* Stiller Link: in Listen und Karten, wo Unterstreichung nur stört. */
.vis-link--quiet {
	color: inherit;
	text-decoration: none;
}

.vis-link--quiet:hover {
	color: var(--vis-accent-text);
}

/* Aktionslink mit Pfeil: der Standard für „weiter zu …". */
.vis-link--action {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	color: var(--vis-text);
	font-weight: var(--vis-fw-medium);
	text-decoration: none;
}

.vis-link--action .vis-icon {
	width: 1.1em;
	height: 1.1em;
	transition: transform var(--vis-duration-micro) var(--vis-ease-out);
}

.vis-link--action:hover {
	color: var(--vis-accent-text);
}

/* Der Pfeil rückt beim Hover leicht nach — die einzige Bewegung am Link. */
.vis-link--action:hover .vis-icon {
	transform: translateX(var(--vis-nudge));
}

/* Nur bei echtem Zeigegerät. Auf Touch gibt es keinen Hover-Zustand. */
@media (hover: none) {
	.vis-link--action:hover .vis-icon { transform: none; }
}

/* Unterstrichener Link, der die Unterstreichung erst beim Hover zeigt.
   Für Navigation und Footer. */
.vis-link--reveal {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 var(--vis-border-width);
	transition: background-size var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-link--reveal:hover,
.vis-link--reveal:focus-visible {
	background-size: 100% var(--vis-border-width);
}

/* ══════════════════════════════════════════════════════════════════════════
   ICONS
   Eigenes, kleines Set im Stil von Lucide: 24er-Raster, Strichstärke 2,
   runde Enden und Ecken. Ausgegeben wird inline über visaro_icon().
   Keine Icon-Library als Abhängigkeit.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-icon {
	display: inline-block;
	width: var(--vis-space-6);
	height: var(--vis-space-6);
	flex: none;
	vertical-align: middle;

	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.vis-icon--sm { width: var(--vis-space-4); height: var(--vis-space-4); }
.vis-icon--lg { width: var(--vis-space-8); height: var(--vis-space-8); }

/* Icon neben Text auf der Grundlinie ausrichten. */
.vis-icon-text {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);
}

/* ══════════════════════════════════════════════════════════════════════════
   BADGES, LABELS, STATUS
   Tragen später Corporate, Shop und My Visaro gleichermaßen.
   Status wird nie allein über Farbe transportiert — immer mit Text.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-1);

	padding: var(--vis-space-1) var(--vis-space-3);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-full);

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

	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-weight: var(--vis-fw-medium);
	line-height: 1.4;
	white-space: nowrap;
}

.vis-badge .vis-icon {
	width: 1em;
	height: 1em;
}

/* Kategorie: eckig statt rund, damit sie sich vom Status unterscheidet. */
.vis-badge--category {
	border-radius: var(--vis-radius-xs);
	border-color: var(--vis-border-strong);
	color: var(--vis-text);
	text-transform: uppercase;
	letter-spacing: var(--vis-ls-label);
}

.vis-badge--accent {
	border-color: transparent;
	background: var(--vis-purple-50);
	color: var(--vis-purple-700);
}

.vis-badge--solid {
	border-color: transparent;
	background: var(--vis-ink-950);
	color: var(--vis-white);
}

/* Statusfarben. Der Punkt ist Zusatz, nicht Ersatz für den Text. */
.vis-badge--ok    { border-color: transparent; background: var(--vis-ok-bg);   color: var(--vis-ok-text); }
.vis-badge--warn  { border-color: transparent; background: var(--vis-warn-bg); color: var(--vis-warn-text); }
.vis-badge--err   { border-color: transparent; background: var(--vis-err-bg);  color: var(--vis-err-text); }
.vis-badge--info  { border-color: transparent; background: var(--vis-info-bg); color: var(--vis-info-text); }

.vis-badge__dot {
	width: var(--vis-space-2);
	height: var(--vis-space-2);
	border-radius: var(--vis-radius-full);
	background: currentColor;
	flex: none;
}

/* Eyebrow: die Mono-Zeile über einer Überschrift. */
.vis-eyebrow {
	display: block;
	margin-block-end: var(--vis-space-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;
	color: var(--vis-text-3);
}

/* ══════════════════════════════════════════════════════════════════════════
   FORMULARE
   Formulare sind bei VISARO das Produkt — die Anfrage ist der Kernweg.
   Deshalb großzügig: 52 px Feldhöhe, klare Labels, sichtbare Zustände.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-field {
	display: flex;
	flex-direction: column;
	gap: var(--vis-space-2);
}

.vis-field + .vis-field { margin-block-start: var(--vis-space-6); }

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

.vis-label__optional {
	margin-inline-start: var(--vis-space-2);
	font-weight: var(--vis-fw-regular);
	color: var(--vis-text-3);
}

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

/* ── Eingabefelder ───────────────────────────────────────────────────── */

.vis-input,
.vis-textarea,
.vis-select {
	width: 100%;
	min-height: var(--vis-input-height);
	padding: var(--vis-space-3) var(--vis-space-4);

	border: var(--vis-border-width) solid var(--vis-border-strong);
	border-radius: var(--vis-radius-sm);

	background: var(--vis-bg);
	color: var(--vis-text);

	font-family: var(--vis-font-sans);
	font-size: var(--vis-fs-body);
	line-height: 1.4;

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

.vis-input::placeholder,
.vis-textarea::placeholder {
	color: var(--vis-text-disabled);
}

.vis-input:hover:not(:disabled),
.vis-textarea:hover:not(:disabled),
.vis-select:hover:not(:disabled) {
	border-color: var(--vis-ink-500);
}

.vis-input:focus-visible,
.vis-textarea:focus-visible,
.vis-select:focus-visible {
	outline: var(--vis-focus-width) solid var(--vis-accent);
	outline-offset: 0;
	border-color: var(--vis-accent);
}

.vis-input:disabled,
.vis-textarea:disabled,
.vis-select:disabled {
	background: var(--vis-bg-surface);
	color: var(--vis-text-disabled);
	cursor: not-allowed;
}

.vis-textarea {
	min-height: calc(var(--vis-input-height) * 2.5);
	resize: vertical;
}

/* Select bekommt einen eigenen Pfeil, weil der native je Plattform anders
   aussieht. Der Pfeil ist als Hintergrundbild eingebettet, damit kein
   zusätzliches Element nötig ist. */
.vis-select {
	appearance: none;
	padding-inline-end: var(--vis-space-10);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B4B4B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--vis-space-4) center;
	background-size: var(--vis-space-5);
}

/* ── Zustände ────────────────────────────────────────────────────────── */

.vis-field--error .vis-input,
.vis-field--error .vis-textarea,
.vis-field--error .vis-select {
	border-color: var(--vis-err);
	background: var(--vis-err-bg);
}

.vis-field--success .vis-input,
.vis-field--success .vis-textarea,
.vis-field--success .vis-select {
	border-color: var(--vis-ok);
}

/* Meldungen stehen unter dem Feld und tragen ein Icon — Farbe allein
   genügt nicht (Design Concept Kap. 24). */
.vis-message {
	display: flex;
	align-items: flex-start;
	gap: var(--vis-space-2);
	font-size: var(--vis-fs-caption);
}

.vis-message .vis-icon {
	width: 1.15em;
	height: 1.15em;
	margin-block-start: 0.1em;
}

.vis-message--error   { color: var(--vis-err-text); }
.vis-message--success { color: var(--vis-ok-text); }
.vis-message--info    { color: var(--vis-info-text); }

/* ── Checkbox und Radio ──────────────────────────────────────────────── */

.vis-choice {
	display: flex;
	align-items: flex-start;
	gap: var(--vis-space-3);
	min-height: var(--vis-tap-target-min);
	padding-block: var(--vis-space-2);
	cursor: pointer;
}

.vis-choice input[type="checkbox"],
.vis-choice input[type="radio"] {
	appearance: none;
	flex: none;
	width: var(--vis-space-6);
	height: var(--vis-space-6);
	margin: 0;
	margin-block-start: 0.1em;

	border: var(--vis-border-width-strong) solid var(--vis-border-strong);
	background: var(--vis-bg);
	cursor: pointer;

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

.vis-choice input[type="checkbox"] { border-radius: var(--vis-radius-xs); }
.vis-choice input[type="radio"]    { border-radius: var(--vis-radius-full); }

.vis-choice input:hover:not(:disabled) { border-color: var(--vis-ink-500); }

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

.vis-choice input:checked {
	border-color: var(--vis-accent);
	background-color: var(--vis-accent);
}

.vis-choice input[type="checkbox"]:checked {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	background-size: 80%;
	background-position: center;
	background-repeat: no-repeat;
}

.vis-choice input[type="radio"]:checked {
	background-image: radial-gradient(circle, var(--vis-white) 0 30%, transparent 32%);
}

.vis-choice input:disabled {
	background-color: var(--vis-bg-surface);
	border-color: var(--vis-border);
	cursor: not-allowed;
}

.vis-choice input:disabled + span { color: var(--vis-text-disabled); }

/* ── Toggle ──────────────────────────────────────────────────────────── */

.vis-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-3);
	min-height: var(--vis-tap-target-min);
	cursor: pointer;
}

.vis-toggle input {
	appearance: none;
	position: relative;
	flex: none;
	width: calc(var(--vis-space-12) - var(--vis-space-2));
	height: var(--vis-space-6);
	margin: 0;

	border-radius: var(--vis-radius-full);
	background: var(--vis-ink-300);
	cursor: pointer;

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

.vis-toggle input::after {
	content: "";
	position: absolute;
	inset-block-start: var(--vis-toggle-gap);
	inset-inline-start: var(--vis-toggle-gap);
	width: calc(var(--vis-space-6) - var(--vis-toggle-gap) * 2);
	height: calc(var(--vis-space-6) - var(--vis-toggle-gap) * 2);
	border-radius: var(--vis-radius-full);
	background: var(--vis-white);
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-toggle input:checked { background: var(--vis-accent); }

.vis-toggle input:checked::after {
	transform: translateX(calc(var(--vis-space-12) - var(--vis-space-2) - var(--vis-space-6)));
}

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

/* ── Upload ──────────────────────────────────────────────────────────── */

.vis-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vis-space-3);

	padding: var(--vis-space-10) var(--vis-space-6);
	border: var(--vis-border-width-strong) dashed var(--vis-border-strong);
	border-radius: var(--vis-radius-md);

	background: var(--vis-bg-subtle);
	text-align: center;
	cursor: pointer;

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

.vis-upload:hover,
.vis-upload:focus-within {
	border-color: var(--vis-accent);
	background: var(--vis-purple-50);
}

.vis-upload .vis-icon {
	width: var(--vis-space-8);
	height: var(--vis-space-8);
	color: var(--vis-text-3);
}

.vis-upload__title {
	font-weight: var(--vis-fw-medium);
	color: var(--vis-text);
}

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

/* ── Feldgruppen ─────────────────────────────────────────────────────── */

.vis-fieldset {
	border: 0;
	margin: 0;
	padding: 0;
}

.vis-fieldset > legend {
	padding: 0;
	margin-block-end: var(--vis-space-3);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	color: var(--vis-text);
}

/* Zwei Felder nebeneinander ab Tablet. */
.vis-field-row {
	display: grid;
	gap: var(--vis-space-6);
}

@media (min-width: 768px) {
	.vis-field-row { grid-template-columns: 1fr 1fr; }
	.vis-field-row .vis-field + .vis-field { margin-block-start: 0; }
}

/* ══════════════════════════════════════════════════════════════════════════
   BEITRAGSDARSTELLUNG
   Einzelbeitrag, Archivkopf und Suchformular. Gehört zum Designsystem —
   im Gegensatz zum Header/Footer-Provisorium in chrome-placeholder.css.
   ══════════════════════════════════════════════════════════════════════════ */

.visaro-entry { margin-block: var(--vis-space-12); }

.visaro-entry__header { margin-block-end: var(--vis-space-6); }

.visaro-entry__title {
	margin-block-end: var(--vis-space-2);
	letter-spacing: var(--vis-ls-heading);
}

.visaro-entry__title a {
	color: inherit;
	text-decoration: none;
}

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

.visaro-entry__meta {
	margin: 0;
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-caption);
	font-variant-numeric: tabular-nums;
}

.visaro-entry__media { margin-block: var(--vis-space-8); }

.visaro-entry__media img { border-radius: var(--vis-radius-md); }

.visaro-entry__content > * + * { margin-block-start: var(--vis-space-5); }

.visaro-entry__content h2 { margin-block-start: var(--vis-space-10); }
.visaro-entry__content h3 { margin-block-start: var(--vis-space-8); }

.visaro-entry__excerpt {
	color: var(--vis-text-2);
	max-width: 68ch;
}

.visaro-entry--single .visaro-entry__content { max-width: 68ch; }

.visaro-archive-header {
	margin-block: var(--vis-space-12) var(--vis-space-8);
	padding-block-end: var(--vis-space-6);
	border-block-end: var(--vis-border-width) solid var(--vis-border);
}

.visaro-archive-title { letter-spacing: var(--vis-ls-heading); }

.visaro-archive-description {
	margin-block-start: var(--vis-space-3);
	color: var(--vis-text-2);
	max-width: 68ch;
}

/* Seitenblätterung */
.wp-block-query-pagination,
.visaro-main .navigation.pagination {
	display: flex;
	gap: var(--vis-space-3);
	margin-block-start: var(--vis-space-12);
	padding-block-start: var(--vis-space-6);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-body-s);
}

.visaro-main .navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-2);
}

.visaro-main .navigation.pagination a,
.visaro-main .navigation.pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--vis-control-height-sm);
	min-height: var(--vis-control-height-sm);
	padding-inline: var(--vis-space-3);
	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-sm);
	color: var(--vis-text-2);
	text-decoration: none;
}

.visaro-main .navigation.pagination a:hover {
	border-color: var(--vis-ink-950);
	color: var(--vis-text);
}

.visaro-main .navigation.pagination .current {
	background: var(--vis-ink-950);
	border-color: var(--vis-ink-950);
	color: var(--vis-white);
}

/* Suchformular */
.visaro-searchform {
	display: flex;
	gap: var(--vis-space-3);
	flex-wrap: wrap;
	max-width: 34rem;
}

.visaro-searchform .vis-input { flex: 1 1 16rem; }

/* ══════════════════════════════════════════════════════════════════════════
   BERÜHRUNGSZIELE AUF TOUCH
   Der kleine Button ist mit 40 px für die Maus richtig, unterschreitet auf
   dem Finger aber das Mindestmaß von 44 px (Design Concept Kap. 24).
   Auf groben Zeigegeräten wächst er deshalb — auf dem Desktop bleibt er
   kompakt.
   ══════════════════════════════════════════════════════════════════════════ */

@media (pointer: coarse) {
	.vis-btn--sm,
	.vis-btn--icon.vis-btn--sm {
		min-height: var(--vis-tap-target-min);
	}

	.vis-btn--icon.vis-btn--sm {
		width: var(--vis-tap-target-min);
		height: var(--vis-tap-target-min);
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   CHIPS
   Filter und Bereichsmarken. Ein Chip ist ein Zustand, kein Button —
   deshalb keine Fläche, sondern eine Kontur, die beim Aktivwerden füllt.
   Steht hier und nicht bei den Seitenabschnitten, weil ihn Leistungsseiten
   und Shop gleichermaßen brauchen.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--vis-space-2);

	min-block-size: var(--vis-chip-height);
	padding-inline: var(--vis-space-4);

	border: var(--vis-border-width) solid var(--vis-border);
	border-radius: var(--vis-radius-full);

	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
	text-decoration: none;
	white-space: nowrap;

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

.vis-chip:hover {
	border-color: var(--vis-accent);
	color: var(--vis-text);
}

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

.vis-chip.is-active {
	border-color: var(--vis-ink-950);
	background: var(--vis-ink-950);
	color: var(--vis-white);
}

.vis-chip.is-static {
	cursor: default;
	color: var(--vis-text-3);
}

.vis-chip__count {
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	font-variant-numeric: tabular-nums;
}

.vis-chip.is-active .vis-chip__count { color: var(--vis-ink-400); }

/* ══════════════════════════════════════════════════════════════════════════
   BILD ODER PLATZHALTER
   Die Hülle gibt das Format vor, nicht das Bild. Dadurch springt beim
   Einsetzen echter Fotos nichts — der Platzhalter belegt exakt denselben
   Raum.
   Steht hier und nicht bei den Seitenabschnitten, weil ihn Leistungsseiten,
   Landingpages und Shopwelten gleichermaßen brauchen.
   ══════════════════════════════════════════════════════════════════════════ */

.vis-figure {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	overflow: hidden;
	background: var(--vis-ink-950);
}

.vis-figure__image {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
}

.vis-figure__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: var(--vis-space-2);

	inline-size: 100%;
	block-size: 100%;
	padding: var(--vis-space-6);

	color: var(--vis-ink-300);
}

.vis-figure__motif {
	max-inline-size: 34ch;
	font-size: var(--vis-fs-body-s);
	line-height: var(--vis-lh-snug);
}

.vis-figure__id {
	color: var(--vis-purple-400);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
}


/* Druckrückmeldung (07.10.2026): Der Button gibt beim Drücken einen Pixel
   nach — eine Bestätigung, dass der Klick angekommen ist, ohne Effekt. */
.vis-btn { transition-property: background-color, border-color, color, transform; }
.vis-btn:not(:disabled):not([aria-disabled="true"]):active { transform: translateY(1px) scale(0.985); }

@media (prefers-reduced-motion: reduce) {
	.vis-btn:active { transform: none !important; }
}