/*
 * JoNa Digital Solutions – Über-mich-Seite /ueber-mich/ (JDS-17)
 * ===========================================================================
 * Persönliche, aber professionelle Vorstellung: Hero, persönliche Einordnung,
 * technischer Hintergrund, Ansatz-Prozess, Protect/Software, Arbeitsprinzipien,
 * eigene Projekte, Remote und finaler CTA.
 * Ausschließlich Design-Tokens (--jds-*); nur HTML + CSS, kein JavaScript,
 * kein Portrait, keine externen Assets.
 *
 * Version: 1.5.0
 */

/* ===========================================================================
 * DIVI-NEUTRALISIERUNG (nur wenn die Seite vorhanden ist)
 * =========================================================================== */
.et_pb_section:has(.jds-about-page) {
	padding: 0;
	background-color: var(--jds-bg);
}

.et_pb_section:has(.jds-about-page) > .et_pb_row {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.et_pb_section:has(.jds-about-page) .et_pb_column {
	margin: 0;
	padding: 0;
}

.et_pb_section:has(.jds-about-page) .et_pb_code_inner {
	width: 100%;
}

/* ===========================================================================
 * ROOT + gescopete Listen-Resets (kein globales ul/li/ol-Reset)
 * =========================================================================== */
.jds-about-page {
	color: var(--jds-text);
}

.jds-about-page *,
.jds-about-page *::before,
.jds-about-page *::after {
	box-sizing: border-box;
}

.jds-about-page .jds-about-principles,
.jds-about-page .jds-about-process,
.jds-about-page .jds-about-projects,
.jds-about-page .jds-about-remote__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.jds-about-page .jds-about-principles > li,
.jds-about-page .jds-about-process > li,
.jds-about-page .jds-about-projects > li,
.jds-about-page .jds-about-remote__list > li {
	list-style: none;
}

.jds-about-page .jds-about-principles > li::marker,
.jds-about-page .jds-about-process > li::marker,
.jds-about-page .jds-about-projects > li::marker,
.jds-about-page .jds-about-remote__list > li::marker {
	content: "";
}

.jds-about-arrow {
	display: inline-block;
	transition: transform var(--jds-transition-fast);
}

.jds-about-area__cta:hover .jds-about-arrow,
.jds-about-area__cta:focus-visible .jds-about-arrow,
.jds-about-practice__cta:hover .jds-about-arrow,
.jds-about-practice__cta:focus-visible .jds-about-arrow,
.jds-about-cta__button:hover .jds-about-arrow,
.jds-about-cta__button:focus-visible .jds-about-arrow {
	transform: translateX(2px);
}

/* ===========================================================================
 * HERO
 * =========================================================================== */
.jds-about-hero {
	background-color: var(--jds-bg-soft);
	padding-block: var(--jds-section-space);
}

.jds-about-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: var(--jds-grid-gap);
	align-items: center;
}

.jds-about-hero__content {
	max-width: var(--jds-content-text);
}

.jds-about-hero__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-about-hero__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h1);
	line-height: var(--jds-line-height-h1);
	letter-spacing: var(--jds-letter-spacing-h1);
	font-weight: var(--jds-font-weight-bold);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-about-hero__accent {
	color: var(--jds-green-dark);
}

.jds-about-hero__lead {
	margin: 0 0 var(--jds-space-sm);
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

.jds-about-hero__note {
	margin: 0;
	color: var(--jds-text);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* Dekoratives technisches Brand-Visual (kein Portrait). */
.jds-about-hero__visual {
	display: flex;
	justify-content: center;
}

.jds-about-hero__stack {
	position: relative;
	display: block;
	width: 100%;
	max-width: 320px;
	height: 200px;
}

.jds-about-hero__layer {
	position: absolute;
	left: 0;
	right: 0;
	height: 56px;
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-large);
	background-color: var(--jds-white);
	box-shadow: var(--jds-shadow-subtle);
}

.jds-about-hero__layer--one {
	top: 0;
	left: 12%;
	right: 0;
	background-color: var(--jds-bg-blue-soft);
}

.jds-about-hero__layer--two {
	top: 64px;
	left: 6%;
	right: 6%;
}

.jds-about-hero__layer--three {
	top: 128px;
	left: 0;
	right: 12%;
	background-color: var(--jds-bg-green-soft);
}

/* ===========================================================================
 * PERSÖNLICH
 * =========================================================================== */
.jds-about-person {
	background-color: var(--jds-bg);
	padding-block: var(--jds-section-space);
}

.jds-about-person__intro {
	max-width: var(--jds-content-text);
	margin: 0 0 var(--jds-space-2xl);
}

.jds-about-person__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-about-person__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-about-person__text {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

.jds-about-person__points {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jds-grid-gap);
}

.jds-about-point {
	padding-top: var(--jds-space-md);
	border-top: 2px solid var(--jds-green);
}

.jds-about-point__title {
	margin: 0 0 var(--jds-space-xs);
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	letter-spacing: var(--jds-letter-spacing-h3);
	color: var(--jds-heading);
}

.jds-about-point__text {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* ===========================================================================
 * TECHNISCHER HINTERGRUND
 * =========================================================================== */
.jds-about-roots {
	background-color: var(--jds-bg-blue-soft);
	padding-block: var(--jds-section-space);
}

.jds-about-roots__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--jds-grid-gap);
	align-items: start;
}

.jds-about-roots__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-about-roots__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-about-roots__text {
	margin: 0;
	color: var(--jds-text);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
	max-width: var(--jds-content-text);
}

.jds-about-roots__principles {
	background-color: var(--jds-bg);
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-large);
	padding: var(--jds-card-padding);
}

.jds-about-roots__principles-title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	letter-spacing: var(--jds-letter-spacing-h3);
	color: var(--jds-heading);
}

.jds-about-principles {
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-sm);
}

.jds-about-principles__item {
	position: relative;
	padding-left: 28px;
	color: var(--jds-text);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

.jds-about-principles__item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--jds-green);
	border-bottom: 2px solid var(--jds-green);
	transform: rotate(-45deg);
}

/* ===========================================================================
 * ANSATZ / PROZESS
 * =========================================================================== */
.jds-about-approach {
	background-color: var(--jds-bg);
	padding-block: var(--jds-section-space);
}

.jds-about-approach__intro {
	max-width: var(--jds-content-text);
	margin: 0 0 var(--jds-space-2xl);
}

.jds-about-approach__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-about-approach__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-about-approach__text {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

.jds-about-process {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--jds-space-lg) var(--jds-grid-gap);
}

.jds-about-process__step {
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-sm);
}

.jds-about-process__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--jds-card-process-index-size);
	height: var(--jds-card-process-index-size);
	border-radius: var(--jds-radius-pill);
	background-color: var(--jds-navy);
	color: var(--jds-white);
	font-weight: var(--jds-font-weight-semibold);
}

.jds-about-process__label {
	color: var(--jds-heading);
	font-size: var(--jds-font-size-body);
	font-weight: var(--jds-font-weight-medium);
	line-height: var(--jds-line-height-ui);
}

/* ===========================================================================
 * ZWEI BEREICHE
 * =========================================================================== */
.jds-about-areas {
	background-color: var(--jds-bg-green-soft);
	padding-block: var(--jds-section-space);
}

.jds-about-areas__intro {
	max-width: var(--jds-content-text);
	margin: 0 0 var(--jds-space-2xl);
}

.jds-about-areas__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-about-areas__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-about-areas__text {
	margin: 0;
	color: var(--jds-text);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

.jds-about-areas__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jds-grid-gap);
}

.jds-about-area {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background-color: var(--jds-bg);
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-large);
	padding: var(--jds-card-padding);
}

.jds-about-area:first-child {
	border-top: 3px solid var(--jds-navy);
}

.jds-about-area:last-child {
	border-top: 3px solid var(--jds-green);
}

.jds-about-area__title {
	margin: 0 0 var(--jds-space-sm);
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	letter-spacing: var(--jds-letter-spacing-h3);
	color: var(--jds-heading);
}

.jds-about-area__text {
	margin: 0 0 var(--jds-space-lg);
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

.jds-about-area__cta {
	margin-top: auto;
	min-height: var(--jds-btn-min-height);
}

.jds-about-areas__note {
	margin: var(--jds-space-xl) 0 0;
	max-width: var(--jds-content-text);
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* ===========================================================================
 * WIE ICH ARBEITE
 * =========================================================================== */
.jds-about-work {
	background-color: var(--jds-bg-soft);
	padding-block: var(--jds-section-space);
}

.jds-about-work__intro {
	max-width: var(--jds-content-text);
	margin: 0 0 var(--jds-space-2xl);
}

.jds-about-work__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-about-work__title {
	margin: 0;
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-about-work__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--jds-space-xl) var(--jds-grid-gap);
}

.jds-about-principle {
	padding-top: var(--jds-space-md);
	border-top: 2px solid var(--jds-border-strong);
}

.jds-about-principle__title {
	margin: 0 0 var(--jds-space-xs);
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	letter-spacing: var(--jds-letter-spacing-h3);
	color: var(--jds-heading);
}

.jds-about-principle__text {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

/* ===========================================================================
 * PRAXIS / EIGENE PROJEKTE
 * =========================================================================== */
.jds-about-practice {
	background-color: var(--jds-bg);
	padding-block: var(--jds-section-space);
}

.jds-about-practice__intro {
	max-width: var(--jds-content-text);
	margin: 0 0 var(--jds-space-2xl);
}

.jds-about-practice__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-about-practice__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-about-practice__text {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
}

.jds-about-projects {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--jds-grid-gap);
}

.jds-about-projects__item {
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-xs);
	padding: var(--jds-space-lg);
	background-color: var(--jds-bg-soft);
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-large);
}

.jds-about-projects__name {
	color: var(--jds-heading);
	font-size: var(--jds-font-size-h3);
	line-height: var(--jds-line-height-h3);
	font-weight: var(--jds-font-weight-semibold);
}

.jds-about-projects__status {
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

.jds-about-practice__action {
	margin-top: var(--jds-space-xl);
}

.jds-about-practice__cta {
	min-height: var(--jds-btn-min-height);
}

/* ===========================================================================
 * REMOTE
 * =========================================================================== */
.jds-about-remote {
	background-color: var(--jds-bg-soft);
	padding-block: var(--jds-section-space);
}

.jds-about-remote__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--jds-grid-gap);
	align-items: start;
}

.jds-about-remote__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green-dark);
}

.jds-about-remote__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-heading);
	text-wrap: balance;
}

.jds-about-remote__text {
	margin: 0;
	color: var(--jds-text-muted);
	font-size: var(--jds-font-size-body-lg);
	line-height: var(--jds-line-height-body-lg);
	max-width: var(--jds-content-text);
}

.jds-about-remote__list {
	display: flex;
	flex-direction: column;
	gap: var(--jds-space-md);
	background-color: var(--jds-bg);
	border: var(--jds-border-width) solid var(--jds-border);
	border-radius: var(--jds-radius-large);
	padding: var(--jds-card-padding);
}

.jds-about-remote__item {
	position: relative;
	padding-left: 28px;
	color: var(--jds-text);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
}

.jds-about-remote__item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.5em;
	width: 11px;
	height: 6px;
	border-left: 2px solid var(--jds-green);
	border-bottom: 2px solid var(--jds-green);
	transform: rotate(-45deg);
}

/* ===========================================================================
 * FINALER CTA (dunkel)
 * =========================================================================== */
.jds-about-cta {
	background-color: var(--jds-navy-band);
	background-image: linear-gradient(
		180deg,
		var(--jds-navy-deep) 0%,
		var(--jds-navy-band) 100%
	);
	color: var(--jds-text-inverse);
	padding-block: var(--jds-section-space-sm);
	border-bottom: var(--jds-border-width) solid var(--jds-border-on-dark);
}

.jds-about-cta__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: var(--jds-grid-gap);
	align-items: center;
}

.jds-about-cta__eyebrow {
	margin: 0 0 var(--jds-space-md);
	color: var(--jds-green);
}

.jds-about-cta__title {
	margin: 0 0 var(--jds-space-md);
	font-size: var(--jds-font-size-h2);
	line-height: var(--jds-line-height-h2);
	letter-spacing: var(--jds-letter-spacing-h2);
	color: var(--jds-text-inverse);
	text-wrap: balance;
	max-width: 28ch;
}

.jds-about-cta__text {
	margin: 0;
	color: var(--jds-text-inverse-muted);
	font-size: var(--jds-font-size-body);
	line-height: var(--jds-line-height-body);
	max-width: var(--jds-measure-tight);
}

.jds-about-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jds-space-md);
}

/* ===========================================================================
 * TABLET (690–999px)
 * =========================================================================== */
@media (min-width: 690px) and (max-width: 999px) {
	.jds-about-hero__inner,
	.jds-about-roots__inner,
	.jds-about-remote__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-xl);
	}

	.jds-about-person__points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jds-about-process {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.jds-about-projects {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jds-about-cta__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-xl);
	}
}

/* ===========================================================================
 * MOBILE (< 690px)
 * =========================================================================== */
@media (max-width: 689px) {
	.jds-about-hero {
		padding-block: var(--jds-space-2xl);
	}

	.jds-about-hero__inner,
	.jds-about-roots__inner,
	.jds-about-remote__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-xl);
	}

	/* Text vor dekorativem Visual. */
	.jds-about-hero__visual {
		order: 1;
	}

	.jds-about-person,
	.jds-about-roots,
	.jds-about-approach,
	.jds-about-areas,
	.jds-about-work,
	.jds-about-practice,
	.jds-about-remote {
		padding-block: var(--jds-space-2xl);
	}

	.jds-about-person__intro,
	.jds-about-approach__intro,
	.jds-about-areas__intro,
	.jds-about-work__intro,
	.jds-about-practice__intro {
		margin-bottom: var(--jds-space-xl);
	}

	.jds-about-person__points,
	.jds-about-roots__principles,
	.jds-about-areas__grid,
	.jds-about-work__grid,
	.jds-about-projects {
		grid-template-columns: minmax(0, 1fr);
	}

	.jds-about-process {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jds-about-area__cta,
	.jds-about-practice__cta {
		width: 100%;
		justify-content: center;
		min-height: 48px;
	}

	.jds-about-cta {
		padding-block: var(--jds-space-2xl);
	}

	.jds-about-cta__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jds-space-xl);
	}

	.jds-about-cta__title {
		max-width: none;
	}

	.jds-about-cta__actions {
		flex-direction: column;
		align-items: stretch;
	}

	.jds-about-cta__button {
		width: 100%;
		justify-content: center;
		min-height: 48px;
	}
}

/* ===========================================================================
 * REDUCED MOTION
 * =========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.jds-about-arrow {
		transition: none;
	}
}