/**
 * Warme, persönliche Gestaltung der Seite „Über Alice“.
 */

.ha-about-page {
	--ha-about-ink: #29372f;
	--ha-about-deep: #31483b;
	--ha-about-cream: #f7f1e7;
	--ha-about-sand: #eadbc8;
	--ha-about-sage: #dce6da;
	--ha-about-rose: #b87566;
	--ha-about-white: #fffdf9;
	--ha-about-shadow:
		0 22px 58px rgba(39, 54, 46, 0.12);

	background:
		linear-gradient(
			180deg,
			#faf7f2 0,
			#fffdf9 280px,
			#fffdf9 100%
		);
	color: var(--ha-about-ink);
	padding:
		clamp(24px, 4vw, 58px)
		0
		clamp(60px, 8vw, 110px);
}

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

.ha-about-wrap {
	width: min(1180px, calc(100% - 32px));
	margin-inline: auto;
}

.ha-about-language-nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 18px;
	font-size: 0.83rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ha-about-language-nav a {
	color: var(--ha-about-deep);
	text-decoration: none;
}

.ha-about-page a {
	color: var(--ha-about-deep);
	font-weight: 700;
	text-decoration-color: rgba(49, 72, 59, 0.4);
	text-underline-offset: 4px;
}

.ha-about-page a:hover,
.ha-about-page a:focus-visible {
	color: var(--ha-about-rose);
}

.ha-about-page p {
	line-height: 1.75;
}

.ha-about-page h1,
.ha-about-page h2,
.ha-about-page h3 {
	color: var(--ha-about-deep);
	font-family: Georgia, "Times New Roman", serif;
	text-wrap: balance;
}

.ha-about-eyebrow {
	margin: 0 0 12px;
	color: var(--ha-about-rose);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	line-height: 1.4;
	text-transform: uppercase;
}

.ha-about-hero {
	display: grid;
	grid-template-columns:
		minmax(0, 1.42fr)
		minmax(310px, 0.78fr);
	overflow: hidden;
	border: 1px solid rgba(49, 72, 59, 0.12);
	border-radius: 34px;
	background: var(--ha-about-white);
	box-shadow: var(--ha-about-shadow);
}

.ha-about-hero__media {
	position: relative;
	min-width: 0;
	background: #d5ded2;
}

.ha-about-hero__media picture {
	display: block;
	height: 100%;
}

.ha-about-hero__image {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 590px;
	object-fit: cover;
}

.ha-about-hero__caption {
	position: absolute;
	left: 18px;
	bottom: 14px;
	max-width: calc(100% - 36px);
	margin: 0;
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(28, 43, 35, 0.8);
	color: #fff;
	font-size: 0.78rem;
	line-height: 1.35;
}

.ha-about-hero__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding:
		clamp(36px, 5vw, 74px)
		clamp(28px, 4vw, 60px);
	background:
		radial-gradient(
			circle at 100% 0,
			rgba(184, 117, 102, 0.17),
			transparent 46%
		),
		var(--ha-about-cream);
}

.ha-about-hero h1 {
	margin: 0 0 24px;
	font-size: clamp(2.8rem, 5vw, 5.3rem);
	font-weight: 500;
	letter-spacing: -0.045em;
	line-height: 0.98;
}

.ha-about-lead {
	margin: 0 0 22px;
	font-size: clamp(1.17rem, 1.7vw, 1.45rem);
	font-weight: 600;
	line-height: 1.52;
}

.ha-about-section {
	display: grid;
	grid-template-columns:
		minmax(280px, 0.84fr)
		minmax(0, 1.16fr);
	align-items: center;
	gap: clamp(34px, 6vw, 82px);
	margin-top: clamp(72px, 9vw, 132px);
}

.ha-about-section h2,
.ha-about-heading h2,
.ha-about-pause h2,
.ha-about-video-bridge h2,
.ha-about-contact h2 {
	margin: 0 0 24px;
	font-size: clamp(2.2rem, 4vw, 4.2rem);
	font-weight: 500;
	letter-spacing: -0.035em;
	line-height: 1.03;
}

.ha-about-figure {
	margin: 0;
}

.ha-about-figure__image {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 24px;
	box-shadow:
		0 16px 42px rgba(39, 54, 46, 0.13);
}

.ha-about-figure__caption {
	margin: 10px 4px 0;
	color: rgba(41, 55, 47, 0.72);
	font-size: 0.82rem;
	font-style: italic;
	line-height: 1.45;
}

.ha-about-figure--portrait .ha-about-figure__image {
	aspect-ratio: 1;
	object-fit: cover;
}

.ha-about-figure--landscape .ha-about-figure__image {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.ha-about-memorial {
	margin-top: clamp(86px, 10vw, 150px);
	padding: clamp(34px, 6vw, 76px);
	overflow: hidden;
	border-radius: 38px;
	background:
		radial-gradient(
			circle at 100% 0,
			rgba(184, 117, 102, 0.28),
			transparent 39%
		),
		linear-gradient(
			145deg,
			#2e4539,
			#1e3027
		);
	color: rgba(255, 255, 255, 0.88);
	box-shadow: var(--ha-about-shadow);
}

.ha-about-memorial h2,
.ha-about-memorial h3 {
	color: #fff;
}

.ha-about-memorial .ha-about-eyebrow {
	color: #eab8ab;
}

.ha-about-memorial__intro {
	max-width: 820px;
	margin: 0 auto 44px;
	text-align: center;
}

.ha-about-memorial__intro h2 {
	margin: 0 0 12px;
	font-size: clamp(2.6rem, 5vw, 5rem);
	font-weight: 500;
	letter-spacing: -0.04em;
	line-height: 1;
}

.ha-about-memorial__dates {
	margin: 0 0 28px;
	color: #ead5c8;
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ha-about-memorial__main {
	max-width: 900px;
	margin-inline: auto;
}

.ha-about-figure--maya-main .ha-about-figure__image {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.ha-about-memorial .ha-about-figure__caption {
	color: rgba(255, 255, 255, 0.7);
}

.ha-about-memorial__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 30px;
}

.ha-about-memorial-card {
	display: grid;
	grid-template-columns: minmax(120px, 0.65fr) 1fr;
	align-items: center;
	gap: 24px;
	padding: clamp(22px, 3vw, 36px);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 26px;
	background: rgba(255, 255, 255, 0.07);
}

.ha-about-memorial-card--links {
	display: flex;
}

.ha-about-memorial-card h3 {
	margin: 0 0 12px;
	font-size: clamp(1.5rem, 2.4vw, 2.1rem);
	font-weight: 500;
}

.ha-about-figure--square .ha-about-figure__image {
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 18px;
}

.ha-about-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.ha-about-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 47px;
	padding: 10px 17px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 0.86rem;
	font-weight: 800;
	line-height: 1.3;
	text-align: center;
	text-decoration: none !important;
}

.ha-about-button--light {
	background: #fff;
	color: var(--ha-about-deep) !important;
}

.ha-about-button--outline {
	border-color: rgba(255, 255, 255, 0.55);
	color: #fff !important;
}

.ha-about-memorial__gallery {
	display: grid;
	grid-template-columns:
		minmax(0, 0.72fr)
		minmax(0, 1.28fr);
	align-items: stretch;
	gap: 24px;
	margin-top: 24px;
}

.ha-about-figure--memorial {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.ha-about-figure--memorial .ha-about-figure__image {
	flex: 1;
	min-height: 310px;
	object-fit: cover;
	border-radius: 22px;
}

.ha-about-memorial__note {
	max-width: 850px;
	margin: 18px auto 0;
	color: rgba(255, 255, 255, 0.63);
	font-size: 0.78rem;
	text-align: center;
}

.ha-about-dogs {
	margin-top: clamp(82px, 10vw, 142px);
}

.ha-about-heading {
	max-width: 880px;
	margin: 0 auto 42px;
	text-align: center;
}

.ha-about-heading > p:not(.ha-about-eyebrow) {
	font-size: 1.04rem;
}

.ha-about-dog-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 4vw, 42px);
}

.ha-about-dog-card {
	overflow: hidden;
	border: 1px solid rgba(49, 72, 59, 0.12);
	border-radius: 30px;
	background: var(--ha-about-white);
	box-shadow:
		0 18px 50px rgba(39, 54, 46, 0.1);
}

.ha-about-dog-card__images {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 8px;
	padding: 8px 8px 0;
}

.ha-about-dog-card__images .ha-about-figure__caption {
	display: none;
}

.ha-about-dog-card__images .ha-about-figure__image {
	height: 100%;
	min-height: 255px;
	border-radius: 20px;
	object-fit: cover;
	box-shadow: none;
}

.ha-about-dog-card__content {
	padding: clamp(24px, 4vw, 40px);
}

.ha-about-dog-card__date {
	margin: 0 0 6px;
	color: var(--ha-about-rose);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ha-about-dog-card h3 {
	margin: 0 0 16px;
	font-size: clamp(2rem, 3vw, 3rem);
	font-weight: 500;
}

.ha-about-shakira {
	grid-template-columns:
		minmax(0, 1.18fr)
		minmax(280px, 0.82fr);
	padding: clamp(26px, 4vw, 48px);
	border-radius: 34px;
	background: var(--ha-about-sage);
}

.ha-about-pause {
	max-width: 920px;
	margin: clamp(80px, 10vw, 140px) auto 0;
	padding: clamp(36px, 6vw, 68px);
	border: 1px solid rgba(184, 117, 102, 0.22);
	border-radius: 34px;
	background:
		linear-gradient(
			135deg,
			#f5e8db,
			#fffaf3
		);
	text-align: center;
}

.ha-about-pause p {
	font-size: 1.07rem;
}

.ha-about-video-bridge {
	display: grid;
	grid-template-columns:
		minmax(260px, 0.72fr)
		minmax(0, 1.28fr);
	align-items: center;
	gap: clamp(28px, 5vw, 70px);
	margin-top: clamp(82px, 10vw, 140px);
	padding: clamp(28px, 5vw, 58px);
	border-radius: 34px;
	background: var(--ha-about-deep);
	color: rgba(255, 255, 255, 0.85);
}

.ha-about-video-bridge h2 {
	color: #fff;
}

.ha-about-video-bridge .ha-about-eyebrow {
	color: #eab8ab;
}

.ha-about-video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: 22px;
	background: #111;
	box-shadow:
		0 18px 48px rgba(0, 0, 0, 0.28);
}

.ha-about-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ha-about-english {
	margin-top: clamp(82px, 10vw, 140px);
	padding: clamp(34px, 6vw, 76px);
	border-radius: 38px;
	background: var(--ha-about-cream);
}

.ha-about-english__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.ha-about-english__grid article {
	padding: clamp(24px, 3.5vw, 38px);
	border: 1px solid rgba(49, 72, 59, 0.1);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.74);
}

.ha-about-english__grid h3 {
	margin: 0 0 16px;
	font-size: clamp(1.5rem, 2.3vw, 2.1rem);
	font-weight: 500;
}

.ha-about-contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 30px;
	margin-top: clamp(72px, 9vw, 124px);
	padding: clamp(32px, 5vw, 56px);
	border-radius: 34px;
	background: var(--ha-about-sand);
}

.ha-about-contact h2 {
	margin-bottom: 14px;
}

.ha-about-contact__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 10px;
	max-width: 460px;
}

.ha-about-contact__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 9px 16px;
	border: 1px solid rgba(49, 72, 59, 0.25);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.58);
	text-align: center;
	text-decoration: none;
}

@media (max-width: 980px) {
	.ha-about-hero,
	.ha-about-section,
	.ha-about-video-bridge {
		grid-template-columns: 1fr;
	}

	.ha-about-hero__image {
		min-height: auto;
		aspect-ratio: 16 / 9;
	}

	.ha-about-memorial__cards {
		grid-template-columns: 1fr;
	}

	.ha-about-contact {
		grid-template-columns: 1fr;
	}

	.ha-about-contact__links {
		justify-content: flex-start;
		max-width: none;
	}
}

@media (max-width: 760px) {
	.ha-about-wrap {
		width: min(100% - 20px, 1180px);
	}

	.ha-about-language-nav {
		justify-content: center;
		margin-bottom: 12px;
	}

	.ha-about-hero,
	.ha-about-memorial,
	.ha-about-english,
	.ha-about-shakira,
	.ha-about-pause,
	.ha-about-video-bridge,
	.ha-about-contact {
		border-radius: 25px;
	}

	.ha-about-hero__image {
		aspect-ratio: 4 / 5;
		object-position: center top;
	}

	.ha-about-hero__caption {
		left: 10px;
		right: 10px;
		bottom: 10px;
		max-width: none;
		border-radius: 14px;
		font-size: 0.71rem;
		text-align: center;
	}

	.ha-about-hero__content {
		padding: 32px 23px 38px;
	}

	.ha-about-section {
		margin-top: 70px;
		gap: 28px;
	}

	.ha-about-memorial,
	.ha-about-english {
		padding: 30px 18px;
	}

	.ha-about-memorial-card {
		grid-template-columns: 1fr;
	}

	.ha-about-memorial-card .ha-about-figure {
		max-width: 300px;
	}

	.ha-about-memorial__gallery,
	.ha-about-dog-grid,
	.ha-about-english__grid {
		grid-template-columns: 1fr;
	}

	.ha-about-figure--memorial .ha-about-figure__image {
		min-height: auto;
	}

	.ha-about-dog-card__images {
		grid-template-columns: 1fr;
	}

	.ha-about-dog-card__images .ha-about-figure__image {
		min-height: auto;
		aspect-ratio: 4 / 3;
	}

	.ha-about-shakira,
	.ha-about-pause,
	.ha-about-video-bridge,
	.ha-about-contact {
		padding: 28px 20px;
	}

	.ha-about-buttons {
		flex-direction: column;
	}

	.ha-about-button {
		width: 100%;
	}

	.ha-about-contact__links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 430px) {
	.ha-about-contact__links {
		grid-template-columns: 1fr;
	}
}