/**
 * One-Pager Home V2
 * Projekt: Mini-Landingpage Marcus Spiess
 *
 * Seitenbezogene Gestaltung für Home V2.
 * Alle Regeln bleiben unter .ms-onepager gekapselt.
 */


/* ========================================
   1. Lokale Design- und Layoutwerte
   ======================================== */

.ms-onepager {
	--ms-onepager-width-default: 75rem;   /* 1200 px */
	--ms-onepager-width-wide: 82.5rem;    /* 1320 px */
	--ms-onepager-width-narrow: 60rem;    /* 960 px */
	--ms-onepager-width-compact: 53rem;   /* 848 px */

	--ms-onepager-font-body: 1.125rem;
	--ms-onepager-font-small: 0.875rem;
	--ms-onepager-font-meta: 0.75rem;

	--ms-onepager-font-h1: 2.625rem;
	--ms-onepager-font-h2: 2rem;
	--ms-onepager-font-h3: 1.25rem;

	--ms-onepager-section-space: 6rem;

	display: flex;
	flex-direction: column;

	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	gap: 0;

	background-color: var(--ms-color-background);
	color: var(--ms-color-text);
}


/* ========================================
   2. Elementor-Nullbasis
   ======================================== */

.ms-onepager .e-con {
	--padding-top: 0;
	--padding-right: 0;
	--padding-bottom: 0;
	--padding-left: 0;
	--gap: 0px;

	min-width: 0;
	margin: 0;
	padding: 0;
	gap: 0;
}

.ms-onepager .elementor-widget {
	min-width: 0;
	margin: 0;
	padding: 0;
}

.ms-onepager .elementor-widget-container {
	margin: 0;
	padding: 0;
}

.ms-onepager .elementor-heading-title,
.ms-onepager .elementor-widget-text-editor,
.ms-onepager .elementor-widget-text-editor p {
	margin: 0;
}


/* ========================================
   3. Außen- und Inhaltscontainer
   ======================================== */

.ms-onepager .ms-section {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.ms-onepager .ms-container {
	width: 100%;
	max-width: none;
	margin-inline: auto;
	padding-inline: var(--ms-container-padding);
}

.ms-onepager .ms-container--default {
	max-width: var(--ms-onepager-width-default);
}

.ms-onepager .ms-container--wide {
	max-width: var(--ms-onepager-width-wide);
}

.ms-onepager .ms-container--narrow {
	max-width: var(--ms-onepager-width-narrow);
}

.ms-onepager .ms-container--compact {
	max-width: var(--ms-onepager-width-compact);
}


/* ========================================
   4. Horizontale Seitenabstände
   ======================================== */

@media (max-width: 64rem) {

	.ms-onepager .ms-container {
		padding-inline: var(--ms-container-padding-tablet);
	}

}

@media (max-width: 47.9375rem) {

	.ms-onepager .ms-container {
		padding-inline: var(--ms-container-padding-mobile);
	}

}


/* ========================================
   5. Lokale Typografie
   ======================================== */

.ms-onepager {
	font-size: var(--ms-onepager-font-body);
	line-height: 1.5;
}

.ms-onepager .elementor-heading-title {
	color: var(--ms-color-text);
	font-family: var(--ms-font-family-primary);
	font-weight: var(--ms-font-weight-semibold);
	line-height: 1.12;
}

.ms-onepager
.elementor-widget-heading
h1.elementor-heading-title,
.ms-onepager
.elementor-widget-heading
h2.elementor-heading-title {
	color: var(--ms-color-black) !important;
}

.ms-onepager h1.elementor-heading-title {
	font-size: var(--ms-onepager-font-h1);
}

.ms-onepager h2.elementor-heading-title {
	font-size: var(--ms-onepager-font-h2);
}

.ms-onepager h3.elementor-heading-title {
	font-size: var(--ms-onepager-font-h3);
}

.ms-onepager .elementor-widget-text-editor {
	color: var(--ms-color-text);
	font-size: var(--ms-onepager-font-body);
	line-height: 1.5;
}

.ms-onepager a {
	color: var(--ms-color-primary);
}

.ms-onepager a:hover,
.ms-onepager a:focus {
	color: var(--ms-color-primary-hover);
}


/* ========================================
   6. Schutz vor Home-V1-Hero-Regeln
   Grundzustand
   ======================================== */

.ms-onepager .ms-hero,
.ms-onepager .ms-hero__content {
	max-width: none;
}

.ms-onepager .ms-hero__inner,
.ms-onepager .ms-hero__content {
	display: flex;
	flex-direction: column;
}

.ms-onepager .ms-hero__inner {
	padding-block: 0;
}

.ms-onepager .ms-hero__content {
	grid-template-columns: none;
	column-gap: 0;
	align-items: stretch;
}

/* ========================================
   Kontrollierte redaktionelle Umbrüche
   Desktop + Tablet
   ======================================== */

.ms-onepager br.ms-break-desktop-tablet {
	display: none;
}

@media (min-width: 48rem) {

	.ms-onepager br.ms-break-desktop-tablet {
		display: block;
	}

}


/* ========================================
   DESKTOP
   ab 1025 px
   ======================================== */

@media (min-width: 64.0625rem) {


	/* ====================================
	   7. Hero
	   ==================================== */

	.ms-onepager .ms-hero {
		padding-block:
			4.5rem
			var(--ms-onepager-section-space);
	}

	.ms-onepager .ms-hero__inner {
		display: grid;
		grid-template-columns:
			minmax(0, 0.9fr)
			minmax(0, 1.1fr);
		column-gap: 5rem;
		align-items: center;
	}

	.ms-onepager .ms-hero__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
	}

	.ms-onepager .ms-hero__content
	.elementor-widget-heading {
		width: 100%;
	}

	.ms-onepager .ms-hero__content
	h1.elementor-heading-title {
		max-width: 32rem;

		font-size: var(--ms-onepager-font-h1);
		line-height: 1.05;
		text-transform: uppercase;
		text-wrap: balance;
	}

	.ms-onepager .ms-hero__content
	.elementor-widget-text-editor {
		max-width: 31rem;
		font-size: 1.25rem;
		line-height: 1.42;
	}

	.ms-onepager .ms-hero__media {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
	}

	.ms-onepager .ms-hero__media
	.elementor-widget-image {
		width: 100%;
	}

	.ms-onepager .ms-hero__media img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--ms-radius-medium);
	}


	/* ====================================
	   8. Positionierung
	   ==================================== */

	.ms-onepager .ms-positioning {
		padding-block:
			var(--ms-space-5)
			var(--ms-onepager-section-space);
	}

	.ms-onepager .ms-positioning__inner {
		display: flex;
		flex-direction: column;
	}

	.ms-onepager .ms-positioning__inner
	> .elementor-widget-heading {
		margin-block-end: var(--ms-space-6);
	}

	.ms-onepager .ms-positioning__inner
	> .elementor-widget-heading
	.elementor-heading-title {
		max-width: 48rem;

		font-size: var(--ms-onepager-font-h2);
		line-height: 1.12;
		text-transform: uppercase;
	}

	.ms-onepager .ms-positioning__grid {
		display: grid;
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		column-gap: 3rem;
		align-items: start;
	}

	.ms-onepager .ms-positioning__intro
	.elementor-widget-text-editor {
		font-size: 1.25rem;
		line-height: 1.45;
	}

	.ms-onepager .ms-benefits {
		display: flex;
		flex-direction: column;
		gap: 0.875rem;
	}

	.ms-onepager .ms-benefit-item {
		display: grid;
		grid-template-columns: 1.125rem minmax(0, 1fr);
		column-gap: 0.75rem;
		align-items: center;
	}

	.ms-onepager .ms-benefit-item__icon {
		width: 1.125rem;
		margin-block-start: 0;
	}

	.ms-onepager .ms-benefit-item__icon img {
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-benefit-item__text {
		font-size: 1rem;
		line-height: 1.4;
	}


	/* ====================================
	   9. Testimonial
	   ==================================== */

	.ms-onepager .ms-testimonial {
		padding-block:
			var(--ms-space-5)
			var(--ms-onepager-section-space);
	}

	.ms-onepager .ms-testimonial__inner {
		display: grid;
		grid-template-columns: 7.5rem minmax(0, 1fr);
		column-gap: 3.5rem;
		align-items: start;
	}

	.ms-onepager .ms-testimonial__media {
		width: 7.5rem;
	}

	.ms-onepager .ms-testimonial__media img {
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-testimonial__content {
		display: flex;
		flex-direction: column;
		gap: 1.75rem;
	}

	.ms-onepager .ms-testimonial__quote {
		font-size: 1.125rem;
		font-style: italic;
		font-weight: var(--ms-font-weight-semibold);
		line-height: 1.5;
	}

	.ms-onepager .ms-testimonial__author {
		max-width: 35rem;
		font-size: 0.8125rem;
		line-height: 1.4;
	}


	/* ====================================
	   10. Referenzen
	   vollbreit hellblau
	   ==================================== */

	.ms-onepager .ms-projects {
		padding-block: 5rem;
		background-color: var(--ms-color-background-soft);
	}

	.ms-onepager .ms-projects__inner {
		display: flex;
		flex-direction: column;
	}

	.ms-onepager .ms-projects__grid {
		display: grid;
		grid-template-columns:
			repeat(3, minmax(0, 1fr));
		column-gap: var(--ms-space-5);
		row-gap: var(--ms-space-6);
		width: 100%;
	}

	.ms-onepager .ms-home-project {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.ms-onepager .ms-home-project__image {
		width: 100%;
	}

	.ms-onepager .ms-home-project__image
	.elementor-widget-container {
		width: 100%;
		overflow: hidden;
		border: 1px solid var(--ms-color-border-subtle);
		background-color: var(--ms-color-background);
	}
	
	.ms-onepager .ms-home-project__image a {
		display: block;
		width: 100%;
		line-height: 0;
	}

	.ms-onepager .ms-home-project__image img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1921 / 1081;
		object-fit: cover;
	}

	.ms-onepager .ms-home-project__title {
		margin-block-start: 0.75rem;
	}

	.ms-onepager .ms-home-project__title
	.elementor-heading-title {
		font-size: 0.9375rem;
		line-height: 1.25;
	}

	.ms-onepager .ms-home-project__meta {
		margin-block-start: 0.25rem;
		font-size: var(--ms-onepager-font-meta);
		line-height: 1.35;
	}


	/* ====================================
	   11. About
	   ==================================== */

	.ms-onepager .ms-about {
		padding-block: 6.5rem;
	}

	.ms-onepager .ms-about__inner {
		display: flex;
		flex-direction: column;
	}

	.ms-onepager .ms-about__headline-row {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--ms-space-6);
		align-items: end;
		margin-block-end: var(--ms-space-5);
	}

	.ms-onepager .ms-about__headline-row
	.elementor-widget-heading {
		align-self: end;
	}

	.ms-onepager .ms-about__headline-row
	.elementor-heading-title {
		max-width: 43rem;
		font-size: var(--ms-onepager-font-h2);
		line-height: 1.15;
	}

	.ms-onepager .ms-about__portrait {
		width: 10rem;
	}

	.ms-onepager .ms-about__portrait img {
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-about__intro {
		margin-block-end: var(--ms-space-6);
	}

	.ms-onepager .ms-about__intro
	.elementor-widget-text-editor {
		font-size: 1.125rem;
		line-height: 1.55;
	}

	.ms-onepager .ms-about__points {
		display: grid;
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		column-gap: 5rem;
	}

	.ms-onepager .ms-about__column {
		display: flex;
		flex-direction: column;
		gap: 1.75rem;
	}

	.ms-onepager .ms-about__point {
		display: grid;
		grid-template-columns: 1.125rem minmax(0, 1fr);
		column-gap: 1rem;
		align-items: start;
	}

	.ms-onepager .ms-about__point-icon {
		width: 1.125rem;
		margin: 0;
		align-self: start;
		transform: translateY(0.1625rem);
	}

	.ms-onepager .ms-about__point-icon
	.elementor-widget-container {
		line-height: 0;
	}

	.ms-onepager .ms-about__point-icon img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-about__point-text {
		font-size: 1rem;
		line-height: 1.45;
	}


	/* ====================================
	   12. Mit mir arbeiten
	   ==================================== */

	.ms-onepager .ms-working {
		padding-block: 5.5rem;
		background-color: var(--ms-color-background-soft);
	}

	.ms-onepager .ms-working__inner {
		display: grid;
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr);
		column-gap: 6rem;
		align-items: start;
	}

	.ms-onepager .ms-working__intro {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.ms-onepager .ms-working__intro
	> .elementor-widget-heading:first-child
	.elementor-heading-title {
		font-size: var(--ms-onepager-font-h2);
	}

	.ms-onepager .ms-working__lead {
		margin-block-start: 0.75rem;
		font-size: 1.25rem;
		line-height: 1.45;
	}

	.ms-onepager .ms-working__lead
	+ .elementor-widget-heading {
		margin-block-start: var(--ms-space-5);
	}

	.ms-onepager .ms-working__lead
	+ .elementor-widget-heading
	.elementor-heading-title {
		font-size: 1.125rem;
		text-transform: uppercase;
	}

	.ms-onepager .ms-working__result-text {
		margin-block-start: 0.75rem;
		font-size: 1.125rem;
		line-height: 1.55;
	}

	.ms-onepager .ms-working__stages {
		display: flex;
		flex-direction: column;
		gap: 2rem;
		margin-block-start: 3rem;
	}

	.ms-onepager .ms-working-stage {
		display: grid;
		grid-template-columns: 2.75rem minmax(0, 1fr);
		column-gap: 1.25rem;
		align-items: start;
	}

	.ms-onepager .ms-working-stage__icon {
		width: 2.75rem;
	}

	.ms-onepager .ms-working-stage__icon img {
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-working-stage__content {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.ms-onepager .ms-working-stage__content
	.elementor-heading-title {
		font-size: 1.25rem;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.ms-onepager .ms-working-stage__content
	.elementor-widget-text-editor {
		font-size: 1rem;
		line-height: 1.4;
	}


	/* ====================================
	   13. Leistungen
	   ==================================== */

	.ms-onepager .ms-services {
		padding-block: 6.5rem;
	}

	.ms-onepager .ms-services__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.ms-onepager .ms-services__inner
	> .elementor-widget-heading {
		text-align: center;
	}

	.ms-onepager .ms-services__inner
	> .elementor-widget-heading
	.elementor-heading-title {
		font-size: var(--ms-onepager-font-h2);
		text-align: center;
	}

	.ms-onepager .ms-services__list {
		position: relative;

		display: flex;
		flex-direction: column;
		gap: 1.75rem;

		margin-block-start: 3.75rem;
		padding-inline-start: 4rem;
	}

	.ms-onepager .ms-service {
		position: relative;

		display: grid;
		grid-template-columns: 3rem minmax(0, 1fr);
		column-gap: 1.5rem;
		align-items: start;
	}

	.ms-onepager .ms-service::before {
		content: "";
		position: absolute;

		width: 3.25rem;
		inset-inline-start: -3.75rem;
		inset-block-start: 1.4rem;

		border-block-start:
			1px dotted
			var(--ms-color-text);
	}
	
	.ms-onepager .ms-service:not(:last-child)::after {
		content: "";
		position: absolute;

		inset-inline-start: -3.75rem;
		inset-block-start: 1.4rem;

		height: calc(100% + 1.75rem);

		border-inline-start:
			1px dotted
			var(--ms-color-text);
	}

	.ms-onepager .ms-service__icon {
		width: 3rem;
	}

	.ms-onepager .ms-service__icon img {
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-service__content {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
	}

	.ms-onepager .ms-service__content
	.elementor-heading-title {
		font-size: 1.25rem;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.ms-onepager .ms-service__content
	.elementor-widget-text-editor {
		font-size: 0.9375rem;
		line-height: 1.4;
	}


	/* ====================================
	   14. Prozess
	   DOM 1–10
	   Anzeige 1/6, 2/7 ... 5/10
	   ==================================== */

	.ms-onepager .ms-process {
		padding-block:
			5rem
			2rem;
	}

	.ms-onepager .ms-process__inner {
		display: flex;
		flex-direction: column;
	}

	.ms-onepager .ms-process__inner
	> .elementor-widget-heading {
		margin-block-end: 3.5rem;
		text-align: center;
	}

	.ms-onepager .ms-process__inner
	> .elementor-widget-heading
	.elementor-heading-title {
		font-size: var(--ms-onepager-font-h2);
		text-align: center;
		text-transform: uppercase;
	}

	.ms-onepager .ms-process__grid {
		display: grid;

		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		grid-template-rows:
			repeat(5, auto);

		grid-auto-flow: column;

		column-gap: 0.75rem;
		row-gap: 0.75rem;

		width: 100%;
	}

	.ms-onepager .ms-process-step {
		display: grid;
		grid-template-columns: 2.75rem minmax(0, 1fr);
		column-gap: 1.25rem;
		align-items: start;

		min-width: 0;
		padding: 1.5rem 1.75rem;

		background-color: var(--ms-color-background-muted);
	}

	.ms-onepager .ms-process-step__icon {
		width: 2.75rem;
	}

	.ms-onepager .ms-process-step__icon img {
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-process-step__content {
		display: flex;
		flex-direction: column;
		gap: 0.5rem;
	}

	.ms-onepager .ms-process-step__content
	.elementor-heading-title {
		font-size: 1.125rem;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.ms-onepager .ms-process-step__content
	.elementor-widget-text-editor {
		font-size: 0.875rem;
		line-height: 1.45;
	}

	.ms-onepager .ms-process__closing {
		max-width: 50rem;
		margin:
			3.5rem auto
			0;

		text-align: center;
	}

	.ms-onepager .ms-process__closing
	.elementor-widget-text-editor {
		font-size: 1.375rem;
		line-height: 1.3;
		text-align: center;
		text-transform: uppercase;
	}


	/* ====================================
	   15. Finale CTA
	   ==================================== */

	.ms-onepager .ms-final-cta {
		margin-block-start: 7rem;
		background-color: var(--ms-color-background-soft);
	}

	.ms-onepager .ms-final-cta__inner {
		display: flex;
		flex-direction: column;
		align-items: center;

		padding-block-end: 5.5rem;

		text-align: center;
	}

	.ms-onepager .ms-final-cta__portrait {
		width: 10rem;
		margin:
			-5rem auto
			2rem;
	}

	.ms-onepager .ms-final-cta__portrait img {
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-final-cta__inner
	> .elementor-widget-heading
	.elementor-heading-title {
		font-size: var(--ms-onepager-font-h2);
		text-align: center;
		text-transform: uppercase;
	}

	.ms-onepager .ms-final-cta__primary,
	.ms-onepager .ms-final-cta__secondary {
		display: flex;
		flex-direction: column;
		align-items: center;

		width: 100%;
		max-width: 48rem;

		text-align: center;
	}

	.ms-onepager .ms-final-cta__primary {
		margin-block-start: 1rem;
	}

	.ms-onepager .ms-final-cta__secondary {
		margin-block-start: 2.25rem;
	}
	
	.ms-onepager .ms-final-cta__secondary
	.elementor-widget-text-editor a {
		font-weight: var(--ms-font-weight-semibold);
	}

	.ms-onepager .ms-final-cta__primary
	.elementor-widget-text-editor,
	.ms-onepager .ms-final-cta__secondary
	.elementor-widget-text-editor {
		font-size: 1rem;
		line-height: 1.5;
		text-align: center;
	}
	
	.ms-onepager .ms-final-cta__primary
	.elementor-widget-text-editor
	.elementor-widget-container,
	.ms-onepager .ms-final-cta__secondary
	.elementor-widget-text-editor
	.elementor-widget-container {
		width: 85%;
		margin-inline: auto;
	}

	.ms-onepager .ms-final-cta__button {
		width: 20rem;
		max-width: 100%;
		margin-block-start: 1.25rem;
	}

	.ms-onepager .ms-final-cta__button
	.elementor-button-wrapper,
	.ms-onepager .ms-final-cta__button
	.elementor-button {
		width: 100%;
	}

}

/* ========================================
   TABLET
   768–1024 px

   820–1024 px:
   verdichtete Desktop-Komposition

   768–819 px:
   linearisierte Narrow-Tablet-Komposition
   ======================================== */

@media (min-width: 48rem) and (max-width: 64rem) {


	/* ====================================
	   16. Tablet – lokale Grundwerte
	   ==================================== */

	.ms-onepager {
		--ms-onepager-font-body: 1rem;
		--ms-onepager-font-small: 0.8125rem;
		--ms-onepager-font-meta: 0.75rem;

		--ms-onepager-font-h1: 2.25rem;
		--ms-onepager-font-h2: 1.75rem;
		--ms-onepager-font-h3: 1.125rem;

		--ms-onepager-section-space: 4.5rem;
	}


	/* ====================================
	   17. Hero
	   ==================================== */

	.ms-onepager .ms-hero {
		padding-block:
			3.5rem
			var(--ms-onepager-section-space);
	}

	.ms-onepager .ms-hero__inner {
		display: grid;
		grid-template-columns:
			minmax(0, 0.95fr)
			minmax(0, 1.05fr);
		column-gap: 2.5rem;
		align-items: center;
	}

	.ms-onepager .ms-hero__content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.ms-onepager .ms-hero__content
	.elementor-widget-heading {
		width: 100%;
	}

	.ms-onepager .ms-hero__content
	h1.elementor-heading-title {
		max-width: 26rem;

		font-size: var(--ms-onepager-font-h1);
		line-height: 1.05;
		text-transform: uppercase;
		text-wrap: balance;
	}

	.ms-onepager .ms-hero__content
	.elementor-widget-text-editor {
		max-width: 27rem;
		font-size: 1.125rem;
		line-height: 1.42;
	}

	.ms-onepager .ms-hero__media {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
	}

	.ms-onepager .ms-hero__media
	.elementor-widget-image {
		width: 100%;
	}

	.ms-onepager .ms-hero__media img {
		display: block;
		width: 100%;
		height: auto;
		border-radius: var(--ms-radius-medium);
	}


	/* ====================================
	   18. Positionierung
	   ==================================== */

	.ms-onepager .ms-positioning {
		padding-block:
			var(--ms-space-5)
			var(--ms-onepager-section-space);
	}

	.ms-onepager .ms-positioning__inner {
		display: flex;
		flex-direction: column;
	}

	.ms-onepager .ms-positioning__inner
	> .elementor-widget-heading {
		margin-block-end: 2.5rem;
	}

	.ms-onepager .ms-positioning__inner
	> .elementor-widget-heading
	.elementor-heading-title {
		max-width: 42rem;

		font-size: var(--ms-onepager-font-h2);
		line-height: 1.12;
		text-transform: uppercase;
	}

	.ms-onepager .ms-positioning__grid {
		display: grid;
		grid-template-columns:
			minmax(0, 0.95fr)
			minmax(0, 1.05fr);
		column-gap: 2rem;
		align-items: start;
	}

	.ms-onepager .ms-positioning__intro
	.elementor-widget-text-editor {
		font-size: 1.125rem;
		line-height: 1.45;
	}

	.ms-onepager .ms-benefits {
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.ms-onepager .ms-benefit-item {
		display: grid;
		grid-template-columns:
			1.125rem
			minmax(0, 1fr);
		column-gap: 0.75rem;
		align-items: center;
	}

	.ms-onepager .ms-benefit-item__icon {
		width: 1.125rem;
		margin-block-start: 0;
	}

	.ms-onepager .ms-benefit-item__icon img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-benefit-item__text {
		font-size: 0.9375rem;
		line-height: 1.4;
	}


	/* ====================================
	   19. Testimonial
	   ==================================== */

	.ms-onepager .ms-testimonial {
		padding-block:
			var(--ms-space-5)
			var(--ms-onepager-section-space);
	}

	.ms-onepager .ms-testimonial__inner {
		display: grid;
		grid-template-columns:
			6.25rem
			minmax(0, 1fr);
		column-gap: 2.25rem;
		align-items: start;
	}

	.ms-onepager .ms-testimonial__media {
		width: 6.25rem;
	}

	.ms-onepager .ms-testimonial__media img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-testimonial__content {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.ms-onepager .ms-testimonial__quote {
		font-size: 1.0625rem;
		font-style: italic;
		font-weight: var(--ms-font-weight-semibold);
		line-height: 1.5;
	}

	.ms-onepager .ms-testimonial__author {
		max-width: 32rem;
		font-size: 0.78125rem;
		line-height: 1.4;
	}


	/* ====================================
	   20. Referenzen
	   2 Spalten
	   ==================================== */

	.ms-onepager .ms-projects {
		padding-block: 4rem;
		background-color: var(--ms-color-background-soft);
	}

	.ms-onepager .ms-projects__inner {
		display: flex;
		flex-direction: column;
	}

	.ms-onepager .ms-projects__grid {
		display: grid;
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
		row-gap: 2.25rem;
		width: 100%;
	}

	.ms-onepager .ms-home-project {
		display: flex;
		flex-direction: column;
		min-width: 0;
	}

	.ms-onepager .ms-home-project__image {
		width: 100%;
	}

	.ms-onepager .ms-home-project__image
	.elementor-widget-container {
		width: 100%;
		overflow: hidden;
		border: 1px solid var(--ms-color-border-subtle);
		background-color: var(--ms-color-background);
	}

	.ms-onepager .ms-home-project__image a {
		display: block;
		width: 100%;
		line-height: 0;
	}

	.ms-onepager .ms-home-project__image img {
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 1921 / 1081;
		object-fit: cover;
	}

	.ms-onepager .ms-home-project__title {
		margin-block-start: 0.75rem;
	}

	.ms-onepager .ms-home-project__title
	.elementor-heading-title {
		font-size: 0.9375rem;
		line-height: 1.25;
	}

	.ms-onepager .ms-home-project__meta {
		margin-block-start: 0.25rem;
		font-size: var(--ms-onepager-font-meta);
		line-height: 1.35;
	}


	/* ====================================
	   21. About
	   ==================================== */

	.ms-onepager .ms-about {
		padding-block: 5rem;
	}

	.ms-onepager .ms-about__inner {
		display: flex;
		flex-direction: column;
	}

	.ms-onepager .ms-about__headline-row {
		display: grid;
		grid-template-columns:
			minmax(0, 1fr)
			auto;
		column-gap: 2rem;
		align-items: end;
		margin-block-end: 2rem;
	}

	.ms-onepager .ms-about__headline-row
	.elementor-widget-heading {
		align-self: end;
	}

	.ms-onepager .ms-about__headline-row
	.elementor-heading-title {
		max-width: 38rem;
		font-size: var(--ms-onepager-font-h2);
		line-height: 1.15;
	}

	.ms-onepager .ms-about__portrait {
		width: 8.5rem;
	}

	.ms-onepager .ms-about__portrait img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-about__intro {
		margin-block-end: 2.5rem;
	}

	.ms-onepager .ms-about__intro
	.elementor-widget-text-editor {
		font-size: 1.0625rem;
		line-height: 1.5;
	}

	.ms-onepager .ms-about__points {
		display: grid;
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
		column-gap: 3rem;
	}

	.ms-onepager .ms-about__column {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.ms-onepager .ms-about__point {
		display: grid;
		grid-template-columns:
			1.125rem
			minmax(0, 1fr);
		column-gap: 0.875rem;
		align-items: start;
	}

	.ms-onepager .ms-about__point-icon {
		width: 1.125rem;
		margin: 0;
		align-self: start;
		transform: translateY(0.1625rem);
	}

	.ms-onepager .ms-about__point-icon
	.elementor-widget-container {
		line-height: 0;
	}

	.ms-onepager .ms-about__point-icon img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-about__point-text {
		font-size: 0.9375rem;
		line-height: 1.45;
	}


	/* ====================================
	   22. Mit mir arbeiten
	   ==================================== */

	.ms-onepager .ms-working {
		padding-block: 4.5rem;
		background-color: var(--ms-color-background-soft);
	}

	.ms-onepager .ms-working__inner {
		display: grid;
		grid-template-columns:
			minmax(0, 1fr)
			minmax(0, 1fr);
		column-gap: 3.5rem;
		align-items: start;
	}

	.ms-onepager .ms-working__intro {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.ms-onepager .ms-working__intro
	> .elementor-widget-heading:first-child
	.elementor-heading-title {
		font-size: var(--ms-onepager-font-h2);
	}

	.ms-onepager .ms-working__lead {
		margin-block-start: 0.75rem;
		font-size: 1.125rem;
		line-height: 1.45;
	}

	.ms-onepager .ms-working__lead
	+ .elementor-widget-heading {
		margin-block-start: 2rem;
	}

	.ms-onepager .ms-working__lead
	+ .elementor-widget-heading
	.elementor-heading-title {
		font-size: 1.0625rem;
		text-transform: uppercase;
	}

	.ms-onepager .ms-working__result-text {
		margin-block-start: 0.625rem;
		font-size: 1rem;
		line-height: 1.5;
	}

	.ms-onepager .ms-working__stages {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
		margin-block-start: 2rem;
	}

	.ms-onepager .ms-working-stage {
		display: grid;
		grid-template-columns:
			2.5rem
			minmax(0, 1fr);
		column-gap: 1rem;
		align-items: start;
	}

	.ms-onepager .ms-working-stage__icon {
		width: 2.5rem;
	}

	.ms-onepager .ms-working-stage__icon img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-working-stage__content {
		display: flex;
		flex-direction: column;
		gap: 0.25rem;
	}

	.ms-onepager .ms-working-stage__content
	.elementor-heading-title {
		font-size: 1.125rem;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.ms-onepager .ms-working-stage__content
	.elementor-widget-text-editor {
		font-size: 0.9375rem;
		line-height: 1.4;
	}


	/* ====================================
	   23. Leistungen
	   ==================================== */

	.ms-onepager .ms-services {
		padding-block: 5rem;
	}

	.ms-onepager .ms-services__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.ms-onepager .ms-services__inner
	> .elementor-widget-heading {
		text-align: center;
	}

	.ms-onepager .ms-services__inner
	> .elementor-widget-heading
	.elementor-heading-title {
		font-size: var(--ms-onepager-font-h2);
		text-align: center;
	}

	.ms-onepager .ms-services__list {
		position: relative;

		display: flex;
		flex-direction: column;
		gap: 1.5rem;

		margin-block-start: 3rem;
		padding-inline-start: 3.5rem;
	}

	.ms-onepager .ms-service {
		position: relative;

		display: grid;
		grid-template-columns:
			2.75rem
			minmax(0, 1fr);
		column-gap: 1.25rem;
		align-items: start;
	}

	.ms-onepager .ms-service::before {
		content: "";
		position: absolute;

		width: 2.75rem;
		inset-inline-start: -3.25rem;
		inset-block-start: 1.3rem;

		border-block-start:
			1px dotted
			var(--ms-color-text);
	}

	.ms-onepager .ms-service:not(:last-child)::after {
		content: "";
		position: absolute;

		inset-inline-start: -3.25rem;
		inset-block-start: 1.3rem;

		height: calc(100% + 1.5rem);

		border-inline-start:
			1px dotted
			var(--ms-color-text);
	}

	.ms-onepager .ms-service__icon {
		width: 2.75rem;
	}

	.ms-onepager .ms-service__icon img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-service__content {
		display: flex;
		flex-direction: column;
		gap: 0.3125rem;
	}

	.ms-onepager .ms-service__content
	.elementor-heading-title {
		font-size: 1.125rem;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.ms-onepager .ms-service__content
	.elementor-widget-text-editor {
		font-size: 0.875rem;
		line-height: 1.4;
	}


	/* ====================================
	   24. Prozess
	   Tablet linear 1–10
	   ==================================== */

	.ms-onepager .ms-process {
		padding-block:
			4.5rem
			1.5rem;
	}

	.ms-onepager .ms-process__inner {
		display: flex;
		flex-direction: column;
	}

	.ms-onepager .ms-process__inner
	> .elementor-widget-heading {
		margin-block-end: 2.75rem;
		text-align: center;
	}

	.ms-onepager .ms-process__inner
	> .elementor-widget-heading
	.elementor-heading-title {
		font-size: var(--ms-onepager-font-h2);
		text-align: center;
		text-transform: uppercase;
	}

	.ms-onepager .ms-process__grid {
		display: grid;

		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: none;
		grid-auto-flow: row;
		grid-auto-rows: auto;

		column-gap: 0;
		row-gap: 0.75rem;

		width: 100%;
		max-width: 52rem;
		margin-inline: auto;
	}

	.ms-onepager .ms-process-step {
		display: grid;
		grid-template-columns:
			2.5rem
			minmax(0, 1fr);
		column-gap: 1.25rem;
		align-items: start;

		min-width: 0;
		padding: 1.25rem 1.5rem;

		background-color: var(--ms-color-background-muted);
	}

	.ms-onepager .ms-process-step__icon {
		width: 2.5rem;
	}

	.ms-onepager .ms-process-step__icon img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-process-step__content {
		display: flex;
		flex-direction: column;
		gap: 0.375rem;
	}

	.ms-onepager .ms-process-step__content
	.elementor-heading-title {
		font-size: 1.0625rem;
		line-height: 1.2;
		text-transform: uppercase;
	}

	.ms-onepager .ms-process-step__content
	.elementor-widget-text-editor {
		font-size: 0.875rem;
		line-height: 1.45;
	}

	.ms-onepager .ms-process__closing {
		max-width: 44rem;
		margin:
			3rem auto
			0;

		text-align: center;
	}

	.ms-onepager .ms-process__closing
	.elementor-widget-text-editor {
		font-size: 1.25rem;
		line-height: 1.3;
		text-align: center;
		text-transform: uppercase;
	}


	/* ====================================
	   25. Finale CTA
	   ==================================== */

	.ms-onepager .ms-final-cta {
		margin-block-start: 6rem;
		background-color: var(--ms-color-background-soft);
	}

	.ms-onepager .ms-final-cta__inner {
		display: flex;
		flex-direction: column;
		align-items: center;

		padding-block-end: 4.5rem;

		text-align: center;
	}

	.ms-onepager .ms-final-cta__portrait {
		width: 8.5rem;
		margin:
			-4.25rem auto
			1.75rem;
	}

	.ms-onepager .ms-final-cta__portrait img {
		display: block;
		width: 100%;
		height: auto;
	}

	.ms-onepager .ms-final-cta__inner
	> .elementor-widget-heading
	.elementor-heading-title {
		font-size: var(--ms-onepager-font-h2);
		text-align: center;
		text-transform: uppercase;
	}

	.ms-onepager .ms-final-cta__primary,
	.ms-onepager .ms-final-cta__secondary {
		display: flex;
		flex-direction: column;
		align-items: center;

		width: 100%;
		max-width: 42rem;

		text-align: center;
	}

	.ms-onepager .ms-final-cta__primary {
		margin-block-start: 1rem;
	}

	.ms-onepager .ms-final-cta__secondary {
		margin-block-start: 2rem;
	}

	.ms-onepager .ms-final-cta__secondary
	.elementor-widget-text-editor a {
		font-weight: var(--ms-font-weight-semibold);
	}

	.ms-onepager .ms-final-cta__primary
	.elementor-widget-text-editor,
	.ms-onepager .ms-final-cta__secondary
	.elementor-widget-text-editor {
		font-size: 0.9375rem;
		line-height: 1.5;
		text-align: center;
	}

	.ms-onepager .ms-final-cta__primary
	.elementor-widget-text-editor
	.elementor-widget-container,
	.ms-onepager .ms-final-cta__secondary
	.elementor-widget-text-editor
	.elementor-widget-container {
		width: 90%;
		margin-inline: auto;
	}

	/* Buttonbreite entspricht Textblockbreite */
	.ms-onepager .ms-final-cta__button {
		width: 90%;
		max-width: 100%;
		margin:
			1.25rem auto
			0;
	}

	.ms-onepager .ms-final-cta__button
	.elementor-button-wrapper,
	.ms-onepager .ms-final-cta__button
	.elementor-button {
		width: 100%;
	}

}


/* ========================================
   NARROW TABLET
   768–819 px

   Große Zweispalten-Kompositionen
   werden linearisiert.
   ======================================== */

@media (min-width: 48rem) and (max-width: 51.1875rem) {


	/* ====================================
	   26. Hero
	   ==================================== */

	.ms-onepager .ms-hero {
		padding-block:
			3.25rem
			var(--ms-onepager-section-space);
	}

	.ms-onepager .ms-hero__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2.5rem;
		align-items: stretch;
	}

	.ms-onepager .ms-hero__content {
		width: 100%;
	}

	.ms-onepager .ms-hero__content
	h1.elementor-heading-title {
		width: 100%;
		max-width: none;
	}

	.ms-onepager .ms-hero__content
	.elementor-widget-text-editor {
		width: 100%;
		max-width: 42rem;
	}

	.ms-onepager .ms-hero__media {
		width: 100%;
		justify-content: flex-start;
	}

	.ms-onepager .ms-hero__media
	.elementor-widget-image {
		width: 100%;
	}


	/* ====================================
	   27. Positionierung
	   ==================================== */

	.ms-onepager .ms-positioning__grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		row-gap: 2rem;
	}

	.ms-onepager .ms-positioning__intro
	.elementor-widget-text-editor {
		max-width: 42rem;
	}

	.ms-onepager .ms-benefits {
		max-width: 42rem;
	}


	/* ====================================
	   28. Testimonial
	   ==================================== */

	.ms-onepager .ms-testimonial__inner {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.ms-onepager .ms-testimonial__media {
		width: 6.25rem;
	}

	.ms-onepager .ms-testimonial__content {
		width: 100%;
		max-width: none;
	}

	.ms-onepager .ms-testimonial__author {
		max-width: 32rem;
	}


	/* ====================================
	   29. About
	   ==================================== */

	.ms-onepager .ms-about__headline-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 1.5rem;

		margin-block-end: 2rem;
	}

	.ms-onepager .ms-about__headline-row
	.elementor-widget-heading {
		width: 100%;
		align-self: auto;
	}

	.ms-onepager .ms-about__headline-row
	.elementor-heading-title {
		max-width: 38rem;
	}

	.ms-onepager .ms-about__portrait {
		width: 8rem;
	}

	.ms-onepager .ms-about__points {
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.ms-onepager .ms-about__column {
		width: 100%;
		gap: 1.5rem;
	}


	/* ====================================
	   30. Mit mir arbeiten
	   ==================================== */

	.ms-onepager .ms-working__inner {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 2.75rem;
	}

	.ms-onepager .ms-working__intro {
		width: 100%;
		max-width: 42rem;
	}

	.ms-onepager .ms-working__stages {
		width: 100%;
		max-width: 42rem;

		margin-block-start: 0;
	}


	/* ====================================
	   31. Leistungen
	   leichte horizontale Verdichtung
	   ==================================== */

	.ms-onepager .ms-services__list {
		padding-inline-start: 3.25rem;
	}

	.ms-onepager .ms-service::before {
		width: 2.5rem;
		inset-inline-start: -3rem;
	}

	.ms-onepager .ms-service:not(:last-child)::after {
		inset-inline-start: -3rem;
	}


	/* ====================================
	   32. Prozess
	   ==================================== */

	.ms-onepager .ms-process__grid {
		max-width: none;
	}


	/* ====================================
	   33. Finale CTA
	   ==================================== */

	.ms-onepager .ms-final-cta__primary,
	.ms-onepager .ms-final-cta__secondary {
		max-width: 40rem;
	}

}