/**
 * singulary-ui/hero — selbsttragender Full-Bleed-Hero.
 * Bringt seine eigene Cover-Layout-Logik mit (kein core/cover-CSS nötig).
 */

.fyh-hero {
	position: relative;
	display: grid;
	grid-template-rows: minmax( 0, 1fr ) auto;
	/* Buehne pro Marke ueber theme.json (custom.hero): gleiche Engine, eigene
	   Proportion. Default = kompakte Buehne mit breitem Motiv. */
	min-height: var(--wp--custom--hero--min-height, clamp( 36rem, 68svh, 38rem ));
	overflow: hidden;
	border-bottom-left-radius: var(--wp--custom--hero--radius, var(--wp--custom--radius--edge, var(--wp--custom--radius--lg, 28px)));
	border-bottom-right-radius: var(--wp--custom--hero--radius, var(--wp--custom--radius--edge, var(--wp--custom--radius--lg, 28px)));
	background: var(--wp--custom--hero--stage, var(--wp--preset--color--ink));
}
/* Das breite Originalbild belegt die eigentliche Bildbuehne oberhalb der deckenden
	Beweisleiste. Dadurch bleibt fast die volle 2560px-Komposition sichtbar und
	Die Beraterperson erscheint deutlich kleiner als beim frueheren Vollhoehen-Crop. */
.fyh-hero__img,
.fyh-hero .sgui-hero__video {
	position: absolute; top: 0; right: 0; bottom: 0; left: auto;
	width: var(--wp--custom--hero--image-width, 100%); height: 100%; object-fit: cover; z-index: 0;
	grid-area: 1 / 1 / 2 / 2;
	/* A brand may let the stage run under the proof bar (glass): custom.hero.stageRows "1 / -1". */
	grid-row: var(--wp--custom--hero--stage-rows, 1 / 2);
	filter: var(--wp--custom--hero--image-filter, none);
	-webkit-mask-image: var(--wp--custom--hero--image-mask, none);
	mask-image: var(--wp--custom--hero--image-mask, none);
}
/* Das mobile Poster (<picture>) ist kein eigenes Rasterelement: das Bild darin liegt auf der Bildebene. */
.fyh-hero .sgui-hero__picture { display: contents; }
/* Hintergrundvideo: liegt auf der Bildebene (gleiche Regeln), blendet erst ein, wenn es spielt. */
.fyh-hero .sgui-hero__video { object-position: var(--fyh-hero-focal, center); opacity: 0; pointer-events: none; transition: opacity 350ms ease; }
.fyh-hero .sgui-hero__video[data-ready] { opacity: 1; }
.fyh-hero .sgui-hero__video-control {
	--background: transparent; --foreground: #fff; --border: #ffffff80; --muted: #ffffff20;
	/* The --color-* roles resolve at the .sgui-shadcn root; bind them here again, or the icon stays ink on video. */
	--color-background: var(--background); --color-foreground: var(--foreground); --color-border: var(--border); --color-muted: var(--muted);
	/* Absolut in der Bühnenfläche (Rasterbereich wie das Bild): belegt keine Zelle, die Copy bleibt in Spalte 1. */
	/* Die Bedienung gehört an die Bildecke, unabhängig vom breiten Inhaltsgutter. */
	position: absolute; grid-area: 1 / 1 / 2 / 2; z-index: 3;
	/* Corner and size per brand (custom.hero.videoControlInset / videoControlSize); default bottom left in the image row, above the proof bar. */
	inset: var(--wp--custom--hero--video-control-inset, auto auto max(1.25rem, env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left)));
	--sgui-video-control-size: var(--wp--custom--hero--video-control-size, 2.75rem);
	/* A brand may drop the control (custom.hero.videoControlVisibility "hidden"): the footage is silent and decorative and stops for prefers-reduced-motion. */
	visibility: var(--wp--custom--hero--video-control-visibility, visible);
}
/* The outline button inherits its colour (.sgui-shadcn button[data-slot] { color: inherit }): white on the video. */
.fyh-hero.sgui-shadcn .sgui-hero__video-control { color: var(--foreground); }
@media (prefers-reduced-motion: reduce) { .fyh-hero .sgui-hero__video { transition: none; } }
/* Ein gemeinsamer Leseschleier für Frontend und Editor; das Portrait bleibt hell. */
.fyh-hero__bg {
	position: absolute;
	inset: 0;
	grid-area: 1 / 1 / 2 / 2;
	grid-row: var(--wp--custom--hero--stage-rows, 1 / 2);
	z-index: 1;
	pointer-events: none;
	background: var(--wp--custom--hero--scrim, linear-gradient( 90deg, rgba( 15, 15, 15, .92 ) 0%, rgba( 15, 15, 15, .8 ) 30%, rgba( 15, 15, 15, .4 ) 52%, rgba( 15, 15, 15, .04 ) 74%, transparent 100% ));
}
.fyh-hero__inner {
	position: relative;
	z-index: 2;
	grid-row: 1;
	align-self: center;
	width: 100%;
	max-width: var(--wp--custom--layout--shell-max, 1512px);
	margin-inline: auto;
	padding-left: var(--wp--style--root--padding-left, clamp(1.25rem, 5vw, 6rem));
	padding-right: var(--wp--style--root--padding-right, clamp(1.25rem, 5vw, 6rem));
	/* Desktop reserviert unterhalb explizit Platz für die überlagerte Navigation. */
	padding-block: var(--wp--custom--hero--inner-padding, clamp( 1.75rem, 3vh, 2rem ));
}

/* --- Copy --- */
/* width:100% + inline max-width (copyWidth) = min(Container, copyWidth) → die Copy-
   Spalte wächst NIE über ihren Container hinaus (sonst blähen nowrap-Inhalte wie die
   Button-Zeile sie auf und overflow:hidden schneidet ab). min-width:0 lässt Kinder
   schrumpfen. Das ist die globale Absicherung gegen horizontales Überschwappen. */
.fyh-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; min-width: 0; }
.fyh-hero-copy.is-center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; }
.fyh-hero-copy.is-right { align-items: flex-end; text-align: right; margin-left: auto; }
/* InnerBlocks-Copy: Core-Block-Margins neutralisieren, Flex-Gap steuert den Abstand. */
.fyh-hero-copy > * { margin-top: 0; margin-bottom: 0; }
/* Eyebrow + Headline füllen die Copy-Spalte → ihre Auswahl-Box im Editor = Copy-Breite,
   d.h. die "blaue Linie" reicht bis zum Spaltenrand und ist per Copy-Breite-Slider steuerbar. */
.fyh-hero-copy > .fyh-hero__eyebrow,
.fyh-hero-copy > .fyh-hero__title { width: 100%; }
.fyh-hero-copy .wp-block-buttons { margin-top: 1.5rem; }
/* Button/Badge appearances come from the official shadcn CVA build. */
.fyh-hero .fyh-hero__actions .wp-block-button > .wp-block-button__link {
	height: 48px;
	min-height: 48px;
	padding-inline: clamp( 1rem, 1.65vw, 1.28rem );
	font-size: clamp( .82rem, 1.04vw, .9rem );
	text-decoration: none;
}
.fyh-hero .fyh-hero-copy .fyh-hero__eyebrow {
	height: auto;
	width: fit-content;
	margin: 0 0 1rem;
	padding: .35rem .65rem;
	color: var(--wp--custom--ui--primary-foreground) !important;
	font-size: var(--wp--custom--type--label-size, .75rem) !important;
	line-height: 1.4;
	font-weight: var(--wp--custom--type--label-weight, 600);
	letter-spacing: var(--wp--custom--type--label-tracking, .08em);
	text-transform: uppercase;
}

/* Die Person ist der Absender, nicht nur Dekoration: eine ruhige, editierbare
   Namensplakette verankert das Portrait, ohne Gesicht oder Copy zu ueberlagern. */
.fyh-hero__portrait-caption {
	position: absolute;
	right: clamp( 5.5rem, 7vw, 7rem );
	bottom: clamp( 6.8rem, 9vw, 8.2rem );
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: .18rem;
	max-width: min( 20rem, 28vw );
	margin: 0;
	padding: .7rem .9rem .72rem 1rem;
	border: 1px solid rgba( 255, 255, 255, .2 );
	border-left: 3px solid var(--wp--custom--ui--primary, var(--wp--preset--color--brand));
	border-radius: 12px;
	background: rgba( 15, 15, 15, .62 );
	-webkit-backdrop-filter: blur( 16px ) saturate( 1.16 );
	backdrop-filter: blur( 16px ) saturate( 1.16 );
	color: #fff;
}
.fyh-hero__portrait-caption strong {
	font-size: .88rem;
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
}
.fyh-hero__portrait-caption span {
	color: rgba( 255, 255, 255, .68 );
	font-size: .6875rem;
	line-height: 1.35;
}
/* Leiser Standort-Pin: semantisch klarer als eine zweite Dach-Bildmarke. Eine Marke kann
   ihn per custom.hero.eyebrowMark* gegen die Rubrik-Linie der Sektionen tauschen. */
.fyh-hero .fyh-hero__eyebrow::before {
	content: ""; display: inline-block; flex: 0 0 auto;
	width: var(--wp--custom--hero--eyebrow-mark-width, 11px);
	height: var(--wp--custom--hero--eyebrow-mark-height, 11px);
	margin-right: var(--wp--custom--hero--eyebrow-mark-gap, .4rem);
	background: currentColor;
	-webkit-mask: var(--wp--custom--hero--eyebrow-mark-mask, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain);
	mask: var(--wp--custom--hero--eyebrow-mark-mask, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain);
}
/* Resend-inspirierte Redaktion statt Display-Wand: eine kontrollierte
   Textsaeule und genug Luft zwischen Aussage, Erklaerung und CTA. */
.fyh-hero .fyh-hero__title {
	max-width: 100%;
	margin: 0;
	font-size: var(--wp--custom--hero--title-size, clamp( 3.75rem, 4.2vw, 4rem ));
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.06;
	text-shadow: none;
	text-wrap: balance;
}

	/* Die Startseiten-Aussage folgt einer bewusst absteigenden Dreizeile. */
@media ( min-width: 782px ) {
	/* Freier Raum unter der Navigation ist Teil des Layouts, kein optischer Transform. */
	.fyh-hero__inner {
		padding-top: calc( var(--fyh-nav-height, 76px) + 1rem );
		padding-bottom: 1rem;
	}

	:is( .home, .editor-styles-wrapper ) .fyh-hero .fyh-hero__title {
		max-width: var(--wp--custom--hero--title-max, 8.25em);
	}
}
.fyh-hero .fyh-hero__sub {
	max-width: min( 100%, 27rem ) !important;
	margin: 1rem 0 0;
	padding-right: 0;
	font-size: clamp( .98rem, 1.12vw, 1.1rem );
	font-weight: 400;
	line-height: 1.5;
	filter: none;
	text-wrap: pretty;
}
/* A brand may widen and balance the lead (custom.hero.subWidth / subWrap). */
.fyh-hero__inner .fyh-hero__sub {
	max-width: min( 100%, var(--wp--custom--hero--sub-width, 27rem) ) !important;
	text-wrap: var(--wp--custom--hero--sub-wrap, pretty);
}

@media ( min-width: 1100px ) {
	.fyh-hero-copy:not(.is-center):not(.is-right) {
		max-width: min( 52vw, 46rem ) !important;
	}
}

@media ( min-width: 782px ) and ( max-width: 1099px ) {
	.fyh-hero-copy:not(.is-center):not(.is-right) {
		max-width: min( 72vw, 38rem ) !important;
	}

	.fyh-hero .fyh-hero__title {
		font-size: clamp( 3.25rem, 5vw, 56px );
	}
}

/* Four official Card/Badge components, shared with the native editor. */
.fyh-hero__proof {
	position: relative;
	z-index: 3;
	display: grid;
	grid-row: 2;
	grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	gap: var(--wp--custom--hero--proof-grid-gap, .75rem);
	margin: 0;
	/* Same axis as the hero copy and every section: the layout gutter, not the bare edge. */
	padding: var(--wp--custom--hero--proof-padding-block, .75rem) var(--wp--custom--hero--proof-padding-inline, var(--wp--custom--layout--gutter, var(--wp--style--root--padding-right, 5vw)));
	border-top: var(--wp--custom--hero--proof-border, 0);
	border-bottom: var(--wp--custom--hero--proof-border-end, 0);
	background: var(--wp--custom--hero--proof-surface, var(--wp--custom--ui--muted));
	-webkit-backdrop-filter: var(--wp--custom--hero--proof-backdrop, none);
	backdrop-filter: var(--wp--custom--hero--proof-backdrop, none);
	/* Die React-HeroProof-Zeilen lesen dieselben Rollen; eine dunkle Leiste im Hero
	   stellt sie ueber theme.json auf hell-auf-dunkel um. */
	--foreground: var(--wp--custom--hero--proof-foreground, var(--wp--preset--color--ink));
	--muted-foreground: var(--wp--custom--hero--proof-muted, var(--wp--preset--color--muted));
}
.fyh-hero__proof .sgui-proof-item + .sgui-proof-item {
	border-inline-start-color: var(--wp--custom--hero--proof-rule, var(--wp--preset--color--hairline));
}
.fyh-hero__proof :is( .sgui-proof-item, dt ) { color: var(--foreground); }
/* Anordnung je Marke: Wert neben (row) oder ueber (column) dem Label. */
.fyh-hero__proof .sgui-proof-item {
	flex-direction: var(--wp--custom--hero--proof-direction, row);
	align-items: var(--wp--custom--hero--proof-align, center);
	gap: var(--wp--custom--hero--proof-gap, 20px);
	justify-content: center;
	padding-block: var(--wp--custom--hero--proof-item-padding-block, 1.5rem);
}
.fyh-hero__proof .sgui-proof-item dt {
	line-height: var(--wp--custom--hero--proof-value-leading, 1.25);
	font-size: var(--wp--custom--hero--proof-value-size, 1.25rem);
	font-weight: var(--wp--custom--hero--proof-value-weight, 600);
}
.fyh-hero__proof .sgui-proof-item strong {
	color: var(--wp--custom--hero--proof-label, var(--foreground));
	font-weight: var(--wp--custom--hero--proof-label-weight, 500);
}
.fyh-hero__proof .sgui-proof-item dd span { color: var(--muted-foreground); }

/* Optionale Kurzmarke am ersten hellen Hero-Button (z. B. „Kostenlos“), pro Marke. */
.fyh-hero .fyh-hero__actions :is( .is-style-ie-light, .is-style-ie-inverted ):first-child { position: relative; }
:where(.fyh-hero) .fyh-hero__actions :is( .is-style-ie-light, .is-style-ie-inverted ):first-child::before {
	position: absolute;
	top: -.62rem;
	left: .75rem;
	z-index: 2;
	display: var(--wp--custom--hero--badge-display, none);
	padding: .15rem .45rem;
	border: 1px solid rgba( 255, 255, 255, .36 );
	border-radius: 6px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--on-dark, #fff);
	content: var(--wp--custom--hero--badge, "");
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	line-height: 1.2;
	text-transform: uppercase;
}
.fyh-hero__proof dt { margin: 0; }
.fyh-hero__proof dd {
	min-width: 0;
	max-width: 100%;
	grid-template-columns: minmax( 0, 1fr );
	margin: 0;
	color: var(--wp--custom--ui--muted-foreground);
	font-size: var(--wp--custom--hero--proof-label-size, .8125rem);
	line-height: 1.5;
	text-wrap: pretty;
	hyphens: auto;
	overflow-wrap: break-word;
}
/* A thin vertical rule stands left of value and label together (the content box height), both indent to its right. */
.fyh-hero__proof .sgui-proof-item > :is( dt, dd ) { padding-inline-start: 1rem; }
/* Desktop: each tile carries its own rule on the left (the last one also on the right), inset from the bar's top and bottom edge so it never touches the outer border. */
@media (min-width: 782px) {
	.fyh-hero__proof .sgui-proof-item,
	.fyh-hero__proof .sgui-proof-item:first-child { position: relative; border-inline-start: 0; padding-inline-start: 0; padding-inline-end: 1rem; }
	.fyh-hero__proof .sgui-proof-item::before,
	.fyh-hero__proof .sgui-proof-item:last-child::after { content: ""; position: absolute; inset-block: var(--wp--custom--hero--proof-rule-inset, 1.1rem); width: 1px; background: var(--wp--custom--hero--proof-rule, var(--wp--preset--color--hairline)); }
	.fyh-hero__proof .sgui-proof-item::before { inset-inline-start: 0; }
	.fyh-hero__proof .sgui-proof-item:last-child::after { inset-inline-end: 0; }
	/* Room on the right for the chat launcher (custom.hero.proofPaddingEnd). */
	.fyh-hero__proof { padding-inline-end: var(--wp--custom--hero--proof-padding-end, var(--wp--custom--layout--gutter, 5vw)); }
	.fyh-hero__proof .sgui-proof-item > :is( dt, dd ) { padding-inline-start: 1.25rem; }
}
@media (max-width: 781px) {
	.fyh-hero__proof .sgui-proof-item {
		background: linear-gradient( color-mix( in srgb, var(--foreground) 55%, transparent ), color-mix( in srgb, var(--foreground) 55%, transparent ) ) no-repeat left top / 1px 100% content-box border-box;
	}
}
.fyh-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 0; }

/* Mobil weniger Boden-Luft unter den Buttons (12vh wirkten wie ein Leerraum-Loch). */
@media (max-width: 781px) {
	/* Mobile-Layout je Marke (custom.hero.mobile*): Default = eigene Bildzeile und
	   einspaltige Nachweise; alternativ Portrait hinter der Copy mit 2x2-Raster. */
	.fyh-hero {
		grid-template-rows: auto auto auto;
		min-height: var(--wp--custom--hero--mobile-min-height, 0);
	}

	/* Explizites Zeilenende: bei absolut positionierten Rasterkindern meint "auto" den Rand des ganzen Heros. */
	.fyh-hero .sgui-hero__video-control {
		grid-row: 1;
		inset: var(--wp--custom--hero--mobile-video-control-inset, 5.5rem auto auto var(--wp--style--root--padding-left, 1.25rem));
	}

	.fyh-hero:has(.sgui-hero__video-control) .fyh-hero__inner {
		padding-block-start: max(var(--wp--custom--hero--mobile-inner-padding, 7rem), 9.25rem);
	}

	.fyh-hero__img,
	.fyh-hero .sgui-hero__video {
		position: var(--wp--custom--hero--mobile-image-position, relative);
		inset: var(--wp--custom--hero--mobile-image-inset, auto);
		/* Absolut positioniert misst das Bild an seiner Rasterzeile: Zeile 1 = ganze Buehne. */
		grid-row: var(--wp--custom--hero--mobile-image-row, 2);
		width: var(--wp--custom--hero--mobile-image-width, 100%);
		height: var(--wp--custom--hero--mobile-image-height, clamp( 13rem, 42vw, 20rem ));
		-webkit-mask-image: var(--wp--custom--hero--mobile-image-mask, none);
		mask-image: var(--wp--custom--hero--mobile-image-mask, none);
		-webkit-mask-composite: source-in;
		mask-composite: intersect;
		/* The phone crop can frame the person differently from the desktop one (custom.hero.mobileFocal). */
		object-position: var(--wp--custom--hero--mobile-focal, var(--fyh-hero-focal, center));
	}

	.fyh-hero__bg {
		display: var(--wp--custom--hero--mobile-scrim-display, none);
		background: var(--wp--custom--hero--mobile-scrim, none);
	}

	.fyh-hero__inner {
		padding-top: var(--wp--custom--hero--mobile-inner-top, 6.75rem);
		padding-bottom: var(--wp--custom--hero--mobile-inner-bottom, 2rem);
	}

	/* The pause control sits in the bottom corner of the stage: the copy ends above it, never behind it. */
	.fyh-hero[data-sgui-hero-video] .fyh-hero__inner {
		padding-bottom: max( var(--wp--custom--hero--mobile-inner-bottom, 2rem), 5rem );
	}

	.fyh-hero .fyh-hero-copy { max-width: 100% !important; }

	.fyh-hero .fyh-hero__title {
		max-width: var(--wp--custom--hero--mobile-title-max, 9.5ch);
		font-size: var(--wp--custom--hero--mobile-title-size, clamp( 2.5rem, 10.8vw, 3.65rem ));
	}

	.fyh-hero .wp-block-buttons {
		flex-direction: var(--wp--custom--hero--mobile-actions-direction, row);
		align-items: var(--wp--custom--hero--mobile-actions-align, center);
		width: var(--wp--custom--hero--mobile-actions-width, auto);
	}

	.fyh-hero .fyh-hero__actions .wp-block-button > .wp-block-button__link {
		width: var(--wp--custom--hero--mobile-button-width, 100%);
	}

	.fyh-hero .fyh-hero__sub { max-width: var(--wp--custom--hero--mobile-sub-width, 36rem) !important; }

	.fyh-hero__proof {
		grid-row: 3;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		padding: 1rem;
	}

	/* React-HeroProof: Spalten je Marke. Trennlinien entstehen als 1px-Rasterfuge
	   auf der Linienfarbe; so passen sie zu jeder Spaltenzahl. */
	.fyh-hero__proof:has( > .sgui-proof-item ) {
		grid-template-columns: var(--wp--custom--hero--mobile-proof-columns, minmax( 0, 1fr ));
		gap: var(--wp--custom--hero--mobile-proof-gap, 0);
		padding: var(--wp--custom--hero--mobile-proof-padding, 0 1.25rem);
		background: var(--wp--custom--hero--mobile-proof-surface, var(--wp--custom--hero--proof-surface, var(--wp--custom--ui--muted)));
	}

	.fyh-hero .fyh-hero__proof > .sgui-proof-item {
		justify-content: center;
		padding: var(--wp--custom--hero--mobile-proof-item-padding, 1.1rem 0);
		background-color: var(--wp--custom--hero--mobile-proof-item-surface, transparent);
	}

	.fyh-hero .fyh-hero__proof > .sgui-proof-item + .sgui-proof-item {
		border-block-start-width: var(--wp--custom--hero--mobile-proof-rule-width, 1px);
	}

}

@media ( max-width: 1099px ) {
	.fyh-hero__portrait-caption { display: none; }
}

/* CTAs: fluide clamp-Größe (oben) hält sie auf realen Phones (360px+) nebeneinander;
   flex-wrap ist das Sicherheitsnetz — am absoluten Extrem (≤320px) bricht die zweite
   Karte um statt abgeschnitten überzuschwappen. Nie clip, immer sauber. gap fluid. */
.fyh-hero .wp-block-buttons { flex-wrap: wrap; gap: clamp( .5rem, 1.5vw, .75rem ); }

/* --- Kontakt-Schiene: ruhige, helle Edge-Tabs. Die flache rechte Kante sitzt
   buendig am Viewport; Beschriftungen öffnen sich vollständig nach innen. */
/* Vertical anchor per brand (custom.fabs.top): centred by default, or at the hero copy. */
/* Contact rail colours are brand settings (theme.json custom.fabs: surface, foreground, edge, whatsapp, instagram).
   The default is the white edge tab with every icon in the brand colour; a dark rail sets surface and foreground,
   a colourful one gives WhatsApp and Instagram their own colours. */
.fyh-fabs { position: fixed; right: 0; top: var(--wp--custom--fabs--top, 50%); transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 40; --fyh-fab-surface: var(--wp--custom--fabs--surface, var(--wp--preset--color--base, #fff)); --fyh-fab-foreground: var(--wp--custom--fabs--foreground, var(--wp--preset--color--brand)); --fyh-fab-edge: var(--wp--custom--fabs--edge, var(--wp--preset--color--hairline)); --fyh-fab-whatsapp: var(--wp--custom--fabs--whatsapp, var(--fyh-fab-foreground)); --fyh-fab-instagram: var(--wp--custom--fabs--instagram, var(--fyh-fab-foreground)); }
/* text-align:left + font:inherit + border:0 resetten die <button>-Variante (Mail-FAB
   ist ein Dialog-Trigger, kein Link) auf dieselbe Optik wie die <a>-FABs. */
.fyh-fab { display: inline-flex; align-items: center; justify-content: flex-start; width: 58px; min-width: 58px; height: 46px; padding: 0 18px; border: 1px solid var(--fyh-fab-edge); border-right: 0; border-radius: calc( var(--wp--custom--button--radius, 8px) + 2px ) 0 0 calc( var(--wp--custom--button--radius, 8px) + 2px ); color: var(--fyh-fab-foreground); background: var(--fyh-fab-surface); font: inherit; text-align: left; text-decoration: none; cursor: pointer; overflow: hidden; transition: width .3s ease, background-color .2s ease; }
.fyh-fab svg { width: 19px; height: 19px; flex-shrink: 0; color: currentColor; }
/* Desktop hover: a quiet tint and the label slides out (phones show the icons only). */
.fyh-fab:is(:hover, :focus-visible) { background: color-mix(in srgb, var(--fyh-fab-foreground) 5%, var(--fyh-fab-surface)); }
.fyh-fab.is-whatsapp > svg { color: var(--fyh-fab-whatsapp); }
.fyh-fab.is-instagram > svg { color: var(--fyh-fab-instagram); }
/* hidden-Attribut schlägt sonst die SVG-display-Regel nicht (Icon-Toggle Share↔Haken). */
.fyh-fab__ico[hidden] { display: none; }
.fyh-fab__label { display: grid; grid-template-columns: 0fr; margin-left: 0; overflow: hidden; white-space: nowrap; font-size: .82rem; font-weight: 600; transition: grid-template-columns .3s ease, margin .3s ease; }
.fyh-fab__label > span { min-width: 0; overflow: hidden; }
.fyh-fab.is-feedback .fyh-fab__label {
	grid-template-columns: 1fr; margin-left: .55rem;
}
@media (min-width: 641px) and (hover: hover) {
.fyh-fab:hover .fyh-fab__label, .fyh-fab:focus-visible .fyh-fab__label { grid-template-columns: 1fr; margin-left: .55rem; }
.fyh-fab:hover, .fyh-fab:focus-visible { width: auto; }
}
.fyh-fab.is-feedback { width: auto; }
/* Stacked hero (tablet portrait): the rail follows the stacked stage height. */
@media (max-width: 781px) { .fyh-fabs { top: var(--wp--custom--fabs--top-stacked, var(--wp--custom--fabs--top, 50%)); } }
@media (max-width: 640px) { .fyh-fabs { display: none; } }
/* Phones: the two actions stack at their own width on the left, clear of the portrait. */
@media (max-width: 640px) { .fyh-hero .fyh-hero__actions { flex-direction: var(--wp--custom--hero--mobile-actions-direction, row); align-items: var(--wp--custom--hero--mobile-actions-align, flex-start); } }

/* Inverse outline is the same official variant with local on-photo roles. */
.fyh-hero .fyh-hero__actions .is-style-ie-outline-inverse,
.fyh-hero .fyh-hero__actions .is-style-ie-ghost {
	--wp--custom--ui--background: transparent;
	--wp--custom--ui--foreground: var(--wp--preset--color--on-dark);
	--wp--custom--ui--secondary: rgba( 255, 255, 255, .14 );
	--wp--custom--ui--secondary-foreground: var(--wp--preset--color--on-dark);
	--wp--custom--ui--border: rgba( 255, 255, 255, .5 );
}

/* Eyebrow-Marke je Marke: Default = shadcn-Badge; theme.json kann eine leisere
   Pill setzen (Groesse, Laufweite, Flaeche, Kontur, Farbe). */
.fyh-hero .fyh-hero-copy > .fyh-hero__eyebrow {
	padding: var(--wp--custom--hero--eyebrow-padding, revert-layer);
	border: var(--wp--custom--hero--eyebrow-border, revert-layer);
	background: var(--wp--custom--hero--eyebrow-surface, revert-layer);
	/* WordPress-Presetklassen (has-small-font-size, has-*-color) setzen !important. */
	color: var(--wp--custom--hero--eyebrow-color, var(--wp--preset--color--on-dark-soft)) !important;
	font-size: var(--wp--custom--hero--eyebrow-size, var(--wp--preset--font-size--small)) !important;
	font-weight: var(--wp--custom--hero--eyebrow-weight, revert-layer);
	letter-spacing: var(--wp--custom--hero--eyebrow-tracking, revert-layer);
}

@media (max-width: 781px) {
	.fyh-hero .fyh-hero-copy > .fyh-hero__eyebrow {
		padding: var(--wp--custom--hero--mobile-eyebrow-padding, var(--wp--custom--hero--eyebrow-padding, revert-layer));
		font-size: var(--wp--custom--hero--mobile-eyebrow-size, var(--wp--custom--hero--eyebrow-size, var(--wp--preset--font-size--small))) !important;
		letter-spacing: var(--wp--custom--hero--mobile-eyebrow-tracking, var(--wp--custom--hero--eyebrow-tracking, revert-layer));
	}
	.fyh-hero .fyh-hero__eyebrow::before {
		width: var(--wp--custom--hero--mobile-eyebrow-mark-width, var(--wp--custom--hero--eyebrow-mark-width, 11px));
		margin-right: var(--wp--custom--hero--mobile-eyebrow-mark-gap, var(--wp--custom--hero--eyebrow-mark-gap, .4rem));
	}
}