#Atemreise div.media img {
  width:200px !important;
  aspect-ratio: unset !important;
}


	:root {
		--ht-bg:        #2e2622;
		--ht-text:      #ede6dc;
		--ht-muted:     #a89684;
		--ht-rule:      rgba(237, 230, 220, .18);
		--ht-icon:      #c9b7a2;

		--ht-col-max:   34rem;
		--ht-gap-icon:  1.5rem;
		--ht-row-pad:   1.5rem;
	}


	.haltung {
		padding: 6rem 1.5rem 7rem;
	}

	.haltung__inner {
		max-width: var(--ht-col-max);
		margin: 0 auto;
	}

	.haltung__label {
		margin: 0 0 1.75rem;
		font-size: .7rem;
		font-weight: 400;
		letter-spacing: .25em;
		text-transform: uppercase;
		color: var(--ht-muted);
	}

	.haltung__title {
		margin: 0 0 3.5rem;
		font-size: clamp(2rem, 5vw, 3.25rem);
		font-weight: 400;
		line-height: 1.15;
	}

	.haltung__list {
		margin: 0;
		padding: 0;
		list-style: none;
		border-top: 1px solid var(--ht-rule);
	}

	.haltung__item {
		display: flex;
		align-items: center;
		gap: var(--ht-gap-icon);
		padding: var(--ht-row-pad) 0;
		border-bottom: 1px solid var(--ht-rule);
	}

	.haltung__icon {
		flex: 0 0 auto;
		width: 2rem;
		height: 2rem;
		color: var(--ht-icon);
	}

	.haltung__icon svg {
		display: block;
		width: 100%;
		height: 100%;
	}

	.haltung__text {
		font-size: clamp(1.15rem, 2.5vw, 1.4rem);
		line-height: 1.35;
	}

	@media (max-width: 30rem) {
		:root {
			--ht-gap-icon: 1.1rem;
			--ht-row-pad:  1.15rem;
		}

		.haltung { padding: 4rem 1.25rem 5rem; }
		.haltung__icon { width: 1.65rem; height: 1.65rem; }
	}





/* ============================================================
   ablauf-block.css
   Ablauf-Sektion "Wie eine Atemreise abläuft"
   Soulmate Breathwork – Simona Otto
   Version: 1.1 | 2026-08-09
   Änderung ggü. 1.0: Atemkurve atmet dauerhaft (Höhe erweitert,
   Kurvenform und Punkte werden per JS je Frame gesetzt).
   Eigenständiger Block, alle Werte als Custom Properties
   auf .ablauf gescopet (kollidiert nicht mit globalem CSS).
   ============================================================ */

.ablauf {
	/* --- Farben (aus dem bestehenden Design abgeleitet) --- */
	--ab-sand:        #EAE5DA;
	--ab-sand-tief:   #E2DCCE;
	--ab-tinte:       #241F1A;
	--ab-text:        #4A443C;
	--ab-gedeckt:     #8E8676;
	--ab-linie:       #C7BFAF;
	--ab-akzent:      #6E7A63;

	/* --- Maße --- */
	--ab-max:         1200px;
	--ab-kurve-h:     120px;
	--ab-punkt:       11px;

	/* --- Atemrhythmus (wird auch vom Script gelesen) --- */
	--ab-ein:         4s;
	--ab-halten:      1s;
	--ab-aus:         6s;
	--ab-pause:       1.5s;

	position: relative;
	background: var(--ab-sand);
	color: var(--ab-text);
	font-family: var(--ab-font-sans);
	padding: clamp(4.5rem, 9vw, 8rem) clamp(1.5rem, 5vw, 4rem);
	overflow: hidden;
}

.ablauf__inner {
	max-width: var(--ab-max);
	margin-inline: auto;
}

/* ---------- Kopfbereich ---------- */

.ablauf__eyebrow {
	margin: 0 0 1.25rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--ab-gedeckt);
}

.ablauf__lead {
	margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
	max-width: 46ch;
	font-size: clamp(1.02rem, 1.4vw, 1.2rem);
	line-height: 1.65;
}

/* ---------- Atemkurve (Signature-Element) ---------- */

.ablauf__kurve {
	position: relative;
	height: var(--ab-kurve-h);
	margin-top: clamp(3rem, 6vw, 5rem);
}

.ablauf__kurve svg {
	display: block;
	width: 100%;
	height: var(--ab-kurve-h);
}

.ablauf__pfad {
	fill: none;
	stroke: var(--ab-linie);
	stroke-width: 1.25;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

/* Zweite, sehr blasse Linie: bleibt in Ruhelage stehen und macht
   die Bewegung der atmenden Kurve sichtbar. */
.ablauf__pfad--ruhe {
	stroke: var(--ab-linie);
	opacity: 0.35;
}

/* Punkte sitzen exakt auf der Kurve (y-Wert = Pixel, da SVG-Höhe fix) */
.ablauf__punkt {
	position: absolute;
	width: var(--ab-punkt);
	height: var(--ab-punkt);
	margin-left: calc(var(--ab-punkt) / -2);
	margin-top: calc(var(--ab-punkt) / -2);
	border-radius: 50%;
	background: var(--ab-sand);
	border: 1.5px solid var(--ab-akzent);
	left: var(--ab-x);
	top: var(--ab-y);
	will-change: top;
}

.ablauf__punkt::after {
	content: "";
	position: absolute;
	inset: 2.5px;
	border-radius: 50%;
	background: var(--ab-akzent);
	opacity: 0;
	transition: opacity 0.5s ease;
}

.ablauf__punkt--aktiv::after { opacity: 1; }

/* ---------- Schritte ---------- */

.ablauf__steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(2rem, 3vw, 3rem);
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
	counter-reset: ablauf;
}

.ablauf__step {
	position: relative;
	counter-increment: ablauf;
}

.ablauf__step::before {
	content: "0" counter(ablauf);
	display: block;
	margin-bottom: 0.9rem;
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.24em;
	color: var(--ab-gedeckt);
}

.ablauf__step h3 {
	margin: 0 0 0.7rem;
	font-family: var(--ab-font-serif);
	font-weight: 500;
	font-size: clamp(1.3rem, 1.7vw, 1.55rem);
	letter-spacing: 0.01em;
	color: var(--ab-tinte);
}

.ablauf__step p {
	margin: 0;
	font-size: 0.97rem;
	line-height: 1.72;
	text-wrap: pretty;
}

/* ---------- Reveal beim Scrollen ---------- */

.ablauf__step,
.ablauf__punkt {
	opacity: 0;
	transition: opacity 0.7s ease var(--ab-delay, 0s);
}

.ablauf__step {
	transform: translateY(14px);
	transition:
		opacity 0.7s ease var(--ab-delay, 0s),
		transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) var(--ab-delay, 0s);
}

.ablauf.is-sichtbar .ablauf__step,
.ablauf.is-sichtbar .ablauf__punkt {
	opacity: 1;
	transform: translateY(0);
}

/* ---------- Tablet: 2 Spalten, Kurve entfällt ---------- */

@media (max-width: 999px) {
	.ablauf__kurve { display: none; }

	.ablauf__steps {
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(2.25rem, 5vw, 3.25rem);
		margin-top: clamp(3rem, 6vw, 4.5rem);
	}

	.ablauf__step {
		padding-top: 1.5rem;
		border-top: 1px solid var(--ab-linie);
	}
}

/* ---------- Mobil: eine Spalte mit senkrechter Atemlinie ---------- */

@media (max-width: 639px) {
	.ablauf__steps {
		grid-template-columns: 1fr;
		gap: 0;
		padding-left: 1.9rem;
	}

	.ablauf__step {
		padding: 0 0 2.4rem 0;
		border-top: 0;
	}

	.ablauf__step:last-child { padding-bottom: 0; }

	/* Verbindungslinie */
	.ablauf__step::after {
		content: "";
		position: absolute;
		left: -1.9rem;
		top: 0.55rem;
		bottom: -0.3rem;
		width: 1px;
		background: var(--ab-linie);
	}

	.ablauf__step:last-child::after { display: none; }

	/* Punkt auf der Linie */
	.ablauf__step::before {
		position: relative;
		margin-bottom: 0.75rem;
	}

	.ablauf__step h3::before {
		content: "";
		position: absolute;
		left: calc(-1.9rem - 5px);
		top: 0.3rem;
		width: var(--ab-punkt);
		height: var(--ab-punkt);
		border-radius: 50%;
		background: var(--ab-akzent);
		border: 2.5px solid var(--ab-sand);
		box-shadow: 0 0 0 1.5px var(--ab-akzent);
	}
}

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
	.ablauf__step,
	.ablauf__punkt {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.ablauf__punkt::after { opacity: 1; }
	.ablauf__pfad { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
	.ablauf__pfad--ruhe { display: none; }
}