/**
 * Flying Makler – Site-weite Sektions-/Komponenten-Styles.
 * Ausgelagert aus theme.json (styles.css) für saubere Convention.
 * Tokens leben in theme.json; hier nur Layout/Sektions-CSS, das (noch) nicht
 * in einem Block kapselt.
 */

/* --- Schrift: Inter LOKAL (DSGVO — keine Google-Fonts-Verbindung) --------- */
@font-face {
	font-family: 'Inter';
	src: url('../fonts/InterVariable.woff2') format('woff2');
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

/* --- Schrift: Newsreader LOKAL für Überschriften (nur Latin, DSGVO) ------- */
@font-face {
	font-family: 'Newsreader';
	src: url('../fonts/Newsreader-latin.woff2') format('woff2');
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}

/* --- Struktur-Resets ------------------------------------------------------ */
.wp-block-template-part { margin-block: 0; }

/* GLOBALE Skalierungs-Absicherung: border-box überall. Ohne das addiert
   content-box das Padding ZUSÄTZLICH zur width:100% → das Element wird breiter
   als sein Container und schwappt horizontal über (genau der Hero-CTA-Bug bei
   320px). border-box = width schließt Padding ein → nichts wird je zu breit.
   Zusammen mit fluidem clamp (Größen skalieren mit vw) = kein Überlauf mehr. */
*, *::before, *::after { box-sizing: border-box; }

/* Kein horizontales Wegscrollen: full-bleed 100vw-Elemente (Carousel/Hero)
   sind sonst um die Scrollbar-Breite breiter als der Viewport. clip statt
   hidden, damit position:sticky/anchor-scroll unangetastet bleiben. */
html, body { overflow-x: clip; max-width: 100%; }

/* ZENTRALER Foto-Übergang (EIN Ort, überall derselbe — User 22.07.):
   Der Scrim liegt ueber der GANZEN Komponente und bleibt bis hinter die
   Foto-Zonenkante voll-Ink. So kann die Bildkante nie als Strich auftauchen.
   Verwender: .fyh-service-cta::before (ueber der Foto-Zone in ::after). */
:root {
	--fyh-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
	--fyh-display-weight: 500;
	--fyh-display-tracking: -.012em;
	--fyh-nav-height: 76px;
	/* Vertikaler Systemrhythmus: theme.json ist die einzige Rohskala. Diese
	   semantischen Aliase beschreiben den Zweck, nicht einen freien Pixelwert. */
	--fyh-flow-content: var( --wp--preset--spacing--40, clamp( 1.25rem, 2.5vw, 1.75rem ) );
	--fyh-flow-section: var( --wp--preset--spacing--50, clamp( 2rem, 4vw, 3rem ) );
	--fyh-service-content-gap: var( --fyh-flow-content );
	--fyh-service-section-gap: var( --fyh-flow-section );
	--fyh-scrim-photo: linear-gradient( 90deg,
		var(--wp--preset--color--navy) 0%,
		var(--wp--preset--color--navy) 34%,
		color-mix( in srgb, var(--wp--preset--color--navy) 96%, transparent ) 40%,
		color-mix( in srgb, var(--wp--preset--color--navy) 82%, transparent ) 46%,
		color-mix( in srgb, var(--wp--preset--color--navy) 52%, transparent ) 54%,
		color-mix( in srgb, var(--wp--preset--color--navy) 24%, transparent ) 62%,
		color-mix( in srgb, var(--wp--preset--color--navy) 8%, transparent ) 68%,
		color-mix( in srgb, var(--wp--preset--color--navy) 0%, transparent ) 74% );
	/* Vertikale Variante (22.07.): Foto-Panels, deren Text UNTEN sitzt.
	   Oben fast frei (Foto atmet), Mitte sanft, unten deckend genug
	   fuer weisse Zeilen. Verwender: bewertung-, rueckruf-Panels. */
	--fyh-scrim-photo-y: linear-gradient( 180deg,
		color-mix( in srgb, var(--wp--preset--color--navy) 14%, transparent ) 0%,
		color-mix( in srgb, var(--wp--preset--color--navy) 30%, transparent ) 45%,
		color-mix( in srgb, var(--wp--preset--color--navy) 78%, transparent ) 100% );
	/* Kleine Foto-Karten brauchen bereits hinter dem Titel eine belastbare
	   Ink-Basis; ein weißer Wash verliert auf hellen Fotos jede Hierarchie. */
	--fyh-scrim-card-y: linear-gradient( 180deg,
		color-mix( in srgb, var(--wp--preset--color--navy) 12%, transparent ) 0%,
		color-mix( in srgb, var(--wp--preset--color--navy) 28%, transparent ) 34%,
		color-mix( in srgb, var(--wp--preset--color--navy) 72%, transparent ) 58%,
		color-mix( in srgb, var(--wp--preset--color--navy) 92%, transparent ) 78%,
		color-mix( in srgb, var(--wp--preset--color--navy) 96%, transparent ) 100% );
}

/* --- Footer: flache Ink/Bordeaux-Flaeche mit derselben weichen Kante wie der Hero. --- */
.fyh-footer-wrap { overflow: hidden; padding-inline: var(--wp--custom--layout--gutter, var(--wp--style--root--padding-left, 1.5rem)); border-top: 0; border-radius: var(--wp--custom--radius--edge, var(--wp--custom--radius--lg, 28px)) var(--wp--custom--radius--edge, var(--wp--custom--radius--lg, 28px)) 0 0; background: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); }
.fyh-footer { max-width: none; margin-inline: 0; padding: clamp( 3rem, 6vw, 5rem ) 0 clamp( 1.5rem, 3vw, 2.25rem ); color: var(--wp--preset--color--on-dark, #fff); }
.fyh-footer__cols { display: grid !important; grid-template-columns: minmax( 20rem, 1.7fr ) repeat( 2, minmax( 10rem, .65fr ) ); gap: clamp( 2rem, 5vw, 5rem ) !important; margin: 0 0 clamp( 2.5rem, 5vw, 4rem ); }
.fyh-footer__cols > .wp-block-column { width: auto !important; min-width: 0 !important; margin: 0; flex-basis: auto !important; }
.fyh-footer__logo img { height: auto; filter: brightness( 0 ) invert( 1 ); opacity: .96; }
.fyh-footer__tag { max-width: 43ch; margin: 1rem 0 0; color: rgba( 255, 255, 255, .72 ); font-size: .9rem; line-height: 1.6; text-wrap: pretty; }
.fyh-footer__label { margin: 0 0 1rem; color: rgba( 255, 255, 255, .74 ); font-size: .7rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.fyh-footer__links, .fyh-footer__contact-lines { margin: 0; font-size: .88rem; line-height: 2.05; }
.fyh-footer__links a, .fyh-footer__contact-lines a { color: rgba( 255, 255, 255, .88 ); text-decoration: none; transition: color .18s ease, opacity .18s ease; }
.fyh-footer__links a:hover, .fyh-footer__contact-lines a:hover { color: #fff; }
.fyh-footer__links a:focus-visible, .fyh-footer__contact-lines a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 3px; }
.fyh-footer__contact-lines { margin-top: .9rem; line-height: 1.75; }
.fyh-footer__contact-lines a[href^='mailto:'] { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
.fyh-footer__address {
	display: flex;
	align-items: flex-start;
	gap: .65rem;
	width: fit-content;
	margin: 1.25rem 0 0;
	padding: .72rem .78rem;
	border: 1px solid rgba( 255, 255, 255, .16 );
	border-radius: 14px;
	background: rgba( 255, 255, 255, .06 );
	color: rgba( 255, 255, 255, .9 );
	font-size: .84rem;
	font-style: normal;
	line-height: 1.45;
}
.fyh-footer__address-icon {
	display: inline-flex;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba( 255, 255, 255, .16 );
	border-radius: 10px;
	background: rgba( 255, 255, 255, .08 );
	color: #fff;
}
.fyh-footer__address-icon svg { width: 16px; height: 16px; }
@media ( max-width: 1000px ) {
	.fyh-footer__cols { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); }
	.fyh-footer__brand { grid-column: 1 / -1; max-width: 42rem; }
}
@media ( max-width: 640px ) {
	.fyh-footer { padding-block-start: 3rem; }
	.fyh-footer__cols { grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); gap: 2.25rem 1.25rem !important; }
	.fyh-footer__brand { grid-column: 1 / -1; }
	.fyh-footer__links { font-size: .82rem; }
}
@media ( max-width: 359px ) {
	.fyh-footer__cols { grid-template-columns: 1fr; }
	.fyh-footer__brand { grid-column: auto; }
}
.fyh-footer__bar { gap: .75rem; padding-top: clamp( 1.25rem, 3vw, 1.75rem ); border-top: 1px solid rgba( 255, 255, 255, .22 ); }
.fyh-footer__fine { margin: 0; color: rgba( 255, 255, 255, .78 ); font-size: .78rem; }

/* --- Navbar: Flying-Makler-spezifische Theme-Overrides (Block bleibt generisch) */
.sgui-nav { --sgui-nav-height: var(--fyh-nav-height); }
.sgui-nav__logo { height: clamp(2.4rem, 2.75vw, 3rem); max-width: min(15rem, 42vw); margin-left: 0; }
@media (max-width: 759px) { .sgui-nav__cta { display: inline-flex; padding-left: .9rem; padding-right: .9rem; }
}

/* Homepage-Bloecke besitzen ihre Abstaende selbst. Der globale Gutenberg-
   Block-Gap erzeugt zwischen Full-Bleed-Sektionen sonst leere Zwischenbaender. */
body.home .entry-content > .alignfull { margin-block-start: 0; }

/* --- Objekt-Sektion-Anker ------------------------------------------------- */
/* Anchor jumps land below the fixed navigation; the section keeps the shared rhythm. */
:is([id="objekte"], [id="objekte-region"]) { scroll-margin-top: calc( var(--fyh-nav-height, 76px) + 1rem ); }

/* --- Objektbeschreibung: lesbare Prosa (Butterling-Pattern) -------------- */
.fyh-prose .wp-block-post-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: color-mix( in srgb, var(--wp--preset--color--ink) 82%, transparent );
}
.fyh-prose .wp-block-post-content p { margin: 0 0 1.25rem; }
.fyh-prose .wp-block-post-content p:last-child { margin-bottom: 0; }
.fyh-prose .wp-block-post-content h2,
.fyh-prose .wp-block-post-content h3 {
	margin: 2rem 0 .75rem;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--wp--preset--color--ink);
}
.fyh-prose .wp-block-post-content ul,
.fyh-prose .wp-block-post-content ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.fyh-prose .wp-block-post-content li { margin: 0 0 .4rem; }

/* --- Rechtsseiten (Template page-legal: Impressum/Datenschutz/Widerruf) ---- */
/* WP-Root-blockGap-Killer: main als zweites Root-Kind bekommt sonst 24px
   margin-block-start -> weisser Streifen ueber dem Ink-Band (Artikel-Lektion). */
.wp-site-blocks > .fyh-legalmain { margin-block-start: 0; }

/* Kompaktes Ink-Band wie der Artikel-Kopf, nur ohne Bild/Meta. */
.fyh-legalhero {
	background: linear-gradient( 135deg, var(--wp--preset--color--ink), var(--wp--preset--color--ink-deep) );
	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));
	padding-top: clamp( 6.5rem, 15vh, 9rem );
	padding-bottom: clamp( 1.75rem, 3.5vw, 2.75rem );
}
.fyh-legalhero__eyebrow {
	--sgui-rubric-margin: .55rem;
	--sgui-rubric-color: var(--wp--preset--color--on-dark-soft);
}
.fyh-legalhero .fyh-legalhero__title {
	margin: 0;
	font-size: clamp( 2rem, 3.4vw, 2.8rem );
	font-weight: 600; letter-spacing: -.02em; line-height: 1.1;
	color: #fff;
}

/* --- Lage-Seiten (Template page-lage): Foto-Band statt Ink-Verlauf ------- */
/* Die Foto-Var setzt das Lagen-Plugin per wp_head (Stadtteil-Foto);

/* Lage-Portraits (Hub): weisse Karten + Namens-Chips (Butterling-Muster). */
.fyh-lage-portraits {
	display: grid;
	gap: 1rem;
	margin: 1.25rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 760px) {
	.fyh-lage-portraits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fyh-lage-portrait {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--custom--radius--md, 16px);
	background: var(--wp--preset--color--base);
	padding: 1.25rem 1.35rem 1.2rem;
	box-shadow: 0 1px 2px color-mix( in srgb, var(--wp--preset--color--ink-deep) 4%, transparent );
}

.fyh-lage-portrait h3 {
	margin: 0 0 .5rem;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -.015em;
	color: var(--wp--preset--color--ink);
}

.fyh-lage-portrait p {
	margin: 0;
	font-size: .9rem;
	line-height: 1.65;
	color: color-mix( in srgb, var(--wp--preset--color--ink) 72%, #fff );
}

.fyh-lage-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	margin-top: auto;
	padding-top: .9rem;
}

.fyh-lage-chips a {
	display: inline-flex;
	padding: .28rem .7rem;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 999px;
	background: var(--wp--preset--color--surface);
	font-size: .74rem;
	font-weight: 600;
	color: color-mix( in srgb, var(--wp--preset--color--ink) 80%, #fff );
	text-decoration: none;
	transition: border-color .18s ease, background .18s ease;
}

.fyh-lage-chips a:hover {
	border-color: color-mix( in srgb, var(--wp--preset--color--ink) 40%, transparent );
	background: var(--wp--preset--color--base);
}

/* Prose — gleiche Lesesprache wie artikel-prose, auf 760px contentSize. */
.fyh-legalprose { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--60); }
/* Im Service-Raster (Legal-Template mit Inhaltsverzeichnis) beginnt die Lesespalte wie bei
   den Leistungsseiten direkt neben dem TOC und auf seiner Höhe; die Kante liefert das Raster. */
.fyh-legalbody .fyh-legalprose { padding-top: 0; padding-inline: 0; }
.fyh-legalprose p {
	margin: 1rem 0;
	color: color-mix( in srgb, var(--wp--preset--color--ink) 82%, #fff );
	font-size: clamp( .98rem, 1.2vw, 1.05rem ); line-height: 1.7;
}
.fyh-legalprose h2 {
	/* Kein Akzentbalken wie im Artikel: auf dichten Rechtsseiten wirkt der
	   Strich wie ein verirrter Gedankenstrich — ruhige Hairline stattdessen. */
	margin: 2.5rem 0 .9rem; padding-bottom: .45rem;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	font-size: clamp( 1.3rem, 1.9vw, 1.55rem ); font-weight: 600; letter-spacing: -.035em; line-height: 1.15;
	color: var(--wp--preset--color--ink); scroll-margin-top: 6.5rem;
}
.fyh-legalprose h3 {
	margin: 1.9rem 0 .6rem;
	font-size: clamp( 1.08rem, 1.5vw, 1.22rem ); font-weight: 600; letter-spacing: -.01em;
	color: var(--wp--preset--color--ink); scroll-margin-top: 6.5rem;
}
.fyh-legalprose > .wp-block-post-content > h2:first-child,
.fyh-legalprose > .wp-block-post-content > p:first-child,
.fyh-legalprose.wp-block-post-content > h2:first-child,
.fyh-legalprose.wp-block-post-content > p:first-child { margin-top: 0; }
.fyh-legalprose a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--hairline); text-underline-offset: 3px;
	transition: text-decoration-color .18s ease;
}
.fyh-legalprose a:not(.wp-block-button__link):hover { text-decoration-color: var(--wp--preset--color--ink); }

/* Eingebettete Sektions-Blocks in der Prose (Objekt-Carousel, Stadtteil-
   Cards): Prose-Link-Optik (Unterstreichung/Gewicht) NICHT vererben —
   die Karten bringen ihre eigene Link-Sprache mit. */
.fyh-legalprose .fyh-objsection a,
.fyh-legalprose .sgui-lagecards a,
.fyh-legalprose .sgui-lagen a,
.fyh-legalprose .fyh-lage-chips a {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}

@media ( prefers-reduced-motion: reduce ) { .fyh-legalprose a { transition: none; }
}

/* --- Leistungsseiten: Landingpage-Hierarchie + Artikel-Lesbarkeit --------- */
.wp-site-blocks > .fyh-service-main { margin-block-start: 0; }

.fyh-service-hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp( 7.5rem, 14vh, 9rem ) max( var(--wp--style--root--padding-left, 1.25rem), 1.25rem ) clamp( 2.75rem, 5vw, 4rem );
	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-color: var(--wp--preset--color--ink);
	/* Copy sits left: the directional brand scrim carries it, a light floor keeps the
	   navbar readable over bright photos on the right. */
	--fyh-service-hero-floor: linear-gradient( color-mix( in srgb, var(--wp--preset--color--ink-deep) 18%, transparent ) 0 0 );
	background-image:
		var(--fyh-service-hero-overlay, var(--wp--custom--ui--scrim-copy, linear-gradient( 90deg, color-mix( in srgb, var(--wp--preset--color--ink-deep) 72%, transparent ) 0%, color-mix( in srgb, var(--wp--preset--color--ink-deep) 52%, transparent ) 43%, color-mix( in srgb, var(--wp--preset--color--ink-deep) 20%, transparent ) 100% ))),
		var(--fyh-service-hero-floor),
		var(--fyh-service-hero-image, none);
	background-position: center, center, var(--fyh-service-hero-position, center);
	background-size: cover, cover, var(--fyh-service-hero-size, cover);
	background-repeat: no-repeat;
	color: #fff;
}

/* Stacked on phones the copy spans the width: darken from the top instead. */
@media ( max-width: 781px ) {
	.fyh-service-hero {
		background-image:
			var(--fyh-service-hero-overlay, var(--wp--custom--ui--scrim-copy-stack, linear-gradient( 90deg, color-mix( in srgb, var(--wp--preset--color--ink-deep) 72%, transparent ) 0%, color-mix( in srgb, var(--wp--preset--color--ink-deep) 52%, transparent ) 43%, color-mix( in srgb, var(--wp--preset--color--ink-deep) 20%, transparent ) 100% ))),
			var(--fyh-service-hero-floor),
			var(--fyh-service-hero-image, none);
	}
}

/* Foto-Ebene MIT Blend (Gesetz: keine harten Bildkanten): Bild sitzt nur
   rechts und laeuft links weich in die Ink-Flaeche aus. Liegt UEBER dem
   Overlay → die Person wird nie vom Scrim erstickt; Lesbarkeit links
   kommt aus der reinen Ink-Zone + Glow, nicht aus Abdunklung. */
/* Homepage-Hero-Muster (das cleane): das Foto FUELLT eine randlose Zone
   rechts per cover — es gibt schlicht KEINE Bildkanten. Der Scrim (::after)
   liegt wie beim Startseiten-Hero UEBER dem Foto: voll-Ink deckt die linke
   Zonenkante, dann klingt er stufenlos ueber dem Foto aus. */
.fyh-service-hero::before {
	content: '';
	position: absolute;
	inset: 0 0 0 var(--fyh-service-hero-photo-left, 40%);
	z-index: 0;
	pointer-events: none;
	background: var(--fyh-service-hero-photo, none) var(--fyh-service-hero-photo-position, center top) / var(--fyh-service-hero-photo-size, cover) no-repeat;
	-webkit-mask-image: var(--fyh-service-hero-photo-mask, none);
	mask-image: var(--fyh-service-hero-photo-mask, none);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.page-slug-suchprofil {
	--fyh-service-hero-image: url('../images/ratgeber/kfw-300-wohneigentum-fuer-familien.webp');
	--fyh-service-hero-position: center 60%;
}


/* Stadtteil-Hub: visueller Explorer statt Service-TOC. Karte und Foto-Cards
   tragen die Orientierung; Text bleibt kurz und auf derselben 1248er Achse. */
.fyh-lagehub-intro,
.fyh-lagehub-portraits,
.fyh-lagehub-cta {
	/* Full-bleed: WordPress' alignfull margins widen the band to both edges - a fixed width would only shift it. */
	box-sizing: border-box;
	margin-block: 0;
	padding-right: var(--wp--custom--layout--gutter, clamp( 1.5rem, 5vw, 6rem ));
	padding-left: var(--wp--custom--layout--gutter, clamp( 1.5rem, 5vw, 6rem ));
}

.fyh-lagehub-intro { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--20); }
.fyh-lagehub__inner { max-width: 78rem; margin-inline: auto; }
.fyh-lagehub__breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-bottom: 1.25rem; color: var(--wp--preset--color--muted); font-size: .78rem; }
.fyh-lagehub__breadcrumb a { color: var(--wp--preset--color--ink); font-weight: 650; text-decoration-color: var(--wp--preset--color--hairline); text-underline-offset: 3px; }
.fyh-lagehub__lead { max-width: 72ch; margin: 0; color: color-mix( in srgb, var(--wp--preset--color--ink) 76%, #fff ); font-size: clamp( 1rem, 1.35vw, 1.12rem ); line-height: 1.7; text-wrap: pretty; }
.fyh-lagehub-explorer { margin: 0; scroll-margin-top: calc( var(--fyh-nav-height) + 1.5rem ); }
.fyh-lagehub-explorer > .sgui-lagecards { margin: 0; }
.fyh-lagehub-portraits { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); background: var(--wp--preset--color--surface); }
.fyh-lagehub-portraits .fyh-objhead { margin-bottom: var(--wp--preset--spacing--40); }
.fyh-lagehub-cta { padding-top: var(--wp--preset--spacing--50); padding-bottom: var(--wp--preset--spacing--60); }
.fyh-lagehub-cta .fyh-service-cta { max-width: 78rem; margin: 0 auto; }

/* Porträt-Köpfe (Über uns, Karriere): Daniel steht in einer eigenen Bildspalte rechts.
   Kein Scrim und keine Maske liegen über ihm – nur der Wandrand links neben ihm läuft
   ins Ink aus, und die Copy endet vor der Spalte. Gestapelt wird das Foto eine eigene Zeile. */
:is( .page-slug-ueber-uns, .page-slug-karriere ) {
	--fyh-portrait-w: clamp( 20rem, 34vw, 30rem );
	--fyh-service-hero-photo-size: cover;
}
/* Each portrait names the tone of its own backdrop: the head floor runs from ink into that
   tone under the photo column, so the eased edge lands on matching colour and no rectangle shows. */
.page-slug-ueber-uns { --fyh-service-hero-photo: url('../images/daniel-ueber-uns.webp'); --fyh-service-hero-photo-position: center 4%; --fyh-photo-backdrop: #0f141b; }
:is( .page-slug-ueber-uns, .page-slug-karriere ) .fyh-service-hero {
	background-image:
		linear-gradient( 90deg, var(--wp--preset--color--ink) 0%, var(--wp--preset--color--ink) calc( 100% - var(--fyh-portrait-w) - 6rem ), var(--fyh-photo-backdrop) 100% );
}
:is( .page-slug-ueber-uns, .page-slug-karriere ) .fyh-service-hero::before {
	/* The column starts under the navbar so the header actions never touch his head; the
	   eased edge (ui.photoEdge) softens the wall beside and above him. */
	inset: calc( var(--fyh-nav-height, 76px) - .25rem ) 0 0 auto;
	width: var(--fyh-portrait-w);
	-webkit-mask-image: var(--wp--custom--ui--photo-edge), var(--wp--custom--ui--photo-edge-top);
	-webkit-mask-composite: source-in;
	mask-image: var(--wp--custom--ui--photo-edge), var(--wp--custom--ui--photo-edge-top);
	mask-composite: intersect;
}
:is( .page-slug-ueber-uns, .page-slug-karriere ) .fyh-service-hero__inner { max-width: min( 52rem, calc( 100% - var(--fyh-portrait-w) + var(--wp--custom--layout--gutter, 1.5rem) - 2rem ) ); }

@media ( max-width: 781px ) {
	:is( .page-slug-ueber-uns, .page-slug-karriere ) .fyh-service-hero { display: flex; flex-direction: column; padding-bottom: 0; }
	:is( .page-slug-ueber-uns, .page-slug-karriere ) .fyh-service-hero__inner { max-width: none; }
	:is( .page-slug-ueber-uns, .page-slug-karriere ) .fyh-service-hero::before {
		position: relative;
		order: 2;
		inset: auto;
		width: auto;
		height: clamp( 20rem, 92vw, 28rem );
		margin: 2rem calc( -1 * var(--wp--custom--layout--gutter, 1.5rem) ) 0;
		-webkit-mask-image: linear-gradient( 180deg, transparent 0%, #000 6% );
		mask-image: linear-gradient( 180deg, transparent 0%, #000 6% );
		-webkit-mask-composite: source-over;
		mask-composite: add;
	}
}

.fyh-service-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 52rem;
	margin-right: auto !important;
	margin-left: 0 !important;
}

.fyh-service-hero__inner > * {
	margin-right: 0 !important;
	margin-left: 0 !important;
}

.fyh-service-hero__eyebrow {
	--sgui-rubric-margin: .8rem;
	--sgui-rubric-color: var(--wp--preset--color--on-dark-soft);
}

.fyh-service-hero__title {
	max-width: 18ch;
	margin: 0;
	text-wrap: balance;
	color: #fff;
	font-size: clamp( 2.25rem, 5vw, 4.25rem );
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1.03;
	text-shadow: var(--wp--custom--glow--title);
}

.fyh-service-hero__lead {
	max-width: 44rem;
	margin: 1rem 0 0;
	text-wrap: pretty;
	color: rgba( 255, 255, 255, .88 );
	font-size: clamp( 1rem, 1.35vw, 1.14rem );
	line-height: 1.65;
	filter: var(--wp--custom--glow--soft);
}

.fyh-service-hero__actions {
	margin-top: 1.5rem;
}

.fyh-service-hero__actions .wp-block-button__link {
	font-weight: 600;
}

/* Native button geometry, variants and states: theme.json + components.css (WordPress). */

/* Dunkle Buehnen besitzen denselben Button-Katalog, aber einen anderen
   Kontrastkontext. Die konkreten Hero-Selektoren gewinnen gegen die
   globalen Core-Zustaende und erhalten den weissen Text beim Hover. */
:where(.fyh-hero) .fyh-hero__actions .wp-block-button:is( .is-style-ie-ghost, .is-style-ie-outline-inverse ) > :where(.wp-block-button__link.wp-element-button):hover,
:where(.fyh-service-hero) .fyh-service-hero__actions .wp-block-button:is( .is-style-ie-ghost, .is-style-ie-outline-inverse ) > :where(.wp-block-button__link.wp-element-button):hover {
	background: rgba( 255, 255, 255, .16 );
	color: #fff;
}

.fyh-service-body {
	padding-block: clamp( 2.25rem, 5vw, 4rem ) clamp( 2rem, 4vw, 3rem );
	padding-inline: var(--wp--custom--layout--gutter, clamp( 1.5rem, 5vw, 6rem ));
}

/* Der Abschluss-CTA braucht auf jeder Service-Seite einen sichtbaren,
   kontrollierten Auslauf zum Footer statt einer harten Dunkel-an-Dunkel-Kante. */
.fyh-service-main {
	padding-bottom: clamp( 1.5rem, 3vw, 2.25rem );
}

/* Erste Inhaltszone nach dem Hero: systemweit Luft vor TOC + Copy.
   Verhindert, dass "Auf dieser Seite" optisch an der Nav klebt. */
.fyh-service-hero + .fyh-service-body {
	margin-block-start: 0;
	padding-top: clamp( 3rem, 6vw, 4.5rem );
}

.fyh-service-layout {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 2rem;
	width: 100%;
	max-width: 70rem;
	margin-inline: auto;
}

.fyh-service-content {
	width: 100%;
	min-width: 0;
	max-width: 47rem;
	margin-inline: auto;
}

.fyh-service-content,
.fyh-service-section,
.fyh-service-section > * {
	min-width: 0;
	max-width: 100%;
}

/* Wenn eine Seite bewusst kein Inhaltsverzeichnis hat, darf ihr einziger
   Content-Block nie in der für die TOC reservierten schmalen Spalte landen. */
.fyh-service-layout > .fyh-service-content:only-child {
	grid-column: 1 / -1;
	width: 100%;
	justify-self: center;
}

/* Seiten ohne TOC können trotzdem einen direkten Abschluss-CTA als zweites
   Kind besitzen. Der Content ist dann nicht :only-child, bleibt aber Besitzer
   der vollen ersten Zeile. */
.fyh-service-layout > .fyh-service-content:first-child {
	grid-column: 1 / -1;
	justify-self: center;
	margin-inline: auto;
}

.fyh-service-section {
	min-width: 0;
}

.fyh-service-section + .fyh-service-section {
	margin-top: var(--fyh-service-section-gap);
	padding-top: var(--fyh-service-section-gap);
	border-top: 1px solid var(--wp--preset--color--hairline);
}

/* Gemeinsamer Inhaltsrhythmus: Listen, Karten, Hinweise und Aktionen beginnen
   auf jeder Leistungsseite auf derselben Achse. Explizite Komponentenabstände
   bleiben Besitzer ihrer internen Geometrie; hier wird nur der Grundabstand
   vom vorausgehenden Text bzw. Titel gesetzt. */
.fyh-service-section > :is(
	.wp-block-list,
	.wp-block-columns,
	.wp-block-table,
	.wp-block-buttons,
	.fyh-service-points,
	.fyh-service-steps,
	.fyh-service-note,
	.fyh-service-links,
	.fyh-service-faq,
	.fyh-service-section__actions
) {
	margin-top: var(--fyh-service-content-gap);
}


.fyh-service-h2 {
	max-width: 25ch;
	margin: 0;
	text-wrap: balance;
	color: var(--wp--preset--color--ink);
	font-size: clamp( 1.875rem, 3vw, 2.75rem );
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.15;
	overflow-wrap: anywhere;
	scroll-margin-top: calc( var(--fyh-nav-height) + 2rem );
}

body.admin-bar .fyh-service-h2 {
	scroll-margin-top: calc( var(--fyh-nav-height) + 4rem );
}

.fyh-service-answer {
	max-width: 65ch;
	margin: 1rem 0 0;
	text-wrap: pretty;
	color: color-mix( in srgb, var(--wp--preset--color--ink) 78%, #fff );
	font-size: clamp( 1.04rem, 1.3vw, 1.14rem );
	line-height: 1.72;
}

.fyh-service-section > p:not([class]) {
	max-width: 68ch;
	margin: 1rem 0 0;
	text-wrap: pretty;
	color: color-mix( in srgb, var(--wp--preset--color--ink) 76%, #fff );
	font-size: 1rem;
	line-height: 1.72;
}

.fyh-service-content a:not(.wp-block-button__link) {
	color: var(--wp--preset--color--ink);
	font-weight: 650;
	text-decoration-color: var(--wp--preset--color--hairline);
	text-underline-offset: 3px;
}

.fyh-service-content a:not(.wp-block-button__link):hover {
	text-decoration-color: currentColor;
}

/* Typeset typography is owned by components/typography/typeset.css. */

.fyh-service-points {
	display: grid;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.fyh-service-point {
	display: grid;
	gap: .55rem;
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.fyh-service-point h3,
.fyh-service-step h3,
.fyh-service-note h3 {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 1.04rem;
	font-weight: 600;
	letter-spacing: -.015em;
}

.fyh-service-point p,
.fyh-service-step p,
.fyh-service-note p {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: .94rem;
	line-height: 1.65;
}

/* Objektart-Karten werden ab 640px zweispaltig. Nachfolgende Checklisten
   muessen die volle Kartenachse nutzen; Auto-Placement sperrt sie sonst in
   der schmalen 14rem-Ueberschriftenspalte ein. */
.fyh-service-point > .wp-block-list {
	grid-column: 1 / -1;
	width: 100%;
	margin-top: .45rem;
}

.fyh-service-steps {
	display: grid;
	border-top: 1px solid var(--wp--preset--color--hairline);
	counter-reset: service-step;
}

.fyh-service-step {
	display: grid;
	grid-template-columns: 3rem minmax( 0, 1fr );
	gap: .25rem 1.15rem;
	padding: 1.35rem 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
	counter-increment: service-step;
}

.fyh-service-step::before {
	grid-row: 1 / span 2;
	content: counter( service-step, decimal-leading-zero );
	color: var(--wp--preset--color--ink);
	font-size: 1.75rem;
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1;
}

.fyh-service-note {
	padding: 1.25rem 1.35rem;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.fyh-service-note p {
	margin-top: .45rem;
}

.fyh-service-links {
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.fyh-service-links p {
	margin: 0;
}

.fyh-service-faq {
	border-top: 1px solid var(--wp--preset--color--hairline);
}

.fyh-service-faq details {
	padding: 0;
	border-bottom: 1px solid var(--wp--preset--color--hairline);
}

.fyh-service-faq summary {
	position: relative;
	min-height: 3.5rem;
	padding: 1rem 2.25rem 1rem 0;
	cursor: pointer;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	list-style: none;
}

.fyh-service-faq summary::-webkit-details-marker {
	display: none;
}

.fyh-service-faq summary::after {
	position: absolute;
	top: 50%;
	right: .2rem;
	content: '+';
	color: var(--wp--preset--color--muted);
	font-size: 1.25rem;
	font-weight: 400;
	transform: translateY( -50% );
}

.fyh-service-faq details[open] summary::after {
	content: '−';
}

.fyh-service-faq summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}

.fyh-service-faq details p {
	margin: -.15rem 0 1.1rem;
	color: var(--wp--preset--color--muted);
}

.fyh-service-cta {
	position: relative;
	display: grid;
	grid-template-areas:
		'media'
		'copy'
		'actions';
	gap: 1.25rem;
	width: 100%;
	max-width: 70rem;
	margin: clamp( 3rem, 5vw, 4rem ) auto 0;
	padding: clamp( 1.5rem, 3vw, 2.25rem );
	overflow: hidden;
	border-radius: 20px;
	background: var(--wp--preset--color--ink);
	color: #fff;
}

/* Stacked: Daniel sits in his own framed photo above the copy – no fade and no scrim
   ever lies over him (phones: the whole square, tablets: head to chest). */
@media ( max-width: 959px ) {
	.fyh-service-cta::before {
		aspect-ratio: 1;
		min-height: 0;
		border-radius: var(--wp--custom--radius--md, 16px);
		background: url('../images/daniel-beratung-2026.webp') center 22% / cover no-repeat;
	}
}

@media ( min-width: 600px ) and ( max-width: 959px ) {
	.fyh-service-cta::before { aspect-ratio: 16 / 9; }
}

.fyh-service-layout > .fyh-service-cta {
	grid-column: 1 / -1;
	justify-self: stretch;
}

/* Ein eigener, katalogisierter CTA-Abschnitt besitzt seinen Abstand bereits
   ueber .fyh-service-body. Ein zweiter CTA-Margin wuerde wieder eine leere
   Pseudo-Zeile zwischen Funnel und Abschluss erzeugen. */
.fyh-service-body > .fyh-service-cta {
	margin-top: 0;
}

/* Rueckwaertskompatibel bis die Inhaltsmigration auf allen Umgebungen lief:
   nie wieder aus einer 47rem-Contentspalte in den Viewport ausbrechen. */
.fyh-service-content > .fyh-service-cta {
	width: 100%;
	max-width: 100%;
}

.fyh-service-cta::before {
	grid-area: media;
	min-height: clamp( 12rem, 42vw, 16rem );
	content: '';
}

.fyh-service-cta__copy {
	grid-area: copy;
}

.fyh-service-cta__title {
	max-width: 24ch;
	margin: 0;
	text-wrap: balance;
	color: #fff;
	font-size: clamp( 1.45rem, 2.5vw, 2rem );
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.15;
	/* German compounds must break inside the narrow CTA column. */
	hyphens: auto;
	overflow-wrap: break-word;
}

.fyh-service-cta__copy p {
	max-width: 48rem;
	margin: .65rem 0 0;
	text-wrap: pretty;
	color: rgba( 255, 255, 255, .7 );
	font-size: .94rem;
	line-height: 1.6;
}

.fyh-service-cta .wp-block-buttons {
	grid-area: actions;
	gap: .75rem;
	margin: 0;
}

@media ( min-width: 640px ) {
	.fyh-service-point {
		grid-template-columns: minmax( 10rem, 14rem ) minmax( 0, 1fr );
		gap: 1.5rem;
	}
}


@media ( min-width: 960px ) {
	.fyh-service-cta {
		grid-template-areas:
			'copy media'
			'actions media';
		grid-template-columns: minmax( 0, .82fr ) minmax( 25rem, 1.18fr );
		align-items: end;
		column-gap: clamp( 2rem, 4vw, 3.5rem );
		/* Personenbuehne wie im Haupt-Hero: Die linke Copy bleibt ruhig,
		   Daniel und Laptop erhalten rechts eine echte, unbeschnittene Zone. */
		position: relative;
		min-height: clamp( 27rem, 34vw, 30rem );
		padding: clamp( 2.25rem, 4vw, 3.25rem );
		border: 1px solid rgba( 255, 255, 255, .1 );
		border-radius: 26px;
		isolation: isolate;
		/* The card floor runs into the portrait's own backdrop tone under the photo column. */
		--fyh-photo-backdrop: #243340;
		background: linear-gradient( 90deg, var(--wp--preset--color--ink) 0%, var(--wp--preset--color--ink) 46%, var(--fyh-photo-backdrop) 100% );
	}

	.fyh-service-cta::after {
		content: '';
		position: absolute;
		top: -6%;
		right: 0;
		bottom: -6%;
		z-index: 0;
		aspect-ratio: 1;
		pointer-events: none;
		/* The dark-backdrop portrait meets the ink panel through a mask that stays inside
		   the wall margin left of Daniel (he starts at ~12% of the frame): nothing covers him. */
		background: url('../images/daniel-beratung-2026.webp') center 30% / cover no-repeat;
		-webkit-mask-image: var(--wp--custom--ui--photo-edge);
		mask-image: var(--wp--custom--ui--photo-edge);
	}

	.fyh-service-cta::before {
		position: absolute;
		inset: 0;
		z-index: 1;
		grid-area: auto;
		min-height: 0;
		/* No scrim: the copy stands on the plain ink card, the photo column starts after it. */
		background: none;
	}

	.fyh-service-cta__copy,
	.fyh-service-cta .wp-block-buttons {
		position: relative;
		z-index: 2;
	}

	.fyh-service-cta__copy {
		align-self: end;
		max-width: 29rem;
	}

	.fyh-service-cta__title {
		max-width: 13ch;
		font-size: clamp( 2rem, 3.2vw, 2.7rem );
		line-height: 1.06;
	}

	.fyh-service-cta__copy p {
		max-width: 30rem;
		font-size: clamp( .98rem, 1.15vw, 1.08rem );
	}

	.fyh-service-cta .wp-block-buttons {
		flex-direction: column;
		align-items: flex-start;
		align-self: start;
		margin-top: .25rem;
	}

	.fyh-service-cta .wp-block-button__link {
		white-space: nowrap;
	}
}

@media ( min-width: 1280px ) {
	.fyh-service-layout {
		grid-template-columns: minmax( 13.5rem, 14rem ) minmax( 0, 1fr );
		gap: clamp( 2.5rem, 4vw, 3.5rem );
		align-items: start;
	}

	/* Erst im zweispaltigen Layout teilen sich TOC und Content die erste
	   Grid-Zeile. Unterhalb davon wahrt die DOM-Reihenfolge
	   TOC → Content → CTA den korrekten Lesefluss ohne leere Zwischenzeile. */
	.fyh-service-layout > .fyh-service-cta {
		grid-row: 2;
	}

	.fyh-service-layout > .fyh-service-toc,
	.fyh-service-layout > .fyh-service-content:not( :only-child ) {
		grid-row: 1;
	}

	.fyh-service-layout > .fyh-service-content:not( :only-child ) {
		justify-self: start;
		margin-inline: 0;
	}
}

@media ( max-width: 639px ) {
	.fyh-service-hero__actions,
	.fyh-service-hero__actions .wp-block-button,
	.fyh-service-hero__actions .wp-block-button__link,
	.fyh-service-cta .wp-block-buttons,
	.fyh-service-cta .wp-block-button,
	.fyh-service-cta .wp-block-button__link {
		width: 100%;
	}

	.fyh-service-hero__actions .wp-block-button__link,
	.fyh-service-cta .wp-block-button__link {
		justify-content: center;
		text-align: center;
	}
}

/* objhead-BASIS (21.07.): lebte nur in immobilien/style.css — auf Seiten
   ohne immobilien-Block (z.B. Bewertungs-LP mit Rueckruf-Sektion) fehlte
   sie komplett. Geteilte Basis gehoert ins Theme (Lagen-Plugin-Lektion). */
.fyh-objhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.fyh-objhead__copy { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.fyh-objhead__eyebrow { margin: 0; color: var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); font-size: var(--wp--custom--type--label-size, .75rem); font-weight: var(--wp--custom--type--label-weight, 600); letter-spacing: var(--wp--custom--type--label-tracking, .08em); text-transform: uppercase; }
.fyh-objhead__title { margin: 0; font-size: var(--wp--custom--type--section-size, clamp(1.875rem, 3vw, 2.5rem)); line-height: var(--wp--custom--type--section-leading, 1.15); font-weight: var(--wp--custom--type--section-weight, 650); letter-spacing: var(--wp--custom--type--section-tracking, -.025em); color: var(--wp--preset--color--ink); text-wrap: balance; }
.fyh-h2soft { color: var(--wp--preset--color--muted); }

/* Sektions-Kopf-Absatz (objhead-System, 21.07.): grauer Intro-Text unter
   der zweizeiligen H2 — Leistungen-Muster fuer alle Sektions-Koepfe. */
.fyh-objhead__text { margin: .9rem 0 0; max-width: 54ch; font-size: clamp( 1rem, 1.35vw, 1.1rem ); line-height: 1.65; color: var(--wp--preset--color--muted); }

/* Sekundaer-Button GLOBAL (21.07.): Core-outline = dasselbe currentColor-
   Glas-Rezept wie is-style-ie-ghost — eine Linie, ueberall gleich.
   Blur folgt der zentralen Glas-Norm (theme.json custom.glass.blur). */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: color-mix( in srgb, currentColor 8%, transparent );
	color: currentColor;
	border: 1px solid color-mix( in srgb, currentColor 26%, transparent );
	-webkit-backdrop-filter: var(--wp--custom--glass--blur);
	backdrop-filter: var(--wp--custom--glass--blur);
}

/* --- Die Markenfarbe ist die Hauptfarbe. Labels ohne Rubrik-Linie auf hellem Grund tragen Brand
   (Rubriken holen sie sich aus --sgui-rubric-color), Labels auf Foto/Ink bleiben weiss. */
.fyh-leist__eyebrow,
.fyh-soon__eyebrow,
.fyh-add__eyebrow,
.fyh-suchprofil__eyebrow,
.fyh-service-toc__label,
.wp-block-heading.is-style-fyh-label { color: var(--wp--preset--color--brand); }
.fyh-suchprofil__aside.has-citybg .fyh-suchprofil__eyebrow { color: rgba( 255, 255, 255, .92 ); }

/* === Hero-Linie für Unterseiten (2026-09-24) ==============================
   Leistungs-, Stadtteil-, Rechts- und Übersichtsseiten übernehmen die Werte der
   Startseite: eine Kante (gutter), H1 600/-0.04em, H2 600/-0.035em, Rubrik mit
   28px-Linie, Primäraktion in Markenfarbe, zweite Aktion als weiße 50%-Kontur. */
.fyh-service-hero,
.fyh-legalhero {
	padding-right: var(--wp--custom--layout--gutter, clamp( 1.5rem, 5vw, 6rem ));
	padding-left: var(--wp--custom--layout--gutter, clamp( 1.5rem, 5vw, 6rem ));
}

.fyh-legalhero > * {
	max-width: none;
	margin-left: 0 !important;
}

.fyh-service-hero__title,
.fyh-legalhero .fyh-legalhero__title {
	font-weight: 600;
	letter-spacing: -.04em;
	line-height: 1.06;
	text-shadow: none;
}

/* The inverted variant paints shadcn tokens (!important utilities): recolor the tokens.
   custom.hero.action* lets a brand keep its own primary action on dark heads. */
.fyh-service-hero .fyh-service-hero__actions .wp-block-button.is-style-ie-inverted {
	--background: var(--wp--custom--hero--action-surface, var(--wp--custom--ui--primary));
	--foreground: var(--wp--custom--hero--action-foreground, var(--wp--custom--ui--primary-foreground, #fff));
	--muted: var(--wp--custom--hero--action-hover, var(--wp--custom--ui--primary-hover));
	--border: var(--wp--custom--hero--action-surface, var(--wp--custom--ui--primary));
}

:where(.fyh-service-hero) .fyh-service-hero__actions .wp-block-button:is( .is-style-ie-glass, .is-style-ie-outline-inverse ) > .wp-block-button__link:where(.wp-element-button) {
	border-color: rgb( 255 255 255 / .5 );
	background: transparent;
	color: #fff;
}

.fyh-service-layout,
.fyh-service-cta {
	max-width: none;
}

/* Objekt-Übersicht und Ratgeber: derselbe Kopf wie die übrigen Unterseiten. */
.fyh-imhero__h1 {
	font-size: clamp( 2.25rem, 4.4vw, 3.5rem );
	font-weight: 600;
	letter-spacing: -.04em;
	text-shadow: none;
}

/* Rechtstexte lesen in 760px, beginnen aber auf der gemeinsamen Kante. */
.fyh-legalprose > *,
.fyh-legalprose > .wp-block-post-content > * {
	margin-left: 0 !important;
}

/* Objekt-Übersicht: ein flacher Verlauf wie in den Fotobändern hält Rubrik und Titel
   auch über hellen Objektfotos lesbar. */
.fyh-imhero__scrim {
	/* The head title runs wide on one line: an even brand scrim keeps its soft second half readable too. */
	background: var(--wp--custom--ui--scrim-copy-stack, linear-gradient( 90deg, rgb( 16 22 34 / .78 ) 0%, rgb( 16 22 34 / .56 ) 45%, rgb( 16 22 34 / .18 ) 100% )) !important;
}

.fyh-service-cta .wp-block-button.is-style-ie-inverted {
	--background: var(--wp--custom--hero--action-surface, var(--wp--custom--ui--primary));
	--foreground: var(--wp--custom--hero--action-foreground, var(--wp--custom--ui--primary-foreground, #fff));
	--muted: var(--wp--custom--hero--action-hover, var(--wp--custom--ui--primary-hover));
	--border: var(--wp--custom--hero--action-surface, var(--wp--custom--ui--primary));
}

/* Stadtteilseiten: die Einleitung nach dem Seitenkopf bekommt Abstand und Lesebreite. */
.fyh-service-hero + .fyh-service-section {
	margin-block-start: 0;
	padding-top: clamp( 3rem, 6vw, 4.5rem );
}

.fyh-service-hero + .fyh-service-section > p {
	max-width: 68ch;
}

/* Kontaktwege: Rubrik mit Linie in Markenfarbe; das Zeilenraster liegt im Block-CSS. */
.fyh-linkhub {
	--fyh-linkhub-accent: var(--wp--custom--ui--primary);
}

/* Footer: Marke + Name statt WordPress-Site-Logo (Flying Makler hat keins in der Mediathek). */
.fyh-footer__lockup { display: inline-flex; gap: .8rem; align-items: center; color: var(--wp--preset--color--on-dark); text-decoration: none; }
.fyh-footer__lockup img { width: 72px; height: auto; }
.fyh-footer__lockup-name { font-size: 1.35rem; font-weight: 600; letter-spacing: -.02em; }

/* Flying Makler: Hero-Bilder je Seite (Wikimedia Commons, Nachweise in assets/images/ratgeber/credits.json und im Impressum). */
.page-slug-kfw-40-qng { --fyh-service-hero-image: url('../images/ratgeber/kfw-297-298-klimafreundlicher-neubau.webp'); --fyh-service-hero-position: center 45%; }
.page-slug-afa-rechner { --fyh-service-hero-image: url('../images/ratgeber/kfw-297-298-klimafreundlicher-neubau.webp'); --fyh-service-hero-position: center 45%; }
.page-slug-kfw-rechner { --fyh-service-hero-image: url('../images/ratgeber/kfw-297-298-klimafreundlicher-neubau.webp'); --fyh-service-hero-position: center 45%; }
.page-slug-qng-immobilien-kaufen { --fyh-service-hero-image: url('../images/ratgeber/qng-plus-premium-unterschied.webp'); --fyh-service-hero-position: center 40%; }
.page-slug-fuer-bautraeger { --fyh-service-hero-image: url('../images/ratgeber/sonderabschreibung-7b.webp'); --fyh-service-hero-position: center 55%; }
.page-slug-foerderung { --fyh-service-hero-image: url('../images/ratgeber/degressive-afa-neubau.webp'); --fyh-service-hero-position: center 45%; }
.page-slug-qng { --fyh-service-hero-image: url('../images/ratgeber/qng-anforderungen.webp'); --fyh-service-hero-position: center 50%; }
.page-slug-qng-check { --fyh-service-hero-image: url('../images/ratgeber/kfw-300-wohneigentum-fuer-familien.webp'); --fyh-service-hero-position: center 60%; }

/* Bauträger-Formular: das Foto (Baustelle mit Gerüst) bekommt einen leichten Schleier: Titel lesbar, Foto sichtbar. */
.fyh-callback__panel {
	--fyh-scrim-photo-y: linear-gradient( 180deg, rgb( 15 42 67 / .66 ) 0%, rgb( 18 52 84 / .46 ) 42%, rgb( 10 30 52 / .9 ) 100% );
	background-color: var(--wp--preset--color--navy);
}

.fyh-callback__panel .fyh-callback__ptitle span {
	color: rgb( 196 214 240 / .92 );
}

/* Kopfzeile: Logo mit kleinem Namen daneben, wie im Footer (ohne Zeile darunter). */
.sgui-nav .sgui-nav__wordmark { font-size: 1.2rem; font-weight: 600; letter-spacing: -.02em; }