/* ========================================================================== apollo consulting — Hero „Sonnenaufgang" Portiert aus der Design-Vorlage (material/design-vorlage/design_handoff_hero/reference/hero.css). Uebernommen sind Layerstack, Timings und Geometrie; Farben und Schriften ziehen aus css/tokens.css statt aus Hex-Werten. Abweichungen von der Vorlage, jeweils mit Grund: - Der Hero traegt zusaetzlich Marketing-Headline und Subline. Die H1 ist die kurze Zeile; die Marketing-Headline steht NEBEN der H1, nicht als Ueberschrift (Vorgabe „KUNDE-BESTÄTIGEN" Punkt 3 der Masterdatei). - Das Google-Badge der Vorlage ist NICHT gebaut. apollo consulting hat laut eigener Analyse (analyse/SEO-GEO-Analyse_Apollo-Consulting.md, Z. 110) null Google-Rezensionen; die „4,9 / 120+" der Vorlage sind ein Platzhalter. Entscheidung Adrian 09.08.2026: weglassen, bis Volker echte Bewertungen hat — der Platz kommt solange dem Rest zugute. - Bild als statt background-image: nur so laesst sich das LCP-Element preloaden, in AVIF/WebP ausliefern und per srcset an die Viewport-Breite anpassen. - Nav kommt aus dem Seiten-Template (Burger, Dropdown), nicht aus der Vorlage. ========================================================================== */ .hero { position: relative; min-height: 100svh; /* svh, nicht vh: sonst springt es auf iOS */ width: 100%; overflow: hidden; isolation: isolate; /* kapselt die mix-blend-mode-Layer */ background: #05070b; /* Basisgrund unter dem Foto, nur hier */ display: flex; flex-direction: column; } /* ── Hintergrund-Layerstack (Reihenfolge ist zwingend) ───────────────────── */ .hero__layer { position: absolute; pointer-events: none; } /* 1 · Erd-Foto */ .hero__earth { inset: -8%; transform: scale(1.14); transform-origin: 50% 55%; will-change: transform; } /* Das braucht eigene Hoehe. Ohne sie greift height:100% am Bild ins Leere: es bezieht sich auf das , und das faellt auf die globale Regel `img, picture, svg, video { height: auto }` zurueck. Gemessen am 21.08.2026 war das Foto dadurch 226 px hoch statt 1 244 und deckte auf 390 px nur 10 % der Hero-Flaeche — der Hero wirkte als schwarze Flaeche mit Text. Auf dem Desktop fiel es nicht auf, weil die groessere Breite das Bild ueber das natuerliche Seitenverhaeltnis auf 89 % Deckung brachte. */ .hero__earth picture { display: block; width: 100%; height: 100%; } .hero__earth img { width: 100%; height: 100%; object-fit: cover; object-position: center 62%; } /* 2 · Sonnen-Glow */ .hero__sun { left: 0; top: 34%; width: 46%; height: 42%; mix-blend-mode: screen; background: radial-gradient(circle at 32% 55%, rgba(255,176,74,.55) 0%, rgba(255,140,40,.18) 34%, transparent 62%); animation: acSun 8s ease-in-out infinite; } /* 3 · Marken-Tint: legt den Blau-Grün-Verlauf der Marke ueber das Foto */ .hero__tint { inset: 0; mix-blend-mode: soft-light; background: linear-gradient(120deg, rgba(62,86,152,.5) 0%, rgba(0,105,157,.34) 46%, rgba(116,185,89,.3) 100%); } /* 4-6 · Abdunklung. NICHT optional — ohne sie traegt die weisse Typo nicht. */ .hero__vignette-top { inset: 0; background: linear-gradient(to bottom, rgba(5,7,11,.92) 0%, rgba(5,7,11,.72) 22%, rgba(5,7,11,.12) 46%, transparent 62%); } .hero__scrim { inset: 0; background: radial-gradient(70% 48% at 50% 42%, rgba(5,7,11,.62) 0%, rgba(5,7,11,.28) 42%, transparent 72%); } .hero__vignette-bottom { /* svh wie der Hero selbst (Zeile 27): mit vh waere die Vignette an der grossen Viewporthoehe bemessen und damit hoeher als ihr Container — auf iOS wandert sie beim Ein- und Ausfahren der Adressleiste. */ left: 0; right: 0; bottom: 0; height: 46svh; background: linear-gradient(to top, #05070b 0%, rgba(5,7,11,.6) 46%, transparent 100%); } /* 7 · Marken-Hairline als Abschluss zum naechsten Block */ .hero__hairline { left: 0; right: 0; bottom: 0; height: 4px; background: var(--ac-gradient); z-index: 11; } @keyframes acSun { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.12); } } @keyframes acRise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ── Vordergrund ─────────────────────────────────────────────────────────── */ .hero__inner { position: relative; z-index: 10; display: flex; flex-direction: column; flex: 1; min-height: 100svh; padding-top: 104px; /* Platz fuer den absolut gesetzten Header */ } .hero__content { flex: 1; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; max-width: 1260px; margin-inline: auto; padding: var(--space-2) clamp(20px, 4vw, 56px) 4svh; /* svh: siehe Zeile 27 */ will-change: transform, opacity; } /* Hook — die Signaturfigur der Marke, als Kicker gesetzt */ /* Volker Loibl, 11.08.2026, Grundsatzfrage: "Kannst Du den Schriftgrad leicht erhoehen, um Dinge etwas mehr hervorzuheben, OHNE damit gleich in das H1/H2-Regime zu rutschen? Beispiel hier im Hero Bereich die erste gelbe Ueberschrift + Titel der Auszeichnungen." Eine Stufe von 13 auf 15 px. Mehr geht hier nicht: die Zeile traegt letter-spacing .2em und Grossbuchstaben, waechst also ueberproportional in die Breite und wuerde auf dem Handy dreizeilig umbrechen. */ .hero__kicker { display: inline-block; margin: 0 0 var(--space-4); font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: 0.9375rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ac-lime); opacity: 0; animation: acRise .6s var(--ease-out) forwards; } /* H1 — kurz, traegt das Focus-Keyword. Bewusst kleiner als in der Vorlage (dort bis 108 px): der Apollo-Hero traegt zusaetzlich Marketing-Headline und Subline. Mit 108 px blieb fuer den Rest kein ruhiger Platz mehr. */ .hero__title { margin: 0; font-family: var(--font-display); font-weight: var(--fw-extra); font-size: clamp(2.5rem, 5.8vw, 5.25rem); line-height: 1.0; letter-spacing: var(--ls-display); color: var(--ac-white); text-shadow: 0 4px 40px rgba(0,0,0,.5); text-wrap: balance; max-width: 100%; opacity: 0; animation: acRise .8s var(--ease-out) .1s forwards; } /* Marketing-Headline — NEBEN der H1, bewusst KEIN Ueberschriften-Tag */ .hero__claim { margin: var(--space-4) auto 0; max-width: 54ch; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(1.125rem, 1.9vw, 1.5rem); line-height: 1.25; color: var(--text-on-dark); text-shadow: 0 2px 22px rgba(0,0,0,.7); text-wrap: balance; opacity: 0; animation: acRise .8s var(--ease-out) .18s forwards; } .hero__sub { margin: var(--space-4) auto 0; max-width: 82ch; font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.6; color: rgba(255,255,255,.88); text-shadow: 0 2px 22px rgba(0,0,0,.7); text-wrap: pretty; opacity: 0; animation: acRise .8s var(--ease-out) .26s forwards; } .hero__cta-row { margin-top: var(--space-6); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); opacity: 0; animation: acRise .8s var(--ease-out) .34s forwards; } .hero__cta-note { margin: 0; font-size: var(--fs-body-sm); color: var(--text-on-dark-muted); } /* Trust-Chips statt Google-Badge */ .hero__trust { margin: var(--space-5) 0 0; padding: 0; opacity: 0; animation: acRise .8s var(--ease-out) .42s forwards; } /* Auszeichnungs-Leiste am unteren Rand */ .hero__awards { position: relative; z-index: 10; box-sizing: border-box; width: 100%; max-width: 1360px; margin-inline: auto; padding: var(--space-3) clamp(20px, 4vw, 56px) var(--space-7); opacity: 0; animation: acRise .8s var(--ease-out) .5s forwards; } .hero__awards .awards-row { display: flex; align-items: center; justify-content: center; gap: clamp(18px, 3vw, 28px); flex-wrap: wrap; } .hero__awards .awards-label { margin: 0; font-family: var(--font-heading); font-size: var(--fs-overline); font-weight: var(--fw-semibold); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.62); } .hero__awards .awards-logos { gap: clamp(20px, 3.2vw, 40px); } /* Groesser gestellt am 17.08.2026 (Wunsch Adrian): 104 -> 148 px. Die Siegel sind der einzige Fremdbeleg im Hero — apollo hat keine Google-Bewertungen, die Trust tragen koennten. Zu klein erledigen sie ihre Aufgabe nicht. Obergrenze ist nicht Geschmack: die Siegel stehen unter dem CTA, und der Hero soll auf dem Handy in den ersten Bildschirm passen. Bei mehr als 148 px drueckt die Reihe den Knopf unter die Falz — deshalb mobil gestaffelt. Die Bilddateien wurden von 222 auf 320 px Hoehe neu gebaut, sonst liefen sie bei dieser Anzeigegroesse unter die 2-fache Aufloesung. */ .hero__awards .awards-logos img { height: 148px; } @media (max-width: 900px) { .hero__awards .awards-logos img { height: 112px; } } @media (max-width: 600px) { .hero__awards .awards-logos img { height: 88px; } } /* ── Hero-Anschluss: Hero-Text + Outcome-Bullets, gleicher dunkler Grund ─── */ .hero-follow { background: #05070b; color: var(--text-on-dark); padding-block: var(--section-pad) var(--section-pad); } .hero-follow .hero-follow-intro { max-width: 76ch; } .hero-follow p { color: var(--text-on-dark); font-size: var(--fs-body-lg); } /* Ab 1100 px mehr Luft: dort ist Platz, und die Ebenen sollen atmen. Unter 1100 px bleibt es bewusst dicht, damit alles in den ersten Bildschirm passt. */ @media (min-width: 1100px) { .hero__kicker { margin-bottom: var(--space-6); } .hero__claim { margin-top: var(--space-6); } .hero__sub { margin-top: var(--space-6); } .hero__cta-row { margin-top: var(--space-7); gap: var(--space-4); } .hero__trust { margin-top: var(--space-6); } .hero__title { font-size: clamp(3.25rem, 5.4vw, 5.25rem); white-space: nowrap; } .hero__claim { max-width: 68ch; font-size: clamp(1.25rem, 1.8vw, 1.625rem); } .hero__sub { max-width: 88ch; } } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .hero__sun { width: 80%; height: 36%; top: 38%; } .hero__sub { font-size: 1.0625rem; } /* 78 -> 112 px, mitgezogen mit der Vergroesserung auf Desktop (17.08.2026). Diese Regel steht NACH der weiter oben und gewinnt deshalb — wer dort etwas aendert, muss hier nachziehen. */ .hero__awards .awards-logos img { height: 112px; } } @media (max-width: 600px) { .hero__inner { padding-top: 88px; } /* 21.08.2026: 11 px Versalien -> 16 px gemischt. Der Kicker traegt hier keinen Schlagwort-, sondern einen ganzen SATZ ("Pragmatische Umsetzung im Maschinenraum statt PowerPoint-Theater."). Als Versalzeile mit Sperrung war er auf dem Handy 11 px klein — die Groesse fuer ein Schlagwort, nicht fuer einen Satz. 15 px in Versalien waren keine Loesung: die Zeile bricht dann dreizeilig um und frisst den Hero. Der Desktop behaelt seine Versalien (Regel weiter oben), das gilt nur unter 600 px. */ .hero__kicker { font-size: 1rem; letter-spacing: .01em; text-transform: none; } .hero__title { font-size: clamp(2.125rem, 9.5vw, 3rem); } .hero__claim { font-size: 1.0625rem; } .hero__sub { font-size: 1rem; } /* 62 -> 88 px. Auf 390 px stehen die drei Siegel nebeneinander: 3 x 88 px plus zweimal Abstand passen in die Zeile, ohne umzubrechen. Der CTA bleibt dabei ueber der Falz (gemessen auf 390x667 und 390x844). */ .hero__awards .awards-logos img { height: 88px; } } /* ── Achse 7 · Mobil-Auftritt: Muster 1 "Motiv hinter dem Text" ──────────── Nachgetragen 21.08.2026. Bis dahin war der mobile Auftritt nie festgelegt (Hero-Register: "nicht dokumentiert"). Ausgangslage, gemessen: Das Foto bedeckte auf 390 px nur 10 % der Hero- Flaeche — Ursache war das ohne eigene Hoehe (siehe Kommentar bei .hero__earth picture weiter oben), nicht die Gestaltung. Nach dieser Reparatur bedeckt es 100 %, und damit stand der untere Text ploetzlich auf dem hellen Erdbogen: der Knopf-Hinweis fiel auf Kontrast 4,3 und damit unter den Mindestwert 4,5. Genau dafuer verlangt der Skill eine Entscheidung auf Achse 7. Gewaehlt ist Muster 1: Das Motiv traegt die ganze Flaeche wie auf dem Desktop, die Abdunklung wird neu verteilt — stark oben unter der Schrift, offen in der Mitte, wo der Erdbogen sitzt, wieder dicht unten. Der warme Sonnenaufgang landet dadurch hinter dem Knopf. Verglichen wurde gegen zwei gebaute Alternativen (Muster 3 "Halb und halb" und Muster 5 "Duotone"); Muster 1 gewann, weil es als einziges die Hero-Hoehe und die Knopf-Position unveraendert laesst (941 px / 446 px) und dem Motiv seine Waerme belaesst. Kontrast danach gemessen: Ueberschrift 20,1 · Fliesstext 11,6 · Knopf-Hinweis 13,1 · Trust-Zeile 8,4 · Siegel-Label 19,7. Muster 4 und 2 sind im Projekt bereits vergeben (CO2-Bilanz, Nachhaltigkeits- bericht) und schieden deshalb aus. */ @media (max-width: 767px) { .hero__earth img { object-position: center 70%; } /* Kopfbereich dicht: Kicker und Ueberschrift muessen ohne Rest tragen. */ .hero__vignette-top { background: linear-gradient(to bottom, rgba(5,7,11,.94) 0%, rgba(5,7,11,.88) 30%, rgba(5,7,11,.55) 52%, rgba(5,7,11,.15) 68%, transparent 80%); } /* Der radiale Abdunkler wandert unter den Fliesstext (Desktop: 42 %). */ .hero__scrim { background: radial-gradient(78% 30% at 50% 62%, rgba(5,7,11,.72) 0%, rgba(5,7,11,.34) 55%, transparent 82%); } /* Unten zurueck auf Vollton fuer Hinweis, Trust-Zeile und Siegel. Hoehe in Prozent des Heroes, NICHT in svh: der Hero ist mobil hoeher als ein Bildschirm (941 px bei 844 px Viewport), svh saesse zu kurz. */ .hero__vignette-bottom { height: 42%; background: linear-gradient(to top, #05070b 0%, rgba(5,7,11,.92) 34%, rgba(5,7,11,.55) 62%, transparent 100%); } /* Der Glow folgt dem Sonnenaufgang nach oben. Ueberschreibt bewusst den Wert aus dem 900-px-Block darueber — wer dort etwas aendert, prueft hier. */ .hero__sun { top: 30%; height: 30%; } } /* ── Mobil: Mischmodi und Dauer-Animation aus dem Scrollweg nehmen ──────── Adrian, 21.08.2026: "bei beiden stockt es leicht". Gemessen auf 390 px, Renderarbeit ueber einen Scrolldurchlauf (Median aus je drei Laeufen, DevTools-Protokoll): jetzt 329,7 ms davon Stil 103,9 Sonnen-Glow ohne Atmen 292,0 ms 83,7 Marken-Tint ohne Mischmodus 261,6 ms 81,6 beides zusammen 148,2 ms 41,7 <-- gewaehlt Ursache ist das Zusammenspiel: Der Glow atmet dauerhaft (acSun, 8 s) und liegt mit mix-blend-mode ueber dem Foto. Jeder Animationsschritt zwingt den Browser, die gesamte gemischte Flaeche neu zu rechnen — und die ist seit der Bildhoehen-Reparatur vollflaechig statt zu 10 % bedeckt. Der Fehler war also vorher da, kostete aber kaum etwas, weil fast nichts zu mischen war. Mobil deshalb: Glow bleibt sichtbar, aber ohne Atmen; der Marken-Tint wird als normaler Verlauf gelegt statt gemischt. Auf dem Desktop bleibt beides unveraendert — dort ist die Signatur (Achse 6) voll erhalten. */ @media (max-width: 767px) { .hero__tint { mix-blend-mode: normal; opacity: .5; } /* Kein Atmen, dafuer fest auf dem helleren Wert des Zyklus — so bleibt der Sonnen-Glow als Element erhalten, nur ohne Dauerbewegung. prefers-reduced-motion macht auf dem Desktop schon dasselbe. */ .hero__sun { animation: none; opacity: .72; } } /* ── Abdunklung ab Tablet nachgezogen ───────────────────────────────────── Gehoert zur Bildhoehen-Reparatur oben und ist nicht optional. Der Layerstack war auf ein Foto ausgelegt, das seine Flaeche gar nicht ausfuellte: es bedeckte je nach Breite nur 10 bis 89 %, der Rest war schwarzer Grund, und die weisse Typo stand ueber weiten Teilen auf fast Schwarz. Seit das Foto 100 % bedeckt, traegt die alte Abdunklung nicht mehr. Gemessen am 21.08.2026, vorher -> nachher der Reparatur: 768 px Fliesstext 14,0 -> 3,7 · Knopf-Hinweis 6,8 -> 3,7 · Trust 6,3 -> 4,3 1024 px Fliesstext 14,5 -> 5,8 · Knopf-Hinweis 8,7 -> 4,3 · Trust 6,4 -> 4,2 1440 px Fliesstext 6,5 -> 4,5 · Knopf-Hinweis 8,7 -> 7,9 · Trust 7,4 -> 6,5 Unter 768 px loest das der Mobil-Auftritt (Achse 7, Block darueber). Zwischen 768 und 1199 px sitzt der Text am tiefsten im Bild — dort braucht es am meisten. Ab 1200 px genuegt ein leichter Nachzug, damit der freigegebene Desktop-Eindruck erhalten bleibt. */ @media (min-width: 768px) and (max-width: 1199px) { .hero__scrim { background: radial-gradient(84% 62% at 50% 56%, rgba(5,7,11,.82) 0%, rgba(5,7,11,.6) 44%, rgba(5,7,11,.24) 72%, transparent 92%); } .hero__vignette-bottom { height: 62svh; background: linear-gradient(to top, #05070b 0%, rgba(5,7,11,.86) 30%, rgba(5,7,11,.45) 62%, transparent 100%); } } @media (min-width: 1200px) { .hero__scrim { background: radial-gradient(74% 54% at 50% 46%, rgba(5,7,11,.72) 0%, rgba(5,7,11,.42) 46%, transparent 78%); } } /* ── Reduced Motion ──────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .hero__sun { animation: none; opacity: .7; } .hero__kicker, .hero__title, .hero__claim, .hero__sub, .hero__cta-row, .hero__trust, .hero__awards { animation: none; opacity: 1; } .hero__earth { transform: scale(1.14) !important; } .hero__content { transform: none !important; opacity: 1 !important; } } /* ── Auszeichnungs-Siegel: der Effekt ──────────────────────────────────────── Vier Ebenen, alle ueber transform/opacity — kein Layout, kein Paint-Thrash: 1 Halo in Markenfarbe hinter dem Siegel, atmet langsam mit 2 langsames Schweben, je Siegel versetzt (--award-i) 3 Licht-Sweep ueber das Metall, alle 7 s, gestaffelt 4 Maus-Tilt ueber js/hero-parallax.js (data-plx-mouse / data-plx-rot) Bei prefers-reduced-motion steht alles still, die Siegel bleiben sichtbar. */ .award { position: relative; display: inline-block; isolation: isolate; animation: awardFloat 6s ease-in-out infinite; animation-delay: calc(var(--award-i, 0) * -2s); transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-slow) var(--ease-out); filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)); } /* 1 · Halo */ .award::before { content: ''; position: absolute; inset: -22% -18%; z-index: -1; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(116,185,89,.42) 0%, rgba(26,145,154,.22) 42%, transparent 70%); filter: blur(14px); opacity: .75; animation: awardHalo 6s ease-in-out infinite; animation-delay: calc(var(--award-i, 0) * -2s); pointer-events: none; } /* 3 · Licht-Sweep ueber das Siegel */ .award::after { content: ''; position: absolute; inset: 0; z-index: 2; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.85) 51%, rgba(255,255,255,.55) 54%, transparent 64%); background-size: 260% 100%; background-position: 160% 0; mix-blend-mode: screen; animation: awardSweep 7s ease-in-out infinite; animation-delay: calc(var(--award-i, 0) * 1.1s + 1.5s); pointer-events: none; /* Der Sweep laeuft nur ueber die Siegelflaeche, nicht ueber das Rechteck */ -webkit-mask-image: url('/assets/auszeichnungen/ki-innovator.png'); mask-image: none; -webkit-mask-size: 0; /* Maske pro Siegel unten gesetzt */ } .award:nth-child(1)::after { -webkit-mask-image: url('/assets/auszeichnungen/german-ceo-excellence.png'); } .award:nth-child(2)::after { -webkit-mask-image: url('/assets/auszeichnungen/unternehmen-der-zukunft.png'); } .award:nth-child(3)::after { -webkit-mask-image: url('/assets/auszeichnungen/ki-innovator.png'); } .award::after { -webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } @media (hover: hover) { .award:hover { transform: translateY(-6px) scale(1.05); filter: drop-shadow(0 18px 34px rgba(0,0,0,.6)); } .award:hover::before { opacity: 1; } } @keyframes awardFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes awardHalo { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: .95; transform: scale(1.1); } } @keyframes awardSweep { 0%, 62% { background-position: 160% 0; } 86%, 100% { background-position: -60% 0; } } @media (prefers-reduced-motion: reduce) { .award, .award::before, .award::after { animation: none; } .award::after { opacity: 0; } .award:hover { transform: none; } }