/**
 * Responsive header images for custom AWO page templates.
 *
 * Every photographic hero retains the requested 15% white overlay. The final
 * image-first rules below place all copy in a separate white area underneath.
 */

.awo-home-hero {
	background-image: url("../images/header-startseite.webp") !important;
	background-position: 58% center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	color: #000 !important;
}

.awo-home-hero .awo-home-hero__shade,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__shade {
	background: rgb(255 255 255 / 15%) !important;
}

.awo-home-hero .awo-home-hero__copy {
	background: rgb(255 255 255 / 88%);
	box-shadow: 0 12px 34px rgb(0 0 0 / 10%);
	max-width: 760px;
	padding: clamp(28px, 3vw, 44px);
}

.awo-home-hero h1,
.awo-home-hero p {
	color: #000 !important;
}

.awo-home-hero .awo-eyebrow,
.awo-home-hero .awo-eyebrow--light {
	color: #e0001b !important;
}

body.home .elementor.elementor-13 .elementor-element.awo-home-hero .elementor-heading-title,
body.home .elementor.elementor-13 .elementor-element.awo-home-hero .awo-lead {
	color: #000 !important;
}

body.home .elementor.elementor-13 .elementor-element.awo-home-hero .awo-eyebrow,
body.home .elementor.elementor-13 .elementor-element.awo-home-hero .awo-eyebrow--light {
	color: #e0001b !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image {
	background: #fff !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__media {
	background-color: #fff !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy h1,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy h2,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy p,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy .awo-lead {
	color: #000 !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy .awo-eyebrow,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy .awo-eyebrow--light,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy a.awo-text-link--light {
	color: #e0001b !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy a.awo-button-link--light {
	background: #e0001b !important;
	border-color: #e0001b !important;
	color: #fff !important;
}

@media (min-width: 1100px) {
	body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image,
	body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__inner {
		min-height: clamp(560px, 42vw, 700px) !important;
	}

	body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__media {
		left: 0 !important;
		width: 100% !important;
	}

	body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy {
		background: rgb(255 255 255 / 88%);
		box-shadow: 0 12px 34px rgb(0 0 0 / 10%);
		max-width: min(680px, 54vw);
		padding: clamp(30px, 3vw, 44px);
	}

	body:not(.home) :is(main.elementor, .awo-el-page) .awo-events-hero .awo-page-hero__inner {
		justify-content: flex-end;
	}
}

/*
 * Smaller screens keep the complete photograph visible and move the copy onto
 * a separate white surface. The image itself retains the 15% white overlay.
 */
@media (max-width: 1099px) {
	body:not(.home) .elementor .awo-page-hero--image,
	body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image {
		background: #fff !important;
		min-height: 0 !important;
	}

	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__media,
	body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__media {
		aspect-ratio: 3 / 2;
		background-color: #fff !important;
		background-position: center !important;
		height: auto !important;
		inset: auto !important;
		min-height: 0 !important;
		position: relative !important;
		width: 100% !important;
	}

	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__media::after {
		background: rgb(255 255 255 / 15%);
		content: "";
		inset: 0;
		position: absolute;
	}

	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__shade {
		display: none !important;
	}

	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__inner {
		background: #fff !important;
		color: #000 !important;
		min-height: 0 !important;
		padding-block: 56px 64px !important;
	}

	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__copy {
		max-width: 100%;
	}

	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__copy h1,
	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__copy h2,
	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__copy p,
	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__copy .awo-lead {
		color: #000 !important;
	}

	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__copy .awo-eyebrow,
	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__copy .awo-eyebrow--light {
		color: #e0001b !important;
	}

	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__copy a.awo-button-link--light {
		background: #e0001b !important;
		border-color: #e0001b !important;
		color: #fff !important;
	}

	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__copy a.awo-text-link--light {
		color: #e0001b !important;
	}
}

/* Individual focal points preserve faces and important graphic elements. */
body:not(.home) :is(main.elementor, .awo-el-page) .awo-events-hero .awo-page-hero__media,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-help-hero .awo-page-hero__media,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-help-detail-hero .awo-page-hero__media,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-membership-hero .awo-page-hero__media,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-volunteer-hero .awo-page-hero__media,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-contact-hero .awo-page-hero__media {
	background-position: center top !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-busreisen-hero .awo-page-hero__media {
	background-color: #e8e4dd !important;
	background-position: right center !important;
	background-size: contain !important;
}

body:not(.home) :is(main.elementor, .awo-el-page).awo-about-board-page .awo-about-hero .awo-page-hero__media {
	background-position: center bottom !important;
	background-size: 100% auto !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-model-hero .awo-page-hero__media {
	background-color: #fff !important;
	background-position: center !important;
	background-size: contain !important;
	transform: scaleX(-1);
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-donation-hero .awo-page-hero__media {
	background-position: center !important;
	transform: scaleX(-1);
}

@media (max-width: 767px) {
	.awo-home-hero .awo-home-hero__copy {
		padding: 28px 24px;
	}
}

@media (max-width: 767px) {
	body:not(.home) .elementor .awo-page-hero--image .awo-page-hero__inner {
		padding-block: 42px 50px !important;
	}
}

/**
 * Image-first hero layout.
 *
 * The complete viewport width belongs to the photograph. Copy and actions are
 * presented as the first white content section immediately below it, so no
 * heading, paragraph or button obscures the motif on any screen size.
 */
.awo-home-hero {
	background: #fff !important;
	color: #000 !important;
	display: block !important;
	min-height: 0 !important;
	overflow: hidden;
	position: relative;
}

.awo-home-hero::before {
	content: none !important;
	display: none !important;
}

.awo-home-hero .awo-home-hero__shade {
	aspect-ratio: 16 / 9;
	background: linear-gradient(rgb(255 255 255 / 15%), rgb(255 255 255 / 15%)), url("../images/header-startseite.webp") 58% center / cover no-repeat !important;
	display: block !important;
	height: auto !important;
	inset: auto !important;
	min-height: 0 !important;
	pointer-events: none;
	position: relative !important;
	width: 100%;
}

.awo-home-hero .awo-home-hero__inner {
	align-items: flex-start !important;
	background: #fff !important;
	min-height: 0 !important;
	padding-block: clamp(48px, 6vw, 84px) !important;
}

.awo-home-hero .awo-home-hero__copy {
	background: transparent !important;
	box-shadow: none !important;
	max-width: 860px;
	padding: 0 !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image {
	background: #fff !important;
	display: block;
	min-height: 0 !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__media {
	aspect-ratio: 16 / 9;
	background-color: #fff !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
	height: auto !important;
	inset: auto !important;
	min-height: 0 !important;
	position: relative !important;
	width: 100% !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__media::after {
	background: rgb(255 255 255 / 15%);
	content: "";
	inset: 0;
	pointer-events: none;
	position: absolute;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__shade {
	display: none !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__inner {
	align-items: flex-start !important;
	background: #fff !important;
	min-height: 0 !important;
	padding-block: clamp(48px, 6vw, 84px) !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy {
	align-self: flex-start;
	background: transparent !important;
	box-shadow: none !important;
	max-width: 860px;
	padding: 0 !important;
}

/* Preserve important subjects while every image remains edge-to-edge. */
body:not(.home) :is(main.elementor, .awo-el-page) .awo-events-hero .awo-page-hero__media,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-help-hero .awo-page-hero__media,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-help-detail-hero .awo-page-hero__media,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-membership-hero .awo-page-hero__media,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-volunteer-hero .awo-page-hero__media,
body:not(.home) :is(main.elementor, .awo-el-page) .awo-contact-hero .awo-page-hero__media {
	background-position: center top !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-busreisen-hero .awo-page-hero__media {
	background-color: #fff !important;
	background-position: center bottom !important;
	background-size: cover !important;
}

body:not(.home) :is(main.elementor, .awo-el-page).awo-about-board-page .awo-about-hero .awo-page-hero__media {
	background-position: center bottom !important;
	background-size: cover !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-model-hero .awo-page-hero__media {
	background-position: center !important;
	background-size: cover !important;
}

body:not(.home) :is(main.elementor, .awo-el-page) .awo-donation-hero .awo-page-hero__media {
	background-position: center !important;
	background-size: cover !important;
}

@media (max-width: 767px) {
	.awo-home-hero .awo-home-hero__inner,
	body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__inner {
		padding-block: 40px 48px !important;
	}

	.awo-home-hero .awo-home-hero__copy,
	body:not(.home) :is(main.elementor, .awo-el-page) .awo-page-hero--image .awo-page-hero__copy {
		max-width: 100%;
	}
}

/* The contact details now support the form instead of dominating its intro. */
.elementor .awo-contact-options--compact {
	background: var(--awo-white);
	padding-block: 72px !important;
}

.elementor .awo-contact-options--compact .awo-contact-options__heading {
	margin-bottom: 34px;
	max-width: 760px;
}

.elementor .awo-contact-options--compact .awo-contact-options__heading > * {
	margin-block: 0;
}

.elementor .awo-contact-options--compact .awo-contact-options__heading h2 {
	margin-top: 8px;
}

.elementor .awo-contact-options--compact .awo-contact-option {
	background: var(--awo-gray);
	border-left: 4px solid var(--awo-red);
	gap: 9px;
	min-height: 225px;
	padding: 26px 28px;
}

.elementor .awo-contact-options--compact .awo-contact-option > span {
	color: var(--awo-red);
	font-size: 28px;
}

.elementor .awo-contact-options--compact .awo-contact-option > p {
	font-size: 12px;
	margin-top: 8px;
}

.elementor .awo-contact-options--compact .awo-contact-option > a:not(.awo-text-link),
.elementor .awo-contact-options--compact .awo-contact-option > strong {
	font-size: clamp(18px, 1.6vw, 22px);
}

.elementor .awo-contact-options--compact .awo-contact-option > small {
	font-size: 15px;
}

@media (max-width: 767px) {
	.elementor .awo-contact-options--compact {
		padding-block: 56px !important;
	}

	.elementor .awo-contact-options--compact .awo-contact-option {
		min-height: 0;
		padding: 24px;
	}
}