/* ══════════════════════════════════════════════════════════════════════════
   VISARO — Unterseiten, gemeinsame Grundlage

   Was alle Unterseiten teilen: Seitenkopf, Platzhalterbild, Abschlussband,
   Chips, aufklappbare Fragen und Formulare. Alles Seitenspezifische steht
   in projects.css, services.css oder corporate.css.

   Der Grundsatz aus dem Designsystem gilt unverändert: kein Hexwert und
   keine freie Pixelzahl in dieser Datei (E20).
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ 1 — Container ═══════════════════════════════════════════════════════ */

.vis-pagehero__inner,
.vis-pagecta__inner,
.vis-projectlist__inner,
.vis-servicelist__inner,
.vis-decide__inner,
.vis-servicehero__inner,
.vis-serviceintents__inner,
.vis-serviceareas__inner,
.vis-serviceadvice__inner,
.vis-servicecraft__inner,
.vis-servicesteps__inner,
.vis-serviceprojects__inner,
.vis-servicefaq__inner,
.vis-servicerelated__inner,
.vis-project-page__stage-inner,
.vis-project-page__more-inner,
.vis-history__inner,
.vis-stance__inner,
.vis-teamfull__inner,
.vis-place__inner,
.vis-reasons__inner,
.vis-routes__inner,
.vis-where__inner,
.vis-start__inner {
	max-width: var(--vis-container-wide);
	margin-inline: auto;
	padding-inline: var(--vis-gutter);
}

/* ══ 2 — Seitenkopf ══════════════════════════════════════════════════════

   Ein Hero, nicht *der* Hero. Der Startseiten-Hero ist eine Bühne mit
   eigener Tiefe; dieser hier ist eine Überschrift mit Luft darum. Sie
   teilen sich Typografie und Kicker, aber nicht die Höhe — sonst fühlte
   sich jede Unterseite wie eine zweite Startseite an.                    */

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

.vis-pagehero--paper { background: var(--vis-paper); }

.vis-pagehero--dark {
	background: var(--vis-ink-950);
}

.vis-pagehero__headline {
	margin: var(--vis-space-5) 0 0;
	max-inline-size: 20ch;

	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);
	text-wrap: balance;
}

.vis-pagehero__lead {
	margin: var(--vis-space-6) 0 0;
	max-inline-size: 60ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

/* Die Spec-Leiste aus dem Werkstattraster: Mono-Label über dem Wert. */
.vis-pagehero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vis-space-8);
	margin: var(--vis-space-10) 0 0;
	padding-block-start: var(--vis-space-6);
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-pagehero__meta-item dt {
	color: var(--vis-text-3);
	font-family: var(--vis-font-mono);
	font-size: var(--vis-fs-label);
	letter-spacing: var(--vis-ls-label);
	text-transform: uppercase;
}

.vis-pagehero__meta-item dd {
	margin: var(--vis-space-1) 0 0;
	font-size: var(--vis-fs-body-s);
	font-weight: var(--vis-fw-medium);
}

/* ══ 3 — Fragen ══════════════════════════════════════════════════════════

   Natives <details>: funktioniert ohne JavaScript, ist von Haus aus
   zugänglich und durchsuchbar. Ein eigenes Accordion wäre mehr Code für
   weniger.                                                               */

.vis-faq {
	border-block-start: var(--vis-border-width) solid var(--vis-border);
}

.vis-faq:last-child {
	border-block-end: var(--vis-border-width) solid var(--vis-border);
}

.vis-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--vis-space-6);

	padding-block: var(--vis-space-5);
	cursor: pointer;
	list-style: none;

	font-size: var(--vis-fs-h4);
	font-weight: var(--vis-fw-medium);
	letter-spacing: var(--vis-ls-heading);

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

.vis-faq__q::-webkit-details-marker { display: none; }

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

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

.vis-faq__icon {
	flex: none;
	display: inline-flex;
	color: var(--vis-text-3);
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

.vis-faq[open] .vis-faq__icon { transform: rotate(180deg); }

.vis-faq__a {
	max-inline-size: 72ch;
	padding-block-end: var(--vis-space-6);
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body);
	line-height: var(--vis-lh-body);
}

/* ══ 4 — Abschlussband ═══════════════════════════════════════════════════

   Dieselbe Haltung wie der Abschluss der Startseite: Papierton statt
   Schwarz, h1 statt Display, ein Button und ein Textlink. Der Hero der
   Seite bleibt damit der stärkste Punkt.                                 */

.vis-pagecta {
	padding-block: var(--vis-section-l);
	background: var(--vis-paper);
}

.vis-pagecta__inner {
	display: grid;
	gap: var(--vis-space-10);
}

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

.vis-pagecta__headline {
	display: flex;
	align-items: baseline;
	gap: var(--vis-space-4);

	margin: 0;
	max-inline-size: 18ch;

	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-pagecta__text {
	margin: var(--vis-space-5) 0 0;
	max-inline-size: 52ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

.vis-pagecta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vis-space-8);
}

.vis-pagecta__actions .vis-btn .vis-icon {
	transition: transform var(--vis-duration-ui) var(--vis-ease-out);
}

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

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

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

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

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

.vis-pagecta__alt:hover,
.vis-pagecta__alt:focus-visible {
	color: var(--vis-accent);
	transform: translateX(var(--vis-nudge));
}

/* ══ 5 — Abschnittsköpfe ═════════════════════════════════════════════════

   Ein gemeinsames Muster für alle zweispaltigen Köpfe: Überschrift links,
   Einleitung rechts, ab 1024 nebeneinander an der Grundlinie ausgerichtet.
   Ohne diese Zusammenfassung stünde dieselbe Regel achtmal in drei
   Dateien.                                                               */

.vis-serviceareas__head,
.vis-serviceprojects__head,
.vis-teamfull__head,
.vis-stance__head,
.vis-project-page__more-head {
	display: grid;
	gap: var(--vis-space-6);
	margin-block-end: var(--vis-space-12);
}

@media (min-width: 1024px) {
	.vis-serviceareas__head,
	.vis-serviceprojects__head,
	.vis-teamfull__head,
	.vis-stance__head,
	.vis-project-page__more-head {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--vis-space-16);
		align-items: end;
		margin-block-end: var(--vis-section-s);
	}
}

.vis-serviceareas__headline,
.vis-serviceprojects__headline,
.vis-teamfull__headline,
.vis-stance__headline,
.vis-servicefaq__headline,
.vis-servicerelated__headline,
.vis-reasons__headline,
.vis-routes__headline,
.vis-project-page__more-title {
	margin: var(--vis-space-4) 0 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-serviceareas__intro,
.vis-teamfull__text,
.vis-stance__lead {
	margin: 0;
	max-inline-size: 54ch;
	color: var(--vis-text-2);
	font-size: var(--vis-fs-body-l);
}

/* ══ 6 — Formular ════════════════════════════════════════════════════════ */

.vis-field--full { grid-column: 1 / -1; }

.vis-hint--error { color: var(--vis-err-text); }

/* ══ 7 — Reduzierte Bewegung ═════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.vis-chip,
	.vis-faq__icon,
	.vis-pagecta__alt {
		transition: none;
	}

	.vis-pagecta__alt:hover,
	.vis-pagecta__alt:focus-visible {
		transform: none;
	}
}

@media (max-width: 639px) {
	.vis-pagehero__headline { hyphens: auto; }
}

/* Fragen öffnen weich statt zu springen (07.10.2026). Fortschreitende
   Verbesserung: Wo `::details-content` und `interpolate-size` fehlen,
   klappt es wie bisher sofort auf — nichts geht verloren. */
.vis-faq { interpolate-size: allow-keywords; }

.vis-faq::details-content {
	block-size: 0;
	overflow: clip;
	transition:
		block-size var(--vis-duration-ui) var(--vis-ease-out),
		content-visibility var(--vis-duration-ui) allow-discrete;
}

.vis-faq[open]::details-content { block-size: auto; }

.vis-faq__a { transition: opacity var(--vis-duration-content) var(--vis-ease-out); }
.vis-faq:not([open]) .vis-faq__a { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.vis-faq::details-content { transition: none; }
}