/*
 * Pferdetherapie Hanisch
 * Individueller Seiteninhalt | Über mich
 * Seitenspezifische Inhalte, Layouts und deren Animationen.
 */

 /* Über mich: ausschließlich individueller Inhalt unter der bestehenden Abschnittsüberschrift. */


/* Gemeinsame Inhaltsgrundlagen stehen in styles.css. */


/* Mein fachlicher Weg: Box, Kopfgestaltung und Ausbildungszeilen. */
.about-training-editorial li {
	display: grid;
	grid-template-columns: 65px 1fr;
	gap: 20px;
	padding: 19px 0;
	border-bottom: 1px solid var(--line);
	align-items: start;
}

.about-training-editorial {
	display: grid;
	grid-template-columns: .8fr 1.25fr;
	gap: 80px;
	margin-top: 65px;
	padding: 40px;
	background: var(--bg-alt);
	border: 1px solid rgba(192, 151, 94, .16);
	border-radius: 4px;
}

.about-training-editorial>div>p:last-child {
	margin-top: 20px;
	color: var(--muted);
	font-size: .82rem;
}

.about-training-editorial ol {
	border-top: 1px solid var(--line);
	padding: 0;
	list-style: none;
}

.about-training-editorial li>span {
	color: var(--olive);
	font: 500 1.9rem/1.2 "Cormorant Local", Georgia, serif;
}

.about-training-editorial li>p {
	padding-top: 8px;
	font-size: .82rem;
}

.about-editorial .about-training-editorial>div>.content-eyebrow {
	margin: 0 0 8px;
	color: var(--beige);
	font-size: var(--content-eyebrow-size);
	line-height: normal;
	font-weight: 500;
	letter-spacing: .04em;
}

.about-editorial .about-training-editorial h4 {
	margin: 0;
	color: var(--text);
	font-family: "Cormorant Local", Georgia, serif;
	font-size: var(--content-heading-size);
	line-height: 1.05;
	font-weight: 400;
	letter-spacing: normal;
}

.about-editorial .about-training-editorial>div>p:last-child {
	margin: 0 0 20px;
	color: var(--text);
	font-family: "Montserrat Local", Montserrat, Arial, sans-serif;
	font-size: var(--about-text-size);
	line-height: var(--about-text-leading);
	font-weight: 400;
}

.about-training-editorial .about-training-rule {
	margin: 18px 0 30px;
}

/* Sichtbare Oberkante der höheren Jahresziffer an die Beschreibung angleichen. */
.about-training-editorial li>.about-training-year--tall {
	padding-top: 8px;
}

@media (max-width:1023px) {
	.about-training-editorial {
		gap: 35px;
		padding: 30px;
	}

}

@media (max-width:700px) {
	.about-training-editorial {
		grid-template-columns: 1fr;
		gap: 25px;
		padding: 26px 22px;
		margin-top: 35px;
	}

	.about-training-editorial li {
		grid-template-columns: 50px 1fr;
		gap: 28px;
	}

}

@media(max-width:1180px) {
	.about-editorial .about-training-editorial>div>p:last-child {
		margin-bottom: 18px;
	}

}

@media(max-width:700px) {
	.about-training-editorial .about-training-rule {
		margin-bottom: 25px;
	}

}


/* Ergänzter individueller Seiteninhalt. */
/* Über mich: Bildauftakt, persönliche Haltung, Erzählung und chronologischer Rand. */
.about-opening {
	display: grid;
	grid-template-columns: 1.04fr 1fr;
	gap: 65px;
	align-items: center;
}

.about-opening figure {
	min-width: 0;
}

.about-opening img {
	width: 100%;
	height: auto;
	aspect-ratio: 1.03;
	object-fit: cover;
	object-position: 42% center;
}

.about-opening figcaption {
	padding-top: 13px;
	color: var(--muted);
	font-size: .65rem;
	letter-spacing: .06em;
}


.about-opening>div>p:last-child {
	margin-top: 18px;
}

/* Meine Haltung: Layout, Beschriftung und responsive Varianten. */
.about-perspective {
	display: grid;
	grid-template-columns: .5fr 1.5fr;
	gap: 45px;
	align-items: start;
	margin: 70px 0 60px;
	padding: 32px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}

.about-perspective .content-eyebrow {
	padding-top: 12px;
	color: var(--beige);
}

.about-perspective>p {
	font: 500 var(--content-heading-size)/1.14 "Cormorant Local", Georgia, serif;
	color: var(--olive);
}

.about-perspective > p > em {
	display: block;
	margin-top: .57em;
}

@media (max-width:700px) {
	.about-perspective {
		grid-template-columns: 1fr;
		gap: 10px;
		margin: 38px 0 35px;
		padding: 25px 0;
	}

	.about-perspective .content-eyebrow {
		padding: 0;
		margin-bottom: 5px;
	}
}

@media (min-width: 701px) {
	.about-perspective {
		grid-template-columns: 140px minmax(0, 1fr);
		gap: 32px;
		margin: 32px 0;
		padding: 24px 0;
	}

	.about-perspective + .about-training-editorial {
		margin-top: 32px;
	}

	.about-perspective .content-eyebrow {
		padding-top: 3px;
		margin-top: 0;
	}
}


.about-story-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 75px;
}

.about-story-grid h4 {
	margin-bottom: 23px;
	max-width: 24ch;
}

.about-story-grid p+p {
	margin-top: 20px;
}


@media (max-width:1023px) {
	.about-opening {
		gap: 35px;
	}

	.about-story-grid {
		gap: 35px;
	}

	
}

@media (max-width:700px) {

	.about-opening,
.about-story-grid {
		grid-template-columns: 1fr;
		gap: 25px;
	}

	.about-opening {
		gap: 27px;
	}

	.about-opening img {
		aspect-ratio: 1.18;
	}


.about-story-grid {
		gap: 34px;
	}


}

/* Einstiegsbox und äußere Abstände wie auf Indikation, Preise und Kontakt. */
.about-editorial {
	max-width: none;
	margin: 0;
	--about-text-size: var(--content-text-size);
	--about-text-leading: var(--content-text-leading);
}

.about-editorial .about-opening-box {
	display: block;
	padding: 30px;
	border: 1px solid rgba(192, 151, 94, .16);
	border-radius: 4px;
	background: rgba(238, 234, 230, .58);
	text-align: center;
}

.about-editorial .about-box-eyebrow {
	max-width: none;
	margin: 0 0 8px;
	color: var(--beige);
	font-size: var(--content-eyebrow-size);
	line-height: 1.8;
	font-weight: 500;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.about-editorial .about-box-heading h3 {
	font-size: var(--content-heading-size);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: normal;
	color: var(--text);
}

.about-heading-rule {
	width: 56px;
	height: 1px;
	margin: 18px auto 0;
	background: var(--beige);
}

.about-opening-copy {
	margin-top: 30px;
}

.about-editorial .about-opening-copy p {
	max-width: 65ch;
	margin: 0 auto;
	font-family: "Montserrat Local", Montserrat, Arial, sans-serif;
	font-size: var(--about-text-size);
	line-height: var(--about-text-leading);
	font-weight: 400;
	color: var(--text);
}

.about-editorial .about-opening-copy p+p {
	margin-top: 18px;
}


@media(max-width:700px) {
	

	.about-editorial .about-opening-box {
		padding: 24px 20px;
	}

	.about-opening-copy {
		margin-top: 25px;
	}
}

/* Persönliche Erfahrungsberichte als Karten innerhalb der Einstiegsbox. */
.about-opening-box .about-story-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 30px;
}

.about-story-card {
	min-width: 0;
	padding: 26px 24px;
	border-radius: 2px;
	background: rgba(255, 255, 255, .67);
	text-align: left;
}

.about-editorial .about-story-card h4 {
	max-width: none;
	margin: 0 0 16px;
	font: 500 1.7rem/1.15 "Cormorant Local", Georgia, serif;
	color: var(--olive);
}

.about-editorial .about-story-card p {
	max-width: none;
	margin: 0;
	font-family: "Montserrat Local", Montserrat, Arial, sans-serif;
	font-size: var(--about-text-size);
	line-height: var(--about-text-leading);
	font-weight: 400;
	color: var(--text);
}

.about-editorial .about-story-card p+p {
	margin-top: 18px;
}

@media(max-width:700px) {
	.about-opening-box .about-story-grid {
		grid-template-columns: 1fr;
	}

	.about-story-card {
		padding: 24px 20px;
	}

	.about-editorial .about-story-card h4 {
		font-size: 1.5rem;
	}
}

/* Ausbildungsbox: Kopfbereich wie die Vorschau, Tabelle unverändert bis auf Zentrierung. */


/* Boxen wie auf Preise; Themenkarten mit kürzerer, dezenter Bewegung. */
@media(max-width:700px) {
	.about-editorial :is(.about-opening-box, .about-training-editorial).reveal {
		opacity: 0;
		transform: translateY(48px);
		transition: opacity .6s ease, transform .6s ease;
	}

	.about-editorial :is(.about-opening-box, .about-training-editorial).reveal.is-visible {
		opacity: 1;
		transform: translateY(0);
	}
}

.about-editorial .about-story-card.reveal {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}

.about-editorial .about-story-card.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media(min-width:701px) {
	.about-story-card.reveal:nth-child(2n) {
		transition-delay: .08s;
	}
}

@media(prefers-reduced-motion:reduce) {
	.about-editorial :is(.about-opening-box, .about-training-editorial, .about-story-card).reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

html:not([data-reveal-state]) .about-editorial :is(.about-opening-box, .about-training-editorial, .about-story-card).reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Nur Über mich: breiterer Hero-Einleitungstext auf Smartphones. */
@media (max-width: 700px) {
	.page-hero-lead.about-hero-lead {
		max-width: 175px;
	}
}