/** * 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: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; min-height: 92vh; /* Fallback; echte Höhe kommt aus dem heroHeight-Attribut (inline) */ overflow: hidden; border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; /* Navy-Radial für Tiefe (statt flachem Ink) — das Foto verschmilzt darüber hinein. */ background: radial-gradient( 78% 82% at 72% 6%, #283545 0%, #1A2434 50%, #131a25 100% ); } /* Foto rechts platziert + LINKE Kante gefedert → schmilzt ins Navy (Hi-Fi-Design). Leicht aufgehellt, damit Daniel sichtbar bleibt (ohne ins Schwarz zu driften). */ .fyh-hero__img { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness( 1.13 ) contrast( 1.04 ); -webkit-mask-image: linear-gradient( 90deg, transparent 0%, #000 42%, #000 100% ); mask-image: linear-gradient( 90deg, transparent 0%, #000 42%, #000 100% ); } @media (min-width: 782px) { /* Desktop: Foto auf die rechte Hälfte (Daniel rechts wie im Design), links = Navy/Text. */ .fyh-hero__img { width: 74%; } } .fyh-hero__bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .fyh-hero__inner { position: relative; z-index: 2; width: 100%; 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)); padding-bottom: 8vh; } /* --- 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: 1.35rem; 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: 0.4rem; } /* Core-Buttons auf dem dunklen Hero: Hell = weiße Pille, Ghost = weißer Outline. */ .fyh-hero .wp-block-button.is-style-ie-light > .wp-block-button__link { background: #fff; color: var(--wp--preset--color--ink); border: 0; } /* Ghost = Glas: leicht milchig + Blur des Fotos dahinter (nicht komplett transparent). */ .fyh-hero .wp-block-button.is-style-ie-ghost > .wp-block-button__link { background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.4); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px) saturate(1.2); } .fyh-hero .wp-block-button.is-style-ie-ghost > .wp-block-button__link:hover { background: rgba(255,255,255,.22); } /* Hero-CTAs FLUID (Apple-Weg): clamp skaliert Größe + Padding kontinuierlich mit der Breite — min = Überlaufschutz auf schmalen Phones, max = Präsenz auf Desktop, vw = stufenloser Übergang. KEINE Media-Query-Sprünge → kann nie überschwappen. */ .fyh-hero .wp-block-button > .wp-block-button__link { padding: clamp( .55rem, 1.6vw, .95rem ) clamp( .72rem, 3vw, 1.9rem ); font-size: clamp( .74rem, 2.3vw, 1.08rem ); font-weight: 600; white-space: nowrap; } /* Farbe + Font-Size kommen jetzt aus den Block-Attributen (theme.json-Presets/Slugs), damit die Editor-Sidebar die Werte zeigt + editierbar macht. Hier nur, was kein nativer Control sauber abdeckt (Weight/Spacing/Transform/Maße). */ /* Apple-Hierarchie: klares Eyebrow-Label, großzügige H1, gut lesbare Subline. Größen als CSS-Override (schlagen die theme.json-Presets via höhere Spezifität), damit die Copy auch bei kurzem Text Präsenz hat und aus der Ferne lesbar bleibt. */ .fyh-hero .fyh-hero__eyebrow { margin: 0; font-size: clamp( .76rem, .9vw, .88rem ); font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; opacity: .92; filter: var(--wp--custom--glow--soft); } /* Pin-Icon vor dem Eyebrow (CSS-Mask in currentColor — kein SVG-Markup in der DB) */ .fyh-hero .fyh-hero__eyebrow::before { content: ""; display: inline-block; width: 15px; height: 15px; margin-right: .5rem; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center / contain; } /* H1 ohne Preset-Klasse (DB) → diese Größe greift deterministisch: präsent, aber läuft bei 2 Zeilen nicht über das Portrait (User-kalibriert 10.07.). */ .fyh-hero .fyh-hero__title { margin: 0; line-height: 1.04; font-weight: 800; letter-spacing: -0.028em; font-size: clamp( 2.5rem, 4vw, 3.6rem ); text-shadow: var(--wp--custom--glow--title); } .fyh-hero .fyh-hero__sub { margin: 0; max-width: 34ch; padding-right: 1rem; font-size: clamp( 1.15rem, 1.6vw, 1.45rem ); line-height: 1.45; font-weight: 400; filter: var(--wp--custom--glow--soft); } /* --- Buttons (Pill, wie theme.json) --- */ .fyh-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.6rem; } .fyh-hero__btn { display: inline-flex; align-items: center; border-radius: 999px; padding: 0.58rem 1.4rem; font-weight: 600; font-size: 1.02rem; text-decoration: none; transition: transform .2s ease, opacity .2s ease; } .fyh-hero__btn:hover { transform: translateY(-1px); } .fyh-hero__btn--light { background: #fff; color: var(--wp--preset--color--ink); } .fyh-hero__btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); } /* Mobil weniger Boden-Luft unter den Buttons (12vh wirkten wie ein Leerraum-Loch). */ @media (max-width: 781px) { .fyh-hero__inner { padding-bottom: 6vh; } } /* 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 ); } /* --- FAB-Schiene (fixed, fährt beim Hover aus) --- */ .fyh-fabs { position: fixed; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; z-index: 40; } /* text-align:left + font:inherit + border:0 resetten die