steht. Bei z-index 0 gewinnt sie damit gegen jeden nachfolgenden Abschnitt, der keinen eigenen z-index mitbringt — dessen Hintergrundfarbe verschwindet dann hinter Verlauf und Dots, solange der Hero noch im Viewport hängt. Mit -1 malt sie hinter allen Block- Hintergründen und bleibt trotzdem sichtbar, weil der Hero selbst transparent ist. */ z-index: -1; pointer-events: none; } .hero__bg.is-hidden { visibility: hidden; } /* ========================================================================== Color Schemes (CSS Custom Properties per Modifier) ========================================================================== */ .hero--magenta { --hero-gradient-primary: var(--color-hero-purple, #7a1580); --hero-gradient-mid: var(--color-hero-mid, #2e0a3e); --hero-gradient-dark: var(--color-hero-dark, #0d0d0d); --hero-bloom-color: rgba(220, 0, 110, 0.32); } .hero--purple { --hero-gradient-primary: #8a5cf5; --hero-gradient-mid: #3a0e52; --hero-gradient-dark: var(--color-hero-dark, #0d0d0d); --hero-bloom-color: rgba(138, 92, 245, 0.25); } .hero--green { --hero-gradient-primary: #1a6b4a; --hero-gradient-mid: #0a2e1e; --hero-gradient-dark: var(--color-hero-dark, #0d0d0d); --hero-bloom-color: rgba(0, 180, 120, 0.22); } .hero--lime-green { --hero-gradient-primary: #A6BF17; --hero-gradient-mid: #10977C; --hero-gradient-dark: var(--color-hero-dark, #0d0d0d); --hero-bloom-color: rgba(166, 191, 23, 0.28); } .hero--pink-dark { --hero-gradient-primary: #E4006F; --hero-gradient-mid: #92003F; --hero-gradient-dark: #500022; --hero-bloom-color: rgba(228, 0, 111, 0.28); } .hero--orange-dark { --hero-gradient-primary: #F4911C; --hero-gradient-mid: #B86516; --hero-gradient-dark: #7C3A10; --hero-bloom-color: rgba(244, 145, 28, 0.28); } .hero--blue-dark { --hero-gradient-primary: #02AECD; --hero-gradient-mid: #01628D; --hero-gradient-dark: #00154E; --hero-bloom-color: rgba(2, 174, 205, 0.28); } /* ========================================================================== Gradient ========================================================================== */ .hero__gradient { position: absolute; inset: 0; background: radial-gradient( ellipse at 18% 72%, var(--hero-gradient-primary, #7a1580) 0%, var(--hero-gradient-mid, #2e0a3e) 36%, var(--hero-gradient-dark, #0d0d0d) 68% ); background-size: 200% 200%; animation: hero-gradient-shift 12s ease-in-out infinite; } /* Bloom via ::after */ .hero__gradient::after { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at 70% 35%, var(--hero-bloom-color, rgba(220, 0, 110, 0.32)) 0%, transparent 55% ); animation: hero-bloom 12s ease-in-out infinite alternate; } /* ========================================================================== Ebene 2: Dots SVG ========================================================================== */ .hero__dots { position: absolute; top: -5%; right: -5%; width: 70%; height: 110%; pointer-events: none; overflow: visible; } .hero__dots svg { width: 100%; height: 100%; overflow: visible; } /* Dots-Container wird als Ganzes animiert (Rotation, Scale, 3D-Kipp) */ .hero__dots { will-change: transform; transform-style: preserve-3d; } /* ========================================================================== Content ========================================================================== */ .hero__inner { position: relative; z-index: var(--z-raised, 10); width: 100%; max-width: var(--container-max, 1280px); margin: 0 auto; padding: 170px var(--container-padding, 1.5rem) var(--space-6, 1.5rem); display: flex; align-items: center; align-self: center; /* Zentriert vertikal in der Grid-Row */ } /* ========================================================================== Info-Boxen (am unteren Rand des Hero, klappen nach oben auf) ========================================================================== */ .hero-boxes { position: relative; z-index: var(--z-raised, 10); display: grid; grid-template-columns: 1fr 1fr; align-items: end; align-self: end; /* Sitzt am unteren Rand der Grid-Row */ gap: var(--space-6, 1.5rem); padding: 0 var(--container-padding, 1.5rem); max-width: var(--container-max, 1280px); width: 100%; margin: 0 auto; } .hero-boxes__item { background: rgba(30, 30, 30, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0; border-bottom: none; overflow: hidden; transition: border-color var(--transition-base); display: flex; flex-direction: column; } .hero-boxes__item:hover { border-color: rgba(255, 255, 255, 0.15); } /* Body (ausfahrbar nach oben — im DOM VOR dem Footer) */ .hero-boxes__body { max-height: 0; opacity: 0; overflow: hidden; display: flex; flex-direction: column; } .hero-boxes__item--expanded .hero-boxes__body { max-height: 500px; opacity: 1; flex: 1; transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s; } /* Gleiche Höhe beider Boxen im ausgeklappten Zustand (Desktop) */ @media (min-width: 769px) { .hero-boxes:has(.hero-boxes__item--expanded) { align-items: stretch; } } .hero-boxes__body-inner { display: grid; grid-template-columns: 1fr auto; gap: var(--space-6, 1.5rem); padding: var(--space-4, 1rem) var(--space-6, 1.5rem) var(--space-6, 1.5rem); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .hero-boxes__content { display: flex; flex-direction: column; gap: var(--space-4, 1rem); } .hero-boxes__text { font-family: var(--font-body, sans-serif); font-size: var(--text-sm, 0.875rem); line-height: var(--leading-normal, 1.6); color: rgba(255, 255, 255, 0.7); margin: 0; } .hero-boxes__link { display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); font-family: var(--font-body, sans-serif); font-size: var(--text-sm, 0.875rem); font-weight: var(--font-bold, 700); color: var(--color-magenta, #e4006f); text-decoration: none; transition: color var(--transition-fast); } .hero-boxes__link:hover { color: var(--color-magenta-light, #ff1a85); } .hero-boxes__link-wrap { padding: var(--space-4, 1rem) var(--space-6, 1.5rem) var(--space-6, 1.5rem); margin-top: auto; } .hero-boxes__media { width: 180px; flex-shrink: 0; border-radius: var(--radius-md, 8px); overflow: hidden; } .hero-boxes__media img { width: 100%; height: 100%; object-fit: cover; } /* Header (immer sichtbar — Kategorie + Chevron) */ .hero-boxes__header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6, 1.5rem) var(--space-6, 1.5rem) 0; cursor: pointer; } .hero-boxes__header-text { display: flex; flex-direction: column; gap: var(--space-2, 0.5rem); } .hero-boxes__category { font-family: var(--font-body, sans-serif); font-size: var(--text-xs, 0.75rem); font-weight: var(--font-bold, 700); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-white, #fff); } .hero-boxes__category::after { content: ''; display: block; width: 100%; height: 1px; background: rgba(255, 255, 255, 0.15); margin-top: var(--space-3, 0.75rem); } .hero-boxes__title { font-family: var(--font-display, sans-serif); font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 400; line-height: var(--leading-snug, 1.3); color: var(--color-white, #fff); margin: 0; padding: var(--space-4, 1rem) var(--space-6, 1.5rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-boxes__chevrons { background: none; border: none; color: var(--color-magenta, #e4006f); cursor: pointer; padding: var(--space-2, 0.5rem); transition: transform var(--transition-base); flex-shrink: 0; } .hero-boxes__item--expanded .hero-boxes__chevrons { transform: rotate(180deg); } .hero__content { max-width: 65%; display: flex; flex-direction: column; gap: var(--space-6, 1.5rem); } .hero__eyebrow { font-family: var(--font-mono, monospace); font-size: var(--text-xs, 0.75rem); font-weight: var(--font-medium, 500); letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); margin: 0; } .hero__heading { font-family: var(--font-display, sans-serif); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; line-height: var(--leading-tight, 1.1); letter-spacing: -0.02em; color: var(--color-white, #fff); margin: 0; } /* Heading aus WYSIWYG: Absatz-Tags entfernen */ .hero__heading p { margin: 0; } .hero__subtext { font-family: var(--font-body, sans-serif); font-size: var(--text-base, 1rem); line-height: var(--leading-loose, 1.75); color: rgba(255, 255, 255, 0.6); margin: 0; max-width: 480px; } .hero__cta { align-self: flex-start; margin-top: var(--space-2, 0.5rem); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 768px) { .hero { height: auto; min-height: calc(100svh - var(--wp-admin--admin-bar--height, 0px)); grid-template-rows: 1fr auto; } .hero__dots { width: 100%; right: -20%; opacity: 0.6; } .hero__content { max-width: 100%; padding-bottom: var(--space-8, 2rem); } .hero-boxes { grid-template-columns: 1fr; padding-bottom: var(--space-6, 1.5rem); } .hero-boxes__item { border-radius: 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .hero-boxes__body-inner { grid-template-columns: 1fr; } .hero-boxes__media { width: 100%; max-height: 200px; } } /* ========================================================================== Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { .hero__gradient, .hero__gradient::after { animation: none !important; } /* Dots: JS-Animation wird via matchMedia in JS gestoppt */ .hero__dots svg path { transform: none !important; } .hero-boxes__body { transition: none !important; } } /* ========================================================================== Editor Preview ========================================================================== */ .acf-block-preview .hero { min-height: 400px; overflow: hidden; } .acf-block-preview .hero__bg { position: absolute; z-index: 0; } .acf-block-preview .hero__gradient { animation: none; } .acf-block-preview .hero__gradient::after { animation: none; } .acf-block-preview .hero-boxes__body { max-height: none; opacity: 1; } /* Block-Editor: verhindert Überlappung zwischen Blocks */ .is-root-container > .wp-block[data-type="acf/hero-fullscreen"] { overflow: visible; margin-bottom: 0; }