/** * singulary-ui/hero — selbsttragender Full-Bleed-Hero. * Bringt seine eigene Cover-Layout-Logik mit (kein core/cover-CSS nötig). */ .fyh-hero { position: relative; display: grid; grid-template-rows: minmax( 0, 1fr ) auto; /* Buehne pro Marke ueber theme.json (custom.hero): gleiche Engine, eigene Proportion. Default = kompakte Buehne mit breitem Motiv. */ min-height: var(--wp--custom--hero--min-height, clamp( 36rem, 68svh, 38rem )); overflow: hidden; border-bottom-left-radius: var(--wp--custom--hero--radius, var(--wp--custom--radius--edge, var(--wp--custom--radius--lg, 28px))); border-bottom-right-radius: var(--wp--custom--hero--radius, var(--wp--custom--radius--edge, var(--wp--custom--radius--lg, 28px))); background: var(--wp--custom--hero--stage, var(--wp--preset--color--ink)); } /* Das breite Originalbild belegt die eigentliche Bildbuehne oberhalb der deckenden Beweisleiste. Dadurch bleibt fast die volle 2560px-Komposition sichtbar und Die Beraterperson erscheint deutlich kleiner als beim frueheren Vollhoehen-Crop. */ .fyh-hero__img, .fyh-hero .sgui-hero__video { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: var(--wp--custom--hero--image-width, 100%); height: 100%; object-fit: cover; z-index: 0; grid-area: 1 / 1 / 2 / 2; filter: var(--wp--custom--hero--image-filter, none); -webkit-mask-image: var(--wp--custom--hero--image-mask, none); mask-image: var(--wp--custom--hero--image-mask, none); } /* Das mobile Poster () ist kein eigenes Rasterelement: das Bild darin liegt auf der Bildebene. */ .fyh-hero .sgui-hero__picture { display: contents; } /* Hintergrundvideo: liegt auf der Bildebene (gleiche Regeln), blendet erst ein, wenn es spielt. */ .fyh-hero .sgui-hero__video { object-position: var(--fyh-hero-focal, center); opacity: 0; pointer-events: none; transition: opacity 350ms ease; } .fyh-hero .sgui-hero__video[data-ready] { opacity: 1; } .fyh-hero .sgui-hero__video-control { --background: transparent; --foreground: #fff; --border: #ffffff80; --muted: #ffffff20; /* The --color-* roles resolve at the .sgui-shadcn root; bind them here again, or the icon stays ink on video. */ --color-background: var(--background); --color-foreground: var(--foreground); --color-border: var(--border); --color-muted: var(--muted); /* Absolut in der Bühnenfläche (Rasterbereich wie das Bild): belegt keine Zelle, die Copy bleibt in Spalte 1. */ /* Die Bedienung gehört an die Bildecke, unabhängig vom breiten Inhaltsgutter. */ position: absolute; grid-area: 1 / 1 / 2 / 2; inset: auto max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) auto; z-index: 3; } /* The outline button inherits its colour (.sgui-shadcn button[data-slot] { color: inherit }): white on the video. */ .fyh-hero.sgui-shadcn .sgui-hero__video-control { color: var(--foreground); } @media (prefers-reduced-motion: reduce) { .fyh-hero .sgui-hero__video { transition: none; } } /* Ein gemeinsamer Leseschleier für Frontend und Editor; das Portrait bleibt hell. */ .fyh-hero__bg { position: absolute; inset: 0; grid-area: 1 / 1 / 2 / 2; z-index: 1; pointer-events: none; background: var(--wp--custom--hero--scrim, linear-gradient( 90deg, rgba( 15, 15, 15, .92 ) 0%, rgba( 15, 15, 15, .8 ) 30%, rgba( 15, 15, 15, .4 ) 52%, rgba( 15, 15, 15, .04 ) 74%, transparent 100% )); } .fyh-hero__inner { position: relative; z-index: 2; grid-row: 1; align-self: center; width: 100%; max-width: var(--wp--custom--layout--shell-max, 1512px); margin-inline: auto; padding-left: var(--wp--style--root--padding-left, clamp(1.25rem, 5vw, 6rem)); padding-right: var(--wp--style--root--padding-right, clamp(1.25rem, 5vw, 6rem)); /* Desktop reserviert unterhalb explizit Platz für die überlagerte Navigation. */ padding-block: var(--wp--custom--hero--inner-padding, clamp( 1.75rem, 3vh, 2rem )); } /* --- Copy --- */ /* width:100% + inline max-width (copyWidth) = min(Container, copyWidth) → die Copy- Spalte wächst NIE über ihren Container hinaus (sonst blähen nowrap-Inhalte wie die Button-Zeile sie auf und overflow:hidden schneidet ab). min-width:0 lässt Kinder schrumpfen. Das ist die globale Absicherung gegen horizontales Überschwappen. */ .fyh-hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; min-width: 0; } .fyh-hero-copy.is-center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; } .fyh-hero-copy.is-right { align-items: flex-end; text-align: right; margin-left: auto; } /* InnerBlocks-Copy: Core-Block-Margins neutralisieren, Flex-Gap steuert den Abstand. */ .fyh-hero-copy > * { margin-top: 0; margin-bottom: 0; } /* Eyebrow + Headline füllen die Copy-Spalte → ihre Auswahl-Box im Editor = Copy-Breite, d.h. die "blaue Linie" reicht bis zum Spaltenrand und ist per Copy-Breite-Slider steuerbar. */ .fyh-hero-copy > .fyh-hero__eyebrow, .fyh-hero-copy > .fyh-hero__title { width: 100%; } .fyh-hero-copy .wp-block-buttons { margin-top: 1.5rem; } /* Button/Badge appearances come from the official shadcn CVA build. */ .fyh-hero .fyh-hero__actions .wp-block-button > .wp-block-button__link { height: 48px; min-height: 48px; padding-inline: clamp( 1rem, 1.65vw, 1.28rem ); font-size: clamp( .82rem, 1.04vw, .9rem ); text-decoration: none; } .fyh-hero .fyh-hero-copy .fyh-hero__eyebrow { height: auto; width: fit-content; margin: 0 0 1rem; padding: .35rem .65rem; color: var(--wp--custom--ui--primary-foreground) !important; font-size: var(--wp--custom--type--label-size, .75rem) !important; line-height: 1.4; font-weight: var(--wp--custom--type--label-weight, 600); letter-spacing: var(--wp--custom--type--label-tracking, .08em); text-transform: uppercase; } /* Die Person ist der Absender, nicht nur Dekoration: eine ruhige, editierbare Namensplakette verankert das Portrait, ohne Gesicht oder Copy zu ueberlagern. */ .fyh-hero__portrait-caption { position: absolute; right: clamp( 5.5rem, 7vw, 7rem ); bottom: clamp( 6.8rem, 9vw, 8.2rem ); z-index: 3; display: flex; flex-direction: column; gap: .18rem; max-width: min( 20rem, 28vw ); margin: 0; padding: .7rem .9rem .72rem 1rem; border: 1px solid rgba( 255, 255, 255, .2 ); border-left: 3px solid var(--wp--custom--ui--primary, var(--wp--preset--color--brand)); border-radius: 12px; background: rgba( 15, 15, 15, .62 ); -webkit-backdrop-filter: blur( 16px ) saturate( 1.16 ); backdrop-filter: blur( 16px ) saturate( 1.16 ); color: #fff; } .fyh-hero__portrait-caption strong { font-size: .88rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; } .fyh-hero__portrait-caption span { color: rgba( 255, 255, 255, .68 ); font-size: .6875rem; line-height: 1.35; } /* Leiser Standort-Pin: semantisch klarer als eine zweite Dach-Bildmarke. Eine Marke kann ihn per custom.hero.eyebrowMark* gegen die Rubrik-Linie der Sektionen tauschen. */ .fyh-hero .fyh-hero__eyebrow::before { content: ""; display: inline-block; flex: 0 0 auto; width: var(--wp--custom--hero--eyebrow-mark-width, 11px); height: var(--wp--custom--hero--eyebrow-mark-height, 11px); margin-right: var(--wp--custom--hero--eyebrow-mark-gap, .4rem); background: currentColor; -webkit-mask: var(--wp--custom--hero--eyebrow-mark-mask, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain); mask: var(--wp--custom--hero--eyebrow-mark-mask, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 10c0 5-8 12-8 12S4 15 4 10a8 8 0 1 1 16 0Z' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='10' r='2.6' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E") no-repeat center / contain); } /* Resend-inspirierte Redaktion statt Display-Wand: eine kontrollierte Textsaeule und genug Luft zwischen Aussage, Erklaerung und CTA. */ .fyh-hero .fyh-hero__title { max-width: 100%; margin: 0; font-size: var(--wp--custom--hero--title-size, clamp( 3.75rem, 4.2vw, 4rem )); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; text-shadow: none; text-wrap: balance; } /* Die Startseiten-Aussage folgt einer bewusst absteigenden Dreizeile. */ @media ( min-width: 782px ) { /* Freier Raum unter der Navigation ist Teil des Layouts, kein optischer Transform. */ .fyh-hero__inner { padding-top: calc( var(--fyh-nav-height, 76px) + 1rem ); padding-bottom: 1rem; } :is( .home, .editor-styles-wrapper ) .fyh-hero .fyh-hero__title { max-width: var(--wp--custom--hero--title-max, 8.25em); } } .fyh-hero .fyh-hero__sub { max-width: min( 100%, 27rem ) !important; margin: 1rem 0 0; padding-right: 0; font-size: clamp( .98rem, 1.12vw, 1.1rem ); font-weight: 400; line-height: 1.5; filter: none; text-wrap: pretty; } @media ( min-width: 1100px ) { .fyh-hero-copy:not(.is-center):not(.is-right) { max-width: min( 52vw, 46rem ) !important; } } @media ( min-width: 782px ) and ( max-width: 1099px ) { .fyh-hero-copy:not(.is-center):not(.is-right) { max-width: min( 72vw, 38rem ) !important; } .fyh-hero .fyh-hero__title { font-size: clamp( 3.25rem, 5vw, 56px ); } } /* Four official Card/Badge components, shared with the native editor. */ .fyh-hero__proof { position: relative; z-index: 3; display: grid; grid-row: 2; grid-template-columns: repeat( 4, minmax( 0, 1fr ) ); gap: var(--wp--custom--hero--proof-grid-gap, .75rem); margin: 0; /* Same axis as the hero copy and every section: the layout gutter, not the bare edge. */ padding: var(--wp--custom--hero--proof-padding-block, .75rem) var(--wp--custom--hero--proof-padding-inline, var(--wp--custom--layout--gutter, var(--wp--style--root--padding-right, 5vw))); border-top: var(--wp--custom--hero--proof-border, 0); border-bottom: var(--wp--custom--hero--proof-border-end, 0); background: var(--wp--custom--hero--proof-surface, var(--wp--custom--ui--muted)); /* Die React-HeroProof-Zeilen lesen dieselben Rollen; eine dunkle Leiste im Hero stellt sie ueber theme.json auf hell-auf-dunkel um. */ --foreground: var(--wp--custom--hero--proof-foreground, var(--wp--preset--color--ink)); --muted-foreground: var(--wp--custom--hero--proof-muted, var(--wp--preset--color--muted)); } .fyh-hero__proof .sgui-proof-item + .sgui-proof-item { border-inline-start-color: var(--wp--custom--hero--proof-rule, var(--wp--preset--color--hairline)); } .fyh-hero__proof :is( .sgui-proof-item, dt ) { color: var(--foreground); } /* Anordnung je Marke: Wert neben (row) oder ueber (column) dem Label. */ .fyh-hero__proof .sgui-proof-item { flex-direction: var(--wp--custom--hero--proof-direction, row); align-items: var(--wp--custom--hero--proof-align, center); gap: var(--wp--custom--hero--proof-gap, 20px); padding-block: var(--wp--custom--hero--proof-item-padding-block, 1.5rem); } .fyh-hero__proof .sgui-proof-item dt { line-height: var(--wp--custom--hero--proof-value-leading, 1.25); font-size: var(--wp--custom--hero--proof-value-size, 1.25rem); font-weight: var(--wp--custom--hero--proof-value-weight, 600); } .fyh-hero__proof .sgui-proof-item strong { color: var(--wp--custom--hero--proof-label, var(--foreground)); font-weight: var(--wp--custom--hero--proof-label-weight, 500); } .fyh-hero__proof .sgui-proof-item dd span { color: var(--muted-foreground); } /* Optionale Kurzmarke am ersten hellen Hero-Button (z. B. „Kostenlos“), pro Marke. */ .fyh-hero .fyh-hero__actions :is( .is-style-ie-light, .is-style-ie-inverted ):first-child { position: relative; } :where(.fyh-hero) .fyh-hero__actions :is( .is-style-ie-light, .is-style-ie-inverted ):first-child::before { position: absolute; top: -.62rem; left: .75rem; z-index: 2; display: var(--wp--custom--hero--badge-display, none); padding: .15rem .45rem; border: 1px solid rgba( 255, 255, 255, .36 ); border-radius: 6px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--on-dark, #fff); content: var(--wp--custom--hero--badge, ""); font-size: .6875rem; font-weight: 600; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; } .fyh-hero__proof dt { margin: 0; } .fyh-hero__proof dd { min-width: 0; max-width: 100%; grid-template-columns: minmax( 0, 1fr ); margin: 0; color: var(--wp--custom--ui--muted-foreground); font-size: var(--wp--custom--hero--proof-label-size, .8125rem); line-height: 1.5; text-wrap: pretty; hyphens: auto; overflow-wrap: break-word; } .fyh-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 0; } /* Mobil weniger Boden-Luft unter den Buttons (12vh wirkten wie ein Leerraum-Loch). */ @media (max-width: 781px) { /* Mobile-Layout je Marke (custom.hero.mobile*): Default = eigene Bildzeile und einspaltige Nachweise; alternativ Portrait hinter der Copy mit 2x2-Raster. */ .fyh-hero { grid-template-rows: auto auto auto; min-height: var(--wp--custom--hero--mobile-min-height, 0); } /* Explizites Zeilenende: bei absolut positionierten Rasterkindern meint "auto" den Rand des ganzen Heros. */ .fyh-hero .sgui-hero__video-control { grid-row: var(--wp--custom--hero--mobile-image-row, 2) / span 1; } .fyh-hero__img, .fyh-hero .sgui-hero__video { position: var(--wp--custom--hero--mobile-image-position, relative); inset: var(--wp--custom--hero--mobile-image-inset, auto); /* Absolut positioniert misst das Bild an seiner Rasterzeile: Zeile 1 = ganze Buehne. */ grid-row: var(--wp--custom--hero--mobile-image-row, 2); width: var(--wp--custom--hero--mobile-image-width, 100%); height: var(--wp--custom--hero--mobile-image-height, clamp( 13rem, 42vw, 20rem )); -webkit-mask-image: var(--wp--custom--hero--mobile-image-mask, none); mask-image: var(--wp--custom--hero--mobile-image-mask, none); } .fyh-hero__bg { display: var(--wp--custom--hero--mobile-scrim-display, none); background: var(--wp--custom--hero--mobile-scrim, none); } .fyh-hero__inner { padding-top: var(--wp--custom--hero--mobile-inner-top, 6.75rem); padding-bottom: var(--wp--custom--hero--mobile-inner-bottom, 2rem); } .fyh-hero .fyh-hero-copy { max-width: 100% !important; } .fyh-hero .fyh-hero__title { max-width: var(--wp--custom--hero--mobile-title-max, 9.5ch); font-size: var(--wp--custom--hero--mobile-title-size, clamp( 2.5rem, 10.8vw, 3.65rem )); } .fyh-hero .wp-block-buttons { flex-direction: var(--wp--custom--hero--mobile-actions-direction, row); align-items: var(--wp--custom--hero--mobile-actions-align, center); width: var(--wp--custom--hero--mobile-actions-width, auto); } .fyh-hero .fyh-hero__actions .wp-block-button > .wp-block-button__link { width: var(--wp--custom--hero--mobile-button-width, 100%); } .fyh-hero .fyh-hero__sub { max-width: var(--wp--custom--hero--mobile-sub-width, 36rem) !important; } .fyh-hero__proof { grid-row: 3; grid-template-columns: repeat( 2, minmax( 0, 1fr ) ); padding: 1rem; } /* React-HeroProof: Spalten je Marke. Trennlinien entstehen als 1px-Rasterfuge auf der Linienfarbe; so passen sie zu jeder Spaltenzahl. */ .fyh-hero__proof:has( > .sgui-proof-item ) { grid-template-columns: var(--wp--custom--hero--mobile-proof-columns, minmax( 0, 1fr )); gap: var(--wp--custom--hero--mobile-proof-gap, 0); padding: var(--wp--custom--hero--mobile-proof-padding, 0 1.25rem); background: var(--wp--custom--hero--mobile-proof-surface, var(--wp--custom--hero--proof-surface, var(--wp--custom--ui--muted))); } .fyh-hero .fyh-hero__proof > .sgui-proof-item { padding: var(--wp--custom--hero--mobile-proof-item-padding, 1.1rem 0); background: var(--wp--custom--hero--mobile-proof-item-surface, transparent); } .fyh-hero .fyh-hero__proof > .sgui-proof-item + .sgui-proof-item { border-block-start-width: var(--wp--custom--hero--mobile-proof-rule-width, 1px); } } @media ( max-width: 1099px ) { .fyh-hero__portrait-caption { display: none; } } /* CTAs: fluide clamp-Größe (oben) hält sie auf realen Phones (360px+) nebeneinander; flex-wrap ist das Sicherheitsnetz — am absoluten Extrem (≤320px) bricht die zweite Karte um statt abgeschnitten überzuschwappen. Nie clip, immer sauber. gap fluid. */ .fyh-hero .wp-block-buttons { flex-wrap: wrap; gap: clamp( .5rem, 1.5vw, .75rem ); } /* --- Kontakt-Schiene: ruhige, helle Edge-Tabs. Die flache rechte Kante sitzt buendig am Viewport; Beschriftungen öffnen sich vollständig nach innen. */ /* Vertical anchor per brand (custom.fabs.top): centred by default, or at the hero copy. */ /* Contact rail colours are brand settings (theme.json custom.fabs: surface, foreground, edge, whatsapp, instagram). The default is the white edge tab with every icon in the brand colour; a dark rail sets surface and foreground, a colourful one gives WhatsApp and Instagram their own colours. */ .fyh-fabs { position: fixed; right: 0; top: var(--wp--custom--fabs--top, 50%); transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 40; --fyh-fab-surface: var(--wp--custom--fabs--surface, var(--wp--preset--color--base, #fff)); --fyh-fab-foreground: var(--wp--custom--fabs--foreground, var(--wp--preset--color--brand)); --fyh-fab-edge: var(--wp--custom--fabs--edge, var(--wp--preset--color--hairline)); --fyh-fab-whatsapp: var(--wp--custom--fabs--whatsapp, var(--fyh-fab-foreground)); --fyh-fab-instagram: var(--wp--custom--fabs--instagram, var(--fyh-fab-foreground)); } /* text-align:left + font:inherit + border:0 resetten die