/**
 * Goost Immobilien – 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--ink) 0%,
		var(--wp--preset--color--ink) 34%,
		rgba(27,27,27, .96 ) 40%,
		rgba(27,27,27, .82 ) 46%,
		rgba(27,27,27, .52 ) 54%,
		rgba(27,27,27, .24 ) 62%,
		rgba(27,27,27, .08 ) 68%,
		rgba(27,27,27, 0 ) 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,
		rgba(27,27,27, .14 ) 0%,
		rgba(27,27,27, .30 ) 45%,
		rgba(27,27,27, .78 ) 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,
		rgba(27,27,27, .12 ) 0%,
		rgba(27,27,27, .28 ) 34%,
		rgba(27,27,27, .72 ) 58%,
		rgba(27,27,27, .92 ) 78%,
		rgba(27,27,27, .96 ) 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: 28px 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: Goost Immobilien-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; }
/* Navbar und Full-Bleed-Hero teilen exakt dieselbe Root-Achse. Ein eigener
   zentrierter max-width-Container verschiebt das Logo auf Ultrawide-Displays. */
.sgui-nav__bar {
	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));
}
@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. */
[id="objekte"] { 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--lg, 28px) 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 {
	margin: 0 0 .55rem;
	font-size: .6875rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
	color: var(--wp--preset--color--on-dark-soft, #c8c8c8);
}
.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;
}

/* --- GLAS-ICON-SYSTEM (21.07.) ------------------------------------------- */
/* EINE Rezeptur (theme.json custom.glass), drei Kontexte — neue Icon-Chips
   bekommen NUR eine dieser Sammelregeln, nie Einzelfall-Optik im Block-CSS
   (dort bleibt Layout: Groesse/Radius/Display). */
.fyh-faq__eyebrow-ico,
.fyh-det__eico,
.fyh-leist__way-ico,
.fyh-leist__scard--light .fyh-leist__scard-ico {
	background: var(--wp--custom--glass--light--bg);
	border: 1px solid var(--wp--custom--glass--light--border);
	color: var(--wp--preset--color--ink);
	-webkit-backdrop-filter: var(--wp--custom--glass--blur);
	backdrop-filter: var(--wp--custom--glass--blur);
	box-shadow: var(--wp--custom--glass--shadow);
}

.fyh-leist__scard--ink .fyh-leist__scard-ico,
.fyh-artprose__side-ico,
.fyh-artprose__cta-ico {
	background: var(--wp--custom--glass--dark--bg);
	border: 1px solid var(--wp--custom--glass--dark--border);
	color: #fff;
	-webkit-backdrop-filter: var(--wp--custom--glass--blur);
	backdrop-filter: var(--wp--custom--glass--blur);
	box-shadow: 0 2px 12px rgba( 0, 0, 0, .28 );
}

.fyh-leist__portrait-ico {
	background: var(--wp--custom--glass--photo--bg);
	border: 1px solid var(--wp--custom--glass--photo--border);
	color: var(--wp--preset--color--ink);
	-webkit-backdrop-filter: var(--wp--custom--glass--blur);
	backdrop-filter: var(--wp--custom--glass--blur);
	box-shadow: 0 2px 14px rgba(20,20,20, .25 );
}

/* Leistungs-Karten: minimalistische Foto-Grundlagen (User 21.07.) —
   Ink-Karte mit Ink-Scrim, helle Karte mit Weiss-Scrim; Text bleibt Chef. */
.fyh-leist__scard--ink {
	background:
		linear-gradient( 180deg, rgba(27,27,27, .52 ) 0%, rgba(27,27,27, .80 ) 78% ),
		url('../images/ratgeber/immobilienwert-koeln.webp') center 30% / cover no-repeat;
}

.fyh-leist__scard.fyh-leist__scard--light {
	background:
		var(--fyh-scrim-card-y),
		url('../images/ratgeber/anschlussfinanzierung-eigentuemer.webp') center 40% / cover no-repeat;
	border-color: rgba(27,27,27, .18 );
	color: #fff;
}

.fyh-leist__scard.fyh-leist__scard--light .fyh-leist__scard-text {
	color: rgba( 255, 255, 255, .9 );
}

/* --- Lage-Seiten (Template page-lage): Foto-Band statt Ink-Verlauf ------- */
/* Die Foto-Var setzt das Lagen-Plugin per wp_head (Stadtteil-Foto);
   der Hub bekommt sein Bild slug-basiert hier. Overlay = kalibrierte
   Kurve (Bild-Gesetz 4). */
.page-template-page-lage .fyh-legalhero {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: clamp(300px, 42svh, 460px);
	background:
		linear-gradient( 90deg, rgba(20,20,20, .72 ) 0%, rgba(20,20,20, .52 ) 43%, rgba(20,20,20, .2 ) 100% ),
		var(--sgui-lage-hero, linear-gradient( 135deg, var(--wp--preset--color--ink), var(--wp--preset--color--ink-deep) )) center 45% / cover no-repeat;
}

.page-template-page-lage .fyh-legalhero__eyebrow {
	filter: var(--wp--custom--glow--soft, none);
	color: rgba( 255, 255, 255, .82 );
}

.page-template-page-lage .fyh-legalhero .fyh-legalhero__title {
	text-shadow: var(--wp--custom--glow--title, none);
}

.page-slug-stadtteile .fyh-legalhero {
	--sgui-lage-hero: url('../images/service-koeln.webp');
}

/* 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 rgba(20,20,20, .04 );
}

.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); }
.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 {
	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: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;
}

/* Ausnahme vom inherit: der Split-CTA ist ein Ink-Panel mit weisser
   Schrift — inherit machte ihn ink-auf-ink (unsichtbar, 20.07.). */
.fyh-legalprose .sgui-lagesplit__cta {
	color: #fff;
}
@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--lg, 28px) var(--wp--custom--radius--lg, 28px);
	background-color: var(--wp--preset--color--ink);
	background-image:
		var(--fyh-service-hero-overlay, linear-gradient( 90deg, rgba(20,20,20, .72 ) 0%, rgba(20,20,20, .52 ) 43%, rgba(20,20,20, .2 ) 100% )),
		var(--fyh-service-hero-image, url('../images/service-koeln.webp'));
	background-position: center, var(--fyh-service-hero-position, center 55%);
	background-size: cover, var(--fyh-service-hero-size, cover);
	background-repeat: no-repeat;
	color: #fff;
}

/* 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;
}

/* Scrim nur auf Seiten MIT Foto-Zone (Vollflaechen-Bilder via --image
   haben ihren eigenen Overlay und brauchen keinen zweiten). */
.page-id-106 .fyh-service-hero::after,
.page-id-108 .fyh-service-hero::after,
.page-slug-ueber-uns .fyh-service-hero::after,
.page-slug-karriere .fyh-service-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: var(--fyh-service-hero-photo-scrim, linear-gradient( 90deg, var(--wp--preset--color--ink) 0%, var(--wp--preset--color--ink) 44%, rgba(27,27,27, .6 ) 58%, rgba(27,27,27, .22 ) 70%, rgba(27,27,27, 0 ) 82% ));
}

/* Suchprofil/Off-Market: Schluessel-Motiv (Zugang). */
/* Verkaufs-Spokes: Hero-Bilder slug-basiert (IDs driften je Umgebung) */
.page-slug-haus-verkaufen {
	--fyh-service-hero-image: url('../images/ratgeber/verkaufspreis-haus-bestimmen.webp');
	--fyh-service-hero-position: center 40%;
}
.page-slug-wohnung-verkaufen {
	--fyh-service-hero-image: url('../images/ratgeber/immobilienwert-koeln.webp');
	--fyh-service-hero-position: center 45%;
}
.page-slug-grundstueck-verkaufen {
	--fyh-service-hero-image: url('../images/service-koeln.webp');
	--fyh-service-hero-position: center 55%;
}
.page-id-185 {
	--fyh-service-hero-image: url('../images/ratgeber/immobilie-geerbt.webp');
	--fyh-service-hero-position: center 60%;
}

/* Kanonische und historische Verkauf-Checkliste: Haus-mit-Schild-Motiv.
   Der Slug-Selector bleibt ueber lokale, Staging- und Produktions-IDs stabil. */
.page-id-184,
.page-slug-immobilienverkauf-checkliste {
	--fyh-service-hero-image: url('../images/ratgeber/fehler-immobilienverkauf.webp');
	--fyh-service-hero-position: center 55%;
}

/* Energieausweis-LP: Dokumente-Motiv (Gesetz 10: nie leere Ink-Flaeche). */
.page-id-183 {
	--fyh-service-hero-image: url('../images/ratgeber/anschlussfinanzierung-eigentuemer.webp');
	--fyh-service-hero-position: center 42%;
}

/* Stadtteile-Hub: Köln-Panorama (Butterling-Muster: Bild-Hero, 22.07.). */
.page-slug-stadtteile {
	--fyh-service-hero-image: url('../images/service-koeln.webp');
	--fyh-service-hero-position: center 55%;
}

.page-slug-stadtteile .fyh-service-hero {
	padding-right: var(--wp--custom--layout--gutter, var(--wp--style--root--padding-right, 1.5rem));
	padding-left: var(--wp--custom--layout--gutter, var(--wp--style--root--padding-left, 1.5rem));
}

/* 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 {
	box-sizing: border-box;
	width: 100%;
	margin: 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; }

.page-id-136 {
	--fyh-service-hero-image: url('../images/ratgeber/immobilienwert-koeln.webp');
	--fyh-service-hero-position: center 54%;
}

.page-id-137 {
	--fyh-service-hero-image: url('../images/ratgeber/verkaufspreis-haus-bestimmen.webp');
	--fyh-service-hero-position: center 52%;
}

/* Foto: SimonWaldherr, Wikimedia Commons, CC BY-SA 4.0; als WebP konvertiert.
   Overlay bewusst LEICHTER als der Default — das Foto soll leben (Gesetz 4). */
.page-id-107 {
	--fyh-service-hero-image: url('../images/service-koeln.webp');
	--fyh-service-hero-position: center 55%;
}

.page-id-106,
.page-slug-ueber-uns {
	--fyh-service-hero-photo: url('../images/christian-goost-ueber-uns.webp');
	--fyh-service-hero-photo-position: right top;
	--fyh-service-hero-photo-size: auto 138%;
	--fyh-service-hero-photo-mask: linear-gradient( 90deg, transparent 0%, rgba( 0, 0, 0, .4 ) 26%, rgba( 0, 0, 0, .85 ) 48%, #000 64% );
	--fyh-service-hero-photo-scrim: linear-gradient( 90deg, var(--wp--preset--color--ink) 0%, var(--wp--preset--color--ink) 44%, rgba(27,27,27, .94 ) 52%, rgba(27,27,27, .66 ) 62%, rgba(27,27,27, .3 ) 72%, rgba(27,27,27, .1 ) 82%, rgba(27,27,27, 0 ) 92% );
}

/* Foto-Zone folgt der ECHTEN Fotobreite (138% Hoehe x Seitenverhaeltnis des
   Portraits): die Maske sitzt dadurch immer auf der Bildkante statt auf einer
   Zonen-Prozentzahl. Die harte linke Kante bei breiten Viewports (auto-
   Breite-Falle: Bild schmaler als Zone) kann so nicht mehr entstehen —
   Christian Goost bleibt vollstaendig sichtbar, der Uebergang wird stufenlos. */
.page-id-106 .fyh-service-hero::before,
.page-slug-ueber-uns .fyh-service-hero::before {
	inset: 0 0 0 auto;
	aspect-ratio: calc( ( 1066 * 1.38 ) / 1600 );
}

.page-id-108,
.page-slug-karriere {
	--fyh-service-hero-photo: url('../images/goost-karriere.webp');
	--fyh-service-hero-photo-position: center 12%;
}

.page-slug-tippgeberprovision {
	--fyh-service-hero-image: url('../images/service-koeln.webp');
	--fyh-service-hero-position: center 55%;
}

/* Gesetz 10 (nie leere Ink-Fläche) als Default: Ohne eigenes Motiv trägt jeder
   Service-Hero das Köln-Panorama (Basisregel oben). Themen-Motive per Slug. */
.page-slug-kundenstimmen,
.page-slug-auszeichnungen,
.page-slug-bellevue-auszeichnung,
.page-slug-auszeichnung-die-besten-makler-im-westen-wirtschaftswoche,
.page-slug-auszeichnung-zum-top-makler-koeln {
	--fyh-service-hero-image: url('../images/christian-goost-koeln-panorama.webp');
	--fyh-service-hero-position: right 40%;
	--fyh-service-hero-overlay: linear-gradient( 90deg, rgba( 20, 20, 20, .88 ) 0%, rgba( 20, 20, 20, .66 ) 40%, rgba( 20, 20, 20, .08 ) 72% );
}

.page-slug-immobilien-vermieten {
	--fyh-service-hero-image: url('../images/ratgeber/immobilienwert-koeln.webp');
	--fyh-service-hero-position: center 54%;
}

.page-slug-immobilienfinanzierung-in-koeln {
	--fyh-service-hero-image: url('../images/ratgeber/immobilienpreise-koeln.webp');
	--fyh-service-hero-position: center 60%;
}

/* Florida: eigene Objektfotos aus Cape Coral statt Köln. */
.page-slug-ablauf-immobilienkauf-florida,
.page-slug-immobilienkauf-cape-coral-florida,
.page-slug-ein-traumhaus-in-florida-cape-coral-kaufen {
	--fyh-service-hero-image: url('../images/florida-cape-coral-abend.webp');
	--fyh-service-hero-position: center 58%;
}

.page-slug-betreuung-immobilienkauf-florida,
.page-slug-kosten-immobilienkauf-florida,
.page-slug-ein-ferienhaus-in-florida-cape-coral-kaufen {
	--fyh-service-hero-image: url('../images/florida-cape-coral-pool.webp');
	--fyh-service-hero-position: center 62%;
}

.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 {
	margin: 0 0 .8rem;
	color: rgba( 255, 255, 255, .78 );
	font-size: .7rem;
	font-weight: 650;
	letter-spacing: .18em;
	text-transform: uppercase;
	filter: var(--wp--custom--glow--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;
}

/* Kundenstimmen (service/section.quotes): ruhige Zitatliste auf der Textachse —
   Goost-Rot als Haarlinie, Titel direkt über dem Text, Quelle gedämpft. */
.fyh-service-section > .fyh-quote {
	max-width: 68ch;
	margin: 1.75rem 0 0;
	padding: 0 0 0 1.25rem;
	border-left: 2px solid var(--wp--custom--ui--primary, var(--wp--preset--color--brand));
}

.fyh-service-section > .fyh-service-answer + .fyh-quote {
	margin-top: var(--fyh-service-content-gap);
}

.fyh-quote > p {
	margin: .35rem 0 0;
	color: color-mix( in srgb, var(--wp--preset--color--ink) 82%, #fff );
	font-size: 1rem;
	line-height: 1.7;
	text-wrap: pretty;
}

.fyh-quote > .fyh-quote__title {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: 1.0625rem;
	line-height: 1.45;
}

.fyh-quote > .fyh-quote__title strong {
	font-weight: 650;
}

.fyh-quote cite {
	display: block;
	margin-top: .6rem;
	color: var(--wp--preset--color--muted);
	font-size: .875rem;
	font-style: normal;
	line-height: 1.5;
}

/* 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;
}

/* Die drei Objektarten der zentralen Checkliste sind eigenständige,
   scanbare Karten. Anders als generische Service-Points brauchen sie keine
   Tabellenachse zwischen Titel und Copy, sondern eine ruhige Lesespalte. */
.page-slug-immobilienverkauf-checkliste .fyh-service-points {
	gap: 1rem;
	border-top: 0;
	counter-reset: checklist-object-type;
}

.page-slug-immobilienverkauf-checkliste .fyh-service-points > .fyh-service-point {
	grid-template-columns: 2.25rem minmax( 0, 1fr );
	gap: .55rem 1rem;
	margin-block-start: 0;
	padding: clamp( 1.35rem, 3vw, 1.75rem );
	border: 1px solid color-mix( in srgb, var(--wp--preset--color--ink) 10%, transparent );
	border-radius: 18px;
	background: color-mix( in srgb, var(--wp--preset--color--surface) 86%, #fff );
	box-shadow: 0 12px 32px -28px rgba(20,20,20, .42 );
	counter-increment: checklist-object-type;
}

.page-slug-immobilienverkauf-checkliste .fyh-service-points > .fyh-service-point::before {
	grid-column: 1;
	grid-row: 1 / span 3;
	content: counter( checklist-object-type, decimal-leading-zero );
	color: var(--wp--preset--color--gold);
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .08em;
	line-height: 1.55;
}

.page-slug-immobilienverkauf-checkliste .fyh-service-point > h3,
.page-slug-immobilienverkauf-checkliste .fyh-service-point > p,
.page-slug-immobilienverkauf-checkliste .fyh-service-point > .wp-block-list {
	grid-column: 2;
	width: 100%;
	margin: 0;
}

.page-slug-immobilienverkauf-checkliste .fyh-service-point > h3 {
	font-size: clamp( 1.12rem, 1.8vw, 1.3rem );
	line-height: 1.25;
}

.page-slug-immobilienverkauf-checkliste .fyh-service-point > p {
	max-width: 62ch;
}

.page-slug-immobilienverkauf-checkliste .fyh-service-point > .wp-block-list {
	margin-top: .35rem;
}

.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--surface);
	color: var(--wp--preset--color--ink);
	border: 0;
}

.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: var(--wp--preset--color--ink);
	font-size: clamp( 1.45rem, 2.5vw, 2rem );
	font-weight: 600;
	letter-spacing: -.035em;
	line-height: 1.15;
}

.fyh-service-cta__copy p {
	max-width: 48rem;
	margin: .65rem 0 0;
	text-wrap: pretty;
	color: var(--wp--preset--color--muted);
	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: 800px ) {
	.fyh-service-hero {
		padding-right: clamp( 5rem, 11vw, 14rem );
		padding-left: clamp( 5rem, 11vw, 14rem );
	}

	/* Bewertungsseite auf dieselbe 1248er-Achse wie Logo und Sektionen ziehen. */
	.page-id-136 .fyh-service-hero {
		padding-right: var(--wp--custom--layout--gutter, var(--wp--style--root--padding-right, 1.5rem));
		padding-left: var(--wp--custom--layout--gutter, var(--wp--style--root--padding-left, 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,
		   Christian Goost 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;
		background: var(--wp--preset--color--ink);
	}

	.fyh-service-cta::after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 0;
		pointer-events: none;
		background: url('../images/christian-goost-beratung.webp') right center / auto 100% no-repeat;
	}

	/* Auf der Bewertungsseite sitzt Christian Goost etwas weiter rechts, damit die
	   Textzone bei mittleren Desktopbreiten ruhiger bleibt. */
	.page-slug-immobilienbewertung .fyh-service-cta::after {
		background-position: calc( 100% + 28px ) center;
	}

	.fyh-service-cta::before {
		position: absolute;
		inset: 0;
		z-index: 1;
		grid-area: auto;
		min-height: 0;
		background: linear-gradient(
			90deg,
			var(--wp--preset--color--ink) 0%,
			var(--wp--preset--color--ink) 31%,
			rgba(27,27,27, .97 ) 38%,
			rgba(27,27,27, .78 ) 47%,
			rgba(27,27,27, .18 ) 66%,
			rgba(27,27,27, .02 ) 82%
		);
	}

	.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;
	}
}

@media ( max-width: 520px ) {
	.page-slug-immobilienverkauf-checkliste .fyh-service-points > .fyh-service-point {
		grid-template-columns: minmax( 0, 1fr );
		gap: .65rem;
		padding: 1.25rem;
	}

	.page-slug-immobilienverkauf-checkliste .fyh-service-points > .fyh-service-point::before,
	.page-slug-immobilienverkauf-checkliste .fyh-service-point > h3,
	.page-slug-immobilienverkauf-checkliste .fyh-service-point > p,
	.page-slug-immobilienverkauf-checkliste .fyh-service-point > .wp-block-list {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Karriere: Der persönliche Ansprechpartner ist bereits in der Seite präsent.
   Der Schluss-CTA bleibt deshalb typografisch und ohne wiederholtes Portrait. */
.page-slug-karriere .fyh-service-cta {
	grid-template-areas:
		'copy'
		'actions';
	min-height: 0;
	padding: clamp( 1.5rem, 3vw, 2.25rem );
	border: 1px solid color-mix( in srgb, #fff 12%, transparent );
	border-radius: 22px;
	background: var(--wp--preset--color--ink);
	box-shadow: 0 28px 72px -52px color-mix( in srgb, var(--wp--preset--color--ink) 58%, transparent );
}

.page-slug-karriere .fyh-service-cta__title {
	max-width: 24ch;
	font-size: clamp( 1.45rem, 2.5vw, 2rem );
	line-height: 1.15;
}

.page-slug-karriere .fyh-service-cta__copy p {
	font-size: .94rem;
}

.page-slug-karriere .fyh-service-cta::before,
.page-slug-karriere .fyh-service-cta::after {
	display: none;
	content: none;
}

@media ( min-width: 800px ) {
	.page-slug-karriere .fyh-service-cta {
		grid-template-areas: 'copy actions';
		grid-template-columns: minmax( 0, 1fr ) auto;
		align-items: center;
		gap: clamp( 1.5rem, 4vw, 3rem );
		margin-bottom: 0;
	}

	.page-slug-karriere .fyh-service-cta .wp-block-buttons {
		flex-direction: row;
		align-items: center;
		align-self: center;
		justify-content: flex-end;
		margin-top: 0;
	}
}

/* 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);
}

/* --- Goost: Rot ist die Hauptfarbe. Sektions-Eyebrows auf hellem Grund tragen Brand,
   Eyebrows auf Foto/Ink bleiben weiss (Blocks bleiben generisch, Override im Theme). */
.fyh-faq__eyebrow,
.fyh-rt__eyebrow,
.fyh-zert__eyebrow,
.fyh-leist__eyebrow,
.fyh-soon__eyebrow,
.fyh-add__eyebrow,
.fyh-icard__eyebrow,
.fyh-bewertung__eyebrow,
.fyh-suchprofil__eyebrow,
.fyh-service-toc__label,
.wp-block-heading.is-style-fyh-label { color: var(--wp--preset--color--brand); }
.fyh-bewertung__aside.has-citybg .fyh-bewertung__eyebrow,
.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 Goost-Rot, 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;
}

.fyh-service-hero__eyebrow,
.fyh-legalhero__eyebrow {
	display: flex;
	gap: .75rem;
	align-items: center;
	color: var(--wp--preset--color--on-dark-soft, #c8c8c8);
	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, .12em);
	filter: none;
}

.fyh-service-hero__eyebrow::before,
.fyh-legalhero__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

/* The inverted variant paints shadcn tokens (!important utilities): recolor the tokens. */
.fyh-service-hero .fyh-service-hero__actions .wp-block-button.is-style-ie-inverted {
	--background: var(--wp--custom--ui--primary, #801518);
	--foreground: var(--wp--custom--ui--primary-foreground, #fff);
	--muted: var(--wp--preset--color--brand-deep, #6a1114);
	--border: var(--wp--custom--ui--primary, #801518);
}

: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__eyebrow {
	display: flex;
	gap: .75rem;
	align-items: center;
	color: var(--wp--preset--color--on-dark-soft, #c8c8c8);
	font-size: var(--wp--custom--type--label-size, .75rem);
	letter-spacing: var(--wp--custom--type--label-tracking, .12em);
	filter: none;
}

.fyh-imhero__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

.fyh-imhero__h1 {
	font-size: clamp( 2.25rem, 4.4vw, 3.5rem );
	font-weight: 600;
	letter-spacing: -.04em;
	text-shadow: none;
}

.fyh-eyebrow {
	display: flex;
	gap: .75rem;
	align-items: center;
	margin: 0 0 1rem;
	color: var(--wp--custom--ui--primary, #801518);
	font-size: var(--wp--custom--type--label-size, .75rem);
	font-weight: 600;
	letter-spacing: var(--wp--custom--type--label-tracking, .12em);
	text-transform: uppercase;
}

.fyh-eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

.fyh-eyebrow + h1.wp-block-heading {
	font-weight: 600;
	letter-spacing: -.04em;
}

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

/* Über uns: Christian in der Stadt statt Nahporträt – das Köln-Panorama trägt den Kopf. */
.page-slug-ueber-uns {
	--fyh-service-hero-image: url('../images/christian-goost-koeln-panorama.webp');
	--fyh-service-hero-position: right 40%;
	--fyh-service-hero-overlay: linear-gradient( 90deg, rgba( 20, 20, 20, .88 ) 0%, rgba( 20, 20, 20, .66 ) 40%, rgba( 20, 20, 20, .08 ) 72% );
	--fyh-service-hero-photo: none;
}

.page-slug-ueber-uns .fyh-service-hero::after {
	content: none;
}

/* Seitenköpfe aus Seiteninhalt (Ratgeber): die Gruppe bringt eine eigene 1248px-
   Inhaltsbreite mit; Rubrik und H1 stehen trotzdem auf der gemeinsamen Kante. */
.wp-block-group:has( > .fyh-eyebrow ) > * {
	max-width: none;
	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 {
	background: linear-gradient( 90deg, rgb( 15 15 15 / .78 ) 0%, rgb( 15 15 15 / .56 ) 45%, rgb( 15 15 15 / .18 ) 100% ) !important;
}

/* Abschluss-CTA der Unterseiten: helles, gerundetes Band wie die Exposé-Anfrage.
   Christian steht rechts in der Stadt (Köln-Panorama), der Text liegt auf der
   ruhigen Fläche; Primäraktion Goost-Rot, zweite Aktion als Kontur. Größe und
   Versatz des Fotos bleiben (UI-Vertrag). */
.fyh-service-cta .wp-block-button.is-style-ie-inverted {
	--background: var(--wp--custom--ui--primary, #801518);
	--foreground: var(--wp--custom--ui--primary-foreground, #fff);
	--muted: var(--wp--preset--color--brand-deep, #6a1114);
	--border: var(--wp--custom--ui--primary, #801518);
}

.fyh-service-cta .wp-block-button:is( .is-style-ie-glass, .is-style-ie-outline-inverse ) > .wp-block-button__link:where(.wp-element-button) {
	border-color: var(--wp--preset--color--hairline) !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--ink) !important;
}

@media ( max-width: 959px ) {
	.fyh-service-cta {
		background:
			linear-gradient( 180deg, rgb( 244 244 244 / 0 ) 0%, rgb( 244 244 244 / 0 ) 44%, var(--wp--preset--color--surface) 64% ),
			url('../images/christian-goost-koeln-panorama.webp') 82% top / auto clamp( 12rem, 42vw, 16rem ) no-repeat,
			var(--wp--preset--color--surface);
	}
}

@media ( min-width: 960px ) {
	.fyh-service-cta {
		border: 0;
		background: var(--wp--preset--color--surface);
	}

	.fyh-service-cta::after {
		background-image: url('../images/christian-goost-koeln-panorama.webp');
	}

	.fyh-service-cta::before {
		background: linear-gradient(
			90deg,
			var(--wp--preset--color--surface) 0%,
			var(--wp--preset--color--surface) 34%,
			rgb( 244 244 244 / .92 ) 42%,
			rgb( 244 244 244 / .5 ) 52%,
			rgb( 244 244 244 / 0 ) 66%
		);
	}
}

/* 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,
.fyh-service-hero + .fyh-service-section > .fyh-service-lead {
	max-width: 68ch;
}

/* Kontaktwege: Rubrik mit Linie in Goost-Rot, Wege linksbündig (Icon · Text · Pfeil).
   Die Outline-Button-Utilities erzwingen sonst inline-flex + zentriert. */
.fyh-linkhub {
	--fyh-linkhub-accent: var(--wp--custom--ui--primary, #801518);
}

.fyh-linkhub__eyebrow {
	display: flex;
	gap: .75rem;
	align-items: center;
	font-weight: 600;
	letter-spacing: var(--wp--custom--type--label-tracking, .12em);
}

.fyh-linkhub__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

.fyh-linkhub .fyh-linkhub__link.sgui-outline-button {
	display: grid !important;
	justify-content: stretch !important;
	text-align: left !important;
}

/* Ratgeber-Artikel: die Kategorie ist eine Rubrik mit Linie, keine Pille. */
.fyh-arthero__badge.sgui-badge {
	--secondary: transparent;
	--secondary-foreground: var(--wp--custom--ui--primary, #801518);
	gap: .75rem !important;
	padding: 0 !important;
	border: 0 !important;
	font-size: var(--wp--custom--type--label-size, .75rem) !important;
	font-weight: 600 !important;
	letter-spacing: var(--wp--custom--type--label-tracking, .12em);
	text-transform: uppercase;
}

.fyh-arthero__badge.sgui-badge svg { display: none; }

.fyh-arthero__badge.sgui-badge::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}