/*
 * KDR — "Teil werden" page.
 * Loaded by the kdr child theme (see functions.php), scoped to just this
 * page (is_page check in the enqueue function) so it doesn't add weight
 * anywhere else.
 *
 * Deliberately small: most of this page reuses CSS classes that already
 * ship sitewide from the Startseite build —
 *   - the layered arch-photo blocks reuse .kdr-s1-* (gold accent,
 *     kdr-willkommen.css) and .kdr-s5-* (maroon accent + button,
 *     kdr-kommunitaet.css)
 *   - the "Eintreten" photo collage reuses .kdr-auftrag-collage /
 *     .kdr-auftrag-img-1..4 (kdr-auftrag.css)
 *   - the newsletter/footer bar reuses .kdr-sec-newsletter /
 *     .kdr-sec-footer (kdr-footer.css)
 * Per Elementor's own convention already used throughout this project,
 * only STRUCTURE (position/size/radius) lives in CSS classes — colors
 * come from Elementor's native per-widget Background/Typography/Border
 * controls, set directly in the setup script, so almost everything here
 * stays editable from the Elementor panel with no CSS class needed.
 *
 * What's actually new below: typography tweaks for the hero's own
 * heading/subtitle text, the 5-item icon nav row, the full-width CTA
 * photo band's overlapping tag button, and the "Sr. Elisabeth" video
 * testimonial card.
 *
 * The hero itself is NOT rebuilt from page-specific CSS/JS structure —
 * it reuses Startseite's own kdr-sec-hero / kdr-hero-media /
 * kdr-hero-overlay classes (kdr-hero.css) and its scroll-shrink/pin
 * script (kdr-hero-scroll.js), both already loaded sitewide, so this
 * page's hero gets the exact same rounded-card look and the exact same
 * scroll-linked shrink/pin animation as the homepage's, for free — the
 * Elementor widget itself is still set up as a boxed/1200px container
 * (see kdr-setup13.php); the two rules below just override that back to
 * full-bleed via CSS, purely visual, so it starts from true edge-to-edge
 * like Startseite's hero without changing the underlying widget setup.
 */

/* --- Hero heading/subtitle: cosmetic tweaks only, layered on top of
   the reused kdr-hero-overlay/kdr-hero-media structure above. --- */
.kdr-tw-hero-title .elementor-heading-title {
	line-height: 0.95 !important;
	letter-spacing: 0.5px;
}

.kdr-tw-hero-subtitle,
.kdr-tw-hero-subtitle p {
	font-style: italic;
}

/* --- Hero: same scroll-linked "shrink into place" mechanic as
   Startseite's first section. This page's hero is its own native
   Elementor build (.kdr-sec-tw-hero / .kdr-tw-hero — NOT Startseite's
   shared .kdr-sec-hero / .kdr-hero-media classes), keeping this page's
   already-approved resting design: same colors/content/56px corner
   radius as built from the reference images. What's added here is only
   the ANIMATION — on load the card is full-bleed and square-cornered,
   pulled up behind the sticky header (negative margin-top), then as the
   page scrolls over the next half-viewport it eases down into that
   resting design, exactly like kdr-hero-scroll.js does for Startseite.
   Driven by kdr-teilwerden-hero-scroll.js. */
.kdr-sec-tw-hero {
	position: relative;
	justify-content: center;
}

.kdr-tw-hero {
	position: sticky !important;
	top: 0;
	overflow: hidden;
	box-sizing: border-box;
	/* Full viewport height at rest — kdr-teilwerden-hero-scroll.js shrinks
	   this down to 80vh as the page scrolls, together with the
	   width/radius shrink. */
	height: 100vh;
	min-height: 100vh;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
	/* Square corners by default — the JS rounds them from 0px up to the
	   design's native 56px as the page scrolls, overriding Elementor's
	   own static 56px radius so the "at rest" (top-of-page) state starts
	   square instead. */
	border-radius: 0px !important;
}

/* --- 5-item icon nav row: the ring and the dot are native Elementor
   container styling (fixed width/height/border/radius) — but the item
   wrapper itself needs `flex: 0 0 auto` or it inherits Elementor's
   content_width:"full" and stretches to the row's full width, which
   forces every item onto its own line instead of sitting side by side. */
.kdr-tw-icon-item {
	flex: 0 0 auto !important;
	width: auto !important;
	text-decoration: none;
}

@media (max-width: 600px) {
	.kdr-tw-icons {
		gap: 28px !important;
	}
}

/* --- Full-width CTA photo band: the maroon pill tag overlaps the
   photo's bottom-left corner. Elementor's own "Position" control could
   do this natively on newer versions, but absolute-offset field names
   aren't reliable across versions, so this one small positioning rule
   is plain CSS to avoid a silently-ignored setting. --- */
.kdr-tw-cta-band {
	position: relative;
	overflow: visible;
}

.kdr-tw-cta-tag {
	position: absolute !important;
	left: 40px;
	bottom: -28px;
	z-index: 2;
}

@media (max-width: 600px) {
	.kdr-tw-cta-tag {
		left: 50%;
		transform: translateX(-50%);
		bottom: -24px;
		width: calc(100% - 48px);
		text-align: center;
	}
}

/* --- "Sr. Elisabeth" video testimonial card --- */
.kdr-tw-testimonial {
	display: flex;
	align-items: stretch;
	gap: 0;
	border-radius: 40px;
	overflow: hidden;
}

.kdr-tw-testimonial-text {
	flex: 1 1 340px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.kdr-tw-testimonial-heading .elementor-heading-title {
	line-height: 1.05 !important;
}

.kdr-tw-testimonial-media {
	position: relative;
	flex: 1 1 420px;
	min-height: 320px;
	overflow: hidden;
}

.kdr-tw-testimonial-play {
	position: absolute !important;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: rgba(252, 251, 242, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

.kdr-tw-testimonial-play::after {
	content: "";
	border-style: solid;
	border-width: 10px 0 10px 16px;
	border-color: transparent transparent transparent #6c1434;
	margin-left: 4px;
}

.kdr-tw-testimonial-counter {
	position: absolute !important;
	right: 24px;
	bottom: 20px;
	z-index: 2;
}

@media (max-width: 900px) {
	.kdr-tw-testimonial {
		flex-direction: column;
		border-radius: 32px;
	}
	.kdr-tw-testimonial-text {
		padding: 40px 32px !important;
	}
	.kdr-tw-testimonial-media {
		min-height: 260px;
	}
}