/* ==========================================================================
   Websmarty – Seiten: Über mich, Kontakt, FAQ, Referenzen, Rechtstexte
   (Hero und Brotkrumen kommen aus leistung.css)
   ========================================================================== */

/* Zweispaltiger Abschnitt: Überschrift links, Inhalt rechts ---------------- */

.split {
	display: grid;
	gap: var(--s-6) var(--s-16);
}

@media (min-width: 64em) {
	.split {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		align-items: start;
	}

	.split__aside {
		position: sticky;
		top: calc(var(--header-h) + var(--header-gap) * 2 + var(--admin-bar, 0px) + 1rem);
	}

	.split--center {
		align-items: center;
	}

	.split--center .split__aside {
		position: static;
	}
}

.prose--large {
	max-width: 62ch;
}

.prose--large p {
	font-size: var(--fs-lg);
	line-height: 1.6;
}

/* Text-Seiten (Impressum, Datenschutz) */
.lhero--text {
	padding-bottom: var(--s-10);
}

.lhero--text .lhero__copy {
	max-width: 48rem;
}

.prose--legal {
	max-width: 70ch;
}

.prose--legal h2 {
	font-size: var(--fs-h4);
}

.prose--legal h3 {
	font-size: var(--fs-h5);
}

/* Über mich ---------------------------------------------------------------- */

.facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-5) var(--s-8);
	margin: var(--s-2) 0 var(--s-2);
	padding-block: var(--s-6);
	border-block: 1px solid var(--c-line);
}

.facts__item {
	display: grid;
	gap: 2px;
}

.facts__value {
	color: var(--c-text);
	font-family: var(--ff-display);
	font-size: var(--fs-h4);
	font-weight: 600;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.facts__label {
	margin: 0;
	color: var(--c-text-2);
	font-size: var(--fs-sm);
	line-height: 1.45;
}

/* Porträt „Über mich“: rund mit Bildtext. Mobil als Zeile (Bild links, Text rechts),
   ab Desktop mittig in der rechten Spalte. */
.about-portrait {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--s-4) var(--s-5);
	margin: 0;
}

.about-portrait__ring {
	width: 6rem;
	padding: 0.25rem;
	border: 1px solid var(--c-accent-line);
	border-radius: 50%;
	background: var(--c-surface);
	box-shadow: inset 0 1px 0 var(--c-highlight);
}

.about-portrait__img {
	--ratio: 1 / 1;
	border-radius: 50%;
}

.about-portrait__img > img {
	object-position: 50% 28%;
}

.about-portrait__caption {
	display: grid;
	gap: var(--s-1);
}

.about-portrait__name {
	color: var(--c-text);
	font-family: var(--ff-display);
	font-size: var(--fs-h5);
	font-weight: 600;
	line-height: 1.2;
}

.about-portrait__role {
	color: var(--c-text-3);
	font-size: var(--fs-sm);
	line-height: 1.45;
}

@media (min-width: 64em) {
	.about-portrait {
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		gap: var(--s-6);
		text-align: center;
	}

	.about-portrait__ring {
		width: min(100%, 20rem);
		padding: 0.5rem;
		box-shadow:
			inset 0 1px 0 var(--c-highlight),
			0 2rem 4rem -2rem var(--c-accent-glow);
	}
}

/* Zeitleiste „Stationen“: feine Linie, Punkte, hervorgehobene Station in Lime */
.timeline {
	margin-top: var(--s-10);
}

.timeline__title {
	margin: 0 0 var(--s-5);
	color: var(--c-text-2);
	font-family: var(--ff-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0;
}

.timeline__list {
	position: relative;
	display: grid;
	gap: var(--s-6);
	margin: 0;
	padding: 0 0 0 var(--s-8);
	list-style: none;
}

.timeline__list::before {
	content: "";
	position: absolute;
	top: 0.6rem;
	bottom: 0.6rem;
	left: 7px;
	width: 1px;
	background: var(--c-line-strong);
}

.timeline__item {
	position: relative;
	display: grid;
	gap: 2px;
}

.timeline__item::before {
	content: "";
	position: absolute;
	top: 0.15rem;
	left: calc(var(--s-8) * -1);
	width: 15px;
	height: 15px;
	border: 1px solid var(--c-line-hover);
	border-radius: 50%;
	background: var(--c-bg);
}

.timeline__item.is-highlight::before {
	border-color: var(--c-accent);
	background: var(--c-accent);
	box-shadow: 0 0 0 4px var(--c-accent-soft);
}

.timeline__period {
	color: var(--c-text-3);
	font-size: var(--fs-xs);
	font-variant-numeric: tabular-nums;
}

.timeline__item.is-highlight .timeline__period {
	color: var(--c-accent);
}

.timeline__role {
	color: var(--c-text);
	font-family: var(--ff-display);
	font-size: var(--fs-h5);
	font-weight: 600;
	line-height: 1.3;
}

.timeline__place {
	color: var(--c-text-2);
	font-size: var(--fs-sm);
}

.tool-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tool-list .chip {
	padding: 0.5em 1em;
	font-size: var(--fs-sm);
	color: var(--c-text);
}

/* Kontakt ------------------------------------------------------------------ */

.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6);
	align-items: start;
}

@media (min-width: 64em) {
	.contact-grid {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: var(--s-8);
	}
}

.contact-form-shell {
	scroll-margin-top: calc(var(--header-h) + var(--header-gap) * 2 + 1rem);
}

.contact-form-core {
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.contact-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--s-6);
}

.contact-form__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}

.contact-form__grid {
	display: grid;
	gap: var(--s-5);
}

@media (min-width: 40em) {
	.contact-form__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.field--wide {
		grid-column: 1 / -1;
	}
}

.contact-form .cta-note {
	margin-top: calc(var(--s-2) * -1);
	justify-content: center;
}

.contact-form .check a {
	color: var(--c-text);
}

/* Unsichtbares Spam-Feld */
.hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.form-errors {
	padding: var(--s-4) var(--s-5);
	border: 1px solid color-mix(in srgb, var(--c-danger) 45%, transparent);
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--c-danger) 10%, transparent);
	color: var(--c-text);
	font-size: var(--fs-sm);
}

.form-errors ul {
	margin: var(--s-2) 0 0;
	padding-left: 1.2em;
}

.form-errors a {
	color: var(--c-text);
}

.form-success {
	display: grid;
	justify-items: start;
	gap: var(--s-4);
	padding-block: var(--s-6);
	animation: ws-rise 600ms var(--ease-out) both;
}

@media (prefers-reduced-motion: reduce) {
	.form-success {
		animation: ws-fade 200ms ease both;
	}
}

.contact-aside {
	display: grid;
	gap: var(--s-4);
}

.contact-card {
	display: grid;
	gap: var(--s-3);
	padding: var(--s-6);
}

.contact-card .h4 {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	font-size: var(--fs-h5);
}

.contact-card .h4 .icon {
	--icon-size: 1.15rem;
	color: var(--c-accent);
}

.contact-card__person {
	display: flex;
	align-items: center;
	gap: var(--s-4);
	margin-bottom: var(--s-2);
	padding-bottom: var(--s-4);
	border-bottom: 1px solid var(--c-line);
}

.contact-card__photo {
	width: 4.5rem;
	flex: none;
}

.contact-card__photo .media-slot {
	border-radius: 50%;
	padding: 0;
}

.contact-card__photo .media-slot__inner > :not(.media-slot__icon) {
	display: none;
}

.contact-card__photo .media-slot__icon {
	--tile: 2rem;
	margin: 0;
}

.contact-card__name {
	font-family: var(--ff-display);
	font-size: var(--fs-h5);
	font-weight: 600;
}

.calendly__frame {
	overflow: hidden;
	margin-top: var(--s-3);
	border: 1px solid var(--c-line);
	border-radius: var(--r-md);
	background: var(--c-text);
}

.calendly__frame iframe {
	display: block;
	width: 100%;
	height: 680px;
	border: 0;
}

/* FAQ-Seite ---------------------------------------------------------------- */

.faq-nav {
	margin-top: var(--s-2);
}

.faq-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.faq-nav__link {
	min-height: 2.5rem;
	padding-inline: 1em;
	color: var(--c-text);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
	.faq-nav__link:hover {
		border-color: var(--c-accent-line);
		background: var(--c-surface);
	}
}

.faq-group {
	scroll-margin-top: calc(var(--header-h) + var(--header-gap) * 2);
}

/* Referenzen-Übersicht ----------------------------------------------------- */

.ref-grid {
	display: grid;
	gap: var(--s-12) var(--s-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.ref-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ref-grid__item--wide {
		grid-column: 1 / -1;
	}

	.ref-grid__item--wide .ref-card {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: center;
		gap: var(--s-10);
	}

	.ref-grid__item--wide .ref-card__title {
		font-size: var(--fs-h3);
	}
}

.ref-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0 0 var(--s-1);
	padding: 0;
	list-style: none;
}

/* Case Study --------------------------------------------------------------- */

.case-meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--s-4) var(--s-8);
	margin: var(--s-2) 0 0;
	padding-top: var(--s-6);
	border-top: 1px solid var(--c-line);
}

.case-meta dt {
	color: var(--c-text-3);
	font-size: var(--fs-xs);
}

.case-meta dd {
	margin: 2px 0 0;
	color: var(--c-text);
	font-size: var(--fs-sm);
}

.case-meta a {
	color: var(--c-text);
}

.case-story__row + .case-story__row {
	margin-top: var(--s-12);
	padding-top: var(--s-12);
	border-top: 1px solid var(--c-line);
}

.case-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--s-6);
	margin: var(--s-16) 0 0;
	padding-top: var(--s-10);
	border-top: 1px solid var(--c-line);
}

.case-kpis dt {
	order: 2;
	color: var(--c-text-2);
	font-size: var(--fs-sm);
}

.case-kpis__item {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.case-kpis dd {
	order: 1;
	margin: 0;
	color: var(--c-accent);
	font-family: var(--ff-display);
	font-size: var(--fs-h2);
	font-weight: 600;
	line-height: 1;
	letter-spacing: var(--tracking-tight);
	font-variant-numeric: tabular-nums;
}

.case-gallery__grid {
	display: grid;
	gap: var(--s-5);
	align-items: start;
}

@media (min-width: 48em) {
	.case-gallery__grid {
		grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
	}
}

.case-quote .voice {
	justify-items: start;
}