/** singulary-ui/artikel-hero — Titelbild ab Oberkante, Copy unten auf der Lesekante, Scrim nur unten kräftig. */
.wp-site-blocks > .fyh-arthero { margin-block-start: 0; }

.fyh-arthero {
	/* The site axis (layout gutter): logo, article head and article text share one left edge. */
	--fyh-arthero-edge: var(--wp--custom--layout--gutter, var(--wp--custom--layout--edge, 1.5rem));
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	min-height: clamp( 22rem, 52svh, 32rem );
	padding: clamp( 6rem, 14vh, 9rem ) var(--fyh-arthero-edge) clamp( 2rem, 4.5vw, 3.25rem );
	border-radius: 0 0 var(--wp--custom--radius--edge, var(--wp--custom--radius--lg, 28px)) var(--wp--custom--radius--edge, var(--wp--custom--radius--lg, 28px));
	background: linear-gradient( 135deg, var(--wp--preset--color--ink), var(--wp--preset--color--ink-deep) );
	color: #fff;
}

.fyh-arthero__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.fyh-arthero__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient( to top, color-mix( in srgb, var(--wp--preset--color--ink-deep) 86%, transparent ) 0%, color-mix( in srgb, var(--wp--preset--color--ink-deep) 44%, transparent ) 42%, color-mix( in srgb, var(--wp--preset--color--ink-deep) 14%, transparent ) 72%, color-mix( in srgb, var(--wp--preset--color--ink-deep) 34%, transparent ) 100% );
}

.fyh-arthero__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; max-width: 52rem; min-width: 0; }
.fyh-arthero__back { display: inline-flex; align-items: center; gap: .5rem; color: rgb( 255 255 255 / .82 ); font-size: .875rem; font-weight: 500; text-decoration: none; transition: color .18s ease; }
.fyh-arthero__back:hover { color: #fff; }
.fyh-arthero__back:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }
.fyh-arthero__back svg, .fyh-arthero__meta svg { width: 16px; height: 16px; }
/* The category reads as the section rubric (rule + caps), light on the photo. */
.fyh-arthero__badge { --sgui-rubric-color: rgb( 255 255 255 / .82 ); }
.fyh-arthero__title { margin: 0; color: #fff; font-size: clamp( 2rem, 4vw, 3.25rem ); font-weight: 600; letter-spacing: -.035em; line-height: 1.08; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.fyh-arthero__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: 0; color: rgb( 255 255 255 / .82 ); font-size: .875rem; font-weight: 500; }
.fyh-arthero__meta span { display: inline-flex; align-items: center; gap: .5rem; }
@media ( prefers-reduced-motion: reduce ) { .fyh-arthero__back { transition: none; } }