QR Web

Handy ansicht und website ansicht für den Qr gemacht

src/components/services/ServiceHero.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { cn } from "@/lib/utils";
 import { Container } from "@/components/layout/Container";
 import { Folio } from "@/components/layout/Folio";
@@ -18,7 +19,8 @@ export interface ServiceHeroContent {
   h1: Headline;
   /** The italic word may also carry `.gold-text` (keynotes – the page's one gradient word). */
   h1GoldEm?: boolean;
-  subline: string;
+  /** Fließtext unter der Headline. Ohne Angabe trägt die Headline den Hero allein. */
+  subline?: string;
   /** Haupt-Knopf. Ohne Angabe trägt der Hero nur Headline und Subline. */
   cta?: Cta;
   /** Fakten-Stapel oben rechts. Ohne Angabe (und ohne Foto) entfällt die Spalte. */
@@ -34,6 +36,13 @@ export interface ServiceHeroProps {
   content: ServiceHeroContent;
   /** Stage photo (keynotes) – `null`/undefined = no photo. */
   photo?: string | null;
+  /**
+   * Steht in derselben Spalte direkt unter Headline, Subline und Knopf.
+   * Auf der Messeseite hängt hier der Gutschein: Wer den Code gescannt hat,
+   * soll den Nachlass sehen, ohne erst an einer Sektionsüberschrift vorbei
+   * zu scrollen.
+   */
+  children?: ReactNode;
   className?: string;
 }
 
@@ -41,8 +50,12 @@ export interface ServiceHeroProps {
  * Service-page hero (ink, ≥ 60svh): mono numeral, H1 with one italic word,
  * subline, the page's primary CTA, facts stack top-right, folio with the next
  * section. Header monogram only – no hero draw.
+ *
+ * Ohne `subline` steht die Headline allein: sie erbt dann den Platz, den der
+ * Fließtext gehalten hat – eine Stufe größer und über die Spalten 3–11 statt
+ * 3–9. So trägt die Messeseite ihren Hero mit einem einzigen Satz.
  */
-export function ServiceHero({ content, photo, className }: ServiceHeroProps) {
+export function ServiceHero({ content, photo, children, className }: ServiceHeroProps) {
   /* `masthead` und `eyebrow` stehen weiter in den Inhaltsdateien, werden aber seit
      dem 06.09.2026 nicht mehr gerendert (Kundenwunsch): die Kopfzeile trug dieselben
      Angaben doppelt, und über der H1 stand faktisch die Überschrift ein zweites Mal. */
@@ -51,6 +64,11 @@ export function ServiceHero({ content, photo, className }: ServiceHeroProps) {
   /* Die Messeseite trägt weder Fakten noch Foto – dann gibt es die rechte Spalte
      nicht, statt eine leere Reveal-Hülle in die Spalten 10–12 zu stellen. */
   const hasAside = hasPhoto || Boolean(facts?.length);
+  /* Ohne Fließtext steht die Headline allein im Hero – dann bekommt sie dessen
+     Platz, statt dass der Hero um die fehlende Zeile zusammenfällt. Der Slot
+     darunter ändert daran nichts: Auf der Messeseite ist die große Begrüßung
+     ausdrücklich gewollt, der Gutschein hängt sich unter sie. */
+  const solo = !subline;
 
   return (
     <section
@@ -71,25 +89,40 @@ export function ServiceHero({ content, photo, className }: ServiceHeroProps) {
             {numeral}
           </Reveal>
 
-          <div className={cn("col-span-12 flex flex-col lg:col-start-3", hasPhoto ? "lg:col-span-5" : "lg:col-span-7")}>
+          <div
+            className={cn(
+              "col-span-12 flex flex-col lg:col-start-3",
+              hasPhoto ? "lg:col-span-5" : solo ? "lg:col-span-9" : "lg:col-span-7",
+            )}
+          >
             <Lines
               as="h1"
               play="load"
               delay={0.35}
-              className="max-w-[14ch] font-display text-[clamp(2.75rem,1.4rem+5.4vw,7rem)] font-normal leading-[0.96] tracking-[-0.015em] text-ivory [text-wrap:balance]"
+              className={cn(
+                "max-w-[14ch] font-display font-normal leading-[0.96] tracking-[-0.015em] text-ivory [text-wrap:balance]",
+                solo ? "text-[clamp(3.25rem,1.6rem+7vw,9rem)]" : "text-[clamp(2.75rem,1.4rem+5.4vw,7rem)]",
+              )}
             >
               {h1.before}
               {h1.em && <em className={cn("italic", h1GoldEm && "gold-text")}>{h1.em}</em>}
               {h1.after}
             </Lines>
-            <Reveal play="load" delay={1.0} as="p" className="mt-10 max-w-[40ch] font-sans text-xl font-light leading-[1.45] text-fg-muted">
-              {subline}
-            </Reveal>
+            {subline && (
+              <Reveal play="load" delay={1.0} as="p" className="mt-10 max-w-[40ch] font-sans text-xl font-light leading-[1.45] text-fg-muted">
+                {subline}
+              </Reveal>
+            )}
             {cta && (
               <Reveal play="load" delay={1.2} className="mt-8">
                 <Button {...cta} />
               </Reveal>
             )}
+            {children && (
+              <Reveal play="load" delay={1.0} className="mt-12 lg:mt-14">
+                {children}
+              </Reveal>
+            )}
           </div>
 
           {hasAside && (