/* ==========================================================================
   Baustein: Hero (Sektion 1)
   Datei: css/bausteine/hero.css
   Gebraucht auf: index.html; Hero-Varianten der Leistungsseiten
   Bauvorschrift: DESIGN.md, Baustein "Hero". Der Baustein "Bühne" (D11) ist seit
   2026-09-15 auf Weisung Christian Hansmann nicht mehr Teil dieser Sektion.
   Regeln: docs/entwicklung.md. Klassen-Präfix .hero-, dazu .pixel-dot aus der
   Bauvorschrift. Tokens und Rollen kommen aus css/style.css und werden hier nicht
   neu definiert.

   Stand 2026-09-09: Aus drei Entwürfen ist die mittige Fassung ausgewählt, die
   beiden Alternativen sind entfernt. Der Stand davor liegt in Commit ea235b7.

   Stand 2026-09-14: Die Partner-Badge-Reihe unter der Bühne ist auf Weisung entfernt
   (Christian Hansmann). Der Stand mit Badges liegt in Commit f0e2f2d.

   Stand 2026-09-15 (DEV-1584): Wechselwort in der H1 (.hero-rotor, Muster awesomic.com),
   Kopf linksbündig in zwei Spalten, Kennzahlen, E-Mail-Feld mit Button innen, Logo-Laufband
   rechts. Die Bühne ist am selben Tag auf Weisung entfernt.

   Parallaxe seit 2026-09-18: Beim Scrollen bleibt .hero-inner bis zu 96 px zurück, geht dabei
   auf .93 zurück und blendet auf .4 ab. Die Farbflächen der Aurora bleiben bis zu 170 px
   zurück (--aurora-shift) und gehen auf 1.16 auf (--aurora-scale). Gerechnet und gesetzt wird
   in js/bausteine/hero.js, hier steht nur die Regel an .hero-aurora-blob. Der Angebots-Stapel
   darunter ist davon nicht berührt.

   Stand 2026-09-18 (Feedback Christian Hansmann): Der Kopf ist wieder mittig und einspaltig,
   also wieder die Ausrichtung der Bauvorschrift. Zitate aus dem Feedback: "Noch zu viel",
   "Logos rechts am Rand, zu weit weg", "Hero Text zentral und darunter den Text erklären",
   "Absoluter Claim als erstes, muss in einem Satz passieren", "Flow: Aufmerksamkeit, was
   machen wir, Proof". Daraus:

   - Drei Beats untereinander: Claim (H1), erklärender Satz (.hero-copy), Absprung
     (.hero-cta) und Beleg-Zeile (.hero-proof). Alles mittig in einer Spalte.
   - Das Wechselwort hat eine eigene, vollbreite Zeile in der H1 (Weisung: "it must be in a
     single line so it doesn't shift other words when it is center aligned"). Damit kann keine
     Wortlänge mehr etwas verschieben, und die Breitenmessung per JavaScript entfällt. Das war
     bis dahin der Grund, warum der Rotor seine Breite animiert hat.
   - Das Logo-Laufband ist stillgelegt ("Disable the marquee for now"). Die Regeln stehen
     unverändert in Abschnitt 5 dieser Datei, das Markup ist aus index.html entfernt.
   - Entfallen ist der Satz über dem E-Mail-Feld (.hero-cta-text) und mit ihm der zweispaltige
     Kopf (.hero-lead-col, .hero-facts, .hero-kpis, .hero-title-rest, .hero-nowrap). Der Stand
     davor liegt im Branch-Verlauf (feat/new-hero-section-variations).
   - Die H1 hat bei jedem Wechselwort genau drei Zeilen.

   Nachtrag am selben Tag, zweite Weisungsrunde ("the hero text is too big, please make the
   header smaller as of design system, and re-add the avatars in the subheader, then put the
   sap service partner since 2015 above the header again"):
   - Die H1 trägt display-2 statt display-1, also eine Stufe kleiner in der Skala aus D6 und
     keine eigene Größe außerhalb der Skala.
   - Die drei Porträts der Ansprechpartner (.hero-avatars) stehen wieder im Satz, jetzt im
     erklärenden Satz (.hero-copy) statt über dem E-Mail-Feld.
   - Der Kicker (.hero-kicker) steht wieder über der H1. Die Beleg-Zeile (.hero-proof) trägt
     dafür nur noch die zwei Kennzahlen. Das nimmt "Absoluter Claim als erstes" aus der ersten
     Feedback-Runde wieder zurück, die zweite Weisung geht vor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fläche und Spalte
   -------------------------------------------------------------------------- */
.hero { padding-top: 76px; text-align: center; } /* wieder mittig seit 2026-09-18 */
/* Unterer Rand: Es folgt auf derselben weißen Fläche der Angebots-Stapel (Sektion 3 ist
   ausgeblendet, Sektion 5 seit 2026-09-15 surface--continued). 70/56/50 px nach D18, ohne
   den Zuschlag --r-section aus D20: keine Fläche liegt mehr darüber. Der Stapel bringt 72 px
   Kopfabstand mit (.section.surface--continued in style.css). Grund (Weisung Christian
   Hansmann, 2026-09-15): Die erste Karte soll beim ersten Laden in den Bildschirm ragen. */
.hero { padding-bottom: 70px; }
/* Stapelkontext für den Aurora-Hintergrund: Er liegt absolut in der Sektion, der Inhalt darüber. */
.hero { position: relative; isolation: isolate; }
.hero-inner { position: relative; z-index: 1; max-width: var(--container); margin: 0 auto; }
/* Hero mit Kante darunter (karriere.html, 2026-11-09, DEV-1676): Dort folgt keine
   Fortsetzung auf Weiß, sondern eine Fläche mit Kante, die um --r-section über den Hero
   greift. Der untere Rand rechnet die Kante deshalb ein. */
.hero--edge { padding-bottom: calc(var(--sec-bottom) + var(--r-section)); }

/* --------------------------------------------------------------------------
   1a. Aurora-Hintergrund (2026-09-18)
   -------------------------------------------------------------------------- */
/* Weisung Christian Hansmann: "lets try aurora with the brand colors but make it animate slow".
   Vorbild ist der Aurora-Hintergrund von reactbits.dev. Dort läuft er als WebGL-Shader über
   OGL, das scheidet hier aus: CLAUDE.md verbietet jeden Request auf einen fremden Host, und
   das Repo hat kein Build-Tool und bisher keine einzige Bibliothek. Nachgebaut als drei weiche
   Farbflächen aus radial-gradient, die per Keyframes langsam driften und skalieren. Kein
   Canvas, kein JavaScript, damit auch kein Fallback nötig.

   Farbe kommt aus der Marke (D17): Blau --blue und Gelb --yellow, sonst nichts. Die Deckkraft
   liegt bei 14 bis 19 Prozent. Der Weg dahin am 2026-09-18: 14 bis 18 im ersten Wurf, dann 32
   bis 40 als Prüfwert ("make the aurora color more prominent so i can see it better"), dann 18
   bis 24 ("make the opcatiy lower") und schließlich diese Werte ("make the opacity slightly
   lower").
   Nachgerechnet gegen das WCAG-Gate: Blau mit .19 auf Weiß ergibt #D9DCEB, Ink darauf 13.8:1,
   wo sich beide Blau-Flächen überlagern (.30) sind es 11.3:1. Für Ink ist das unkritisch, die
   Anforderung ist 4.5. Für --muted reicht es weiterhin nicht: 3.8:1 auf der einfachen Fläche,
   3.1:1 auf der Überlagerung. In --muted stehen der Kicker und die Beleg-Zeile. Die klarende
   Fläche .hero-aurora-clear deckt deshalb weiter die ganze Textspalte ab, nicht nur die
   Überschrift, und bleibt Bedingung dafür, dass das Gate hält.

   Ausdrücklich nicht gefährdet werden darf aber das gelbe Wechselwort: Es erreicht mit 1.76
   auf Weiß ohnehin nicht die geforderten 4.5, eine gelbe Einfärbung dahinter würde den Wert
   weiter drücken. Deshalb zwei Vorkehrungen: Die Flächen liegen in den leeren Außenspalten
   (bei 1900 px steht links und rechts der 760 px breiten Textspalte je rund 550 px Weiß), und
   .hero-aurora-clear legt über der Textspalte wieder Weiß auf. Die Schrift steht damit auf
   reinem Weiß, die Farbe bleibt außen.

   Ohne Bewegung (Weisung Christian Hansmann, 2026-09-18: "i dont see the animation. remove the
   animation and let it be static"). Die Fläche stand vorher auf 110 / 140 / 90 s ("make it
   animate slow"), das ergab rund 0,85 px je Sekunde und war von einem Standbild nicht zu
   unterscheiden, danach auf 8 / 10 / 6,5 s als Prüfwert. Auch die schnelle Fassung war nicht
   zu sehen. Die Keyframes hero-aurora-a/b/c und will-change sind deshalb entfernt, die Fläche
   ist jetzt ein reiner Farbverlauf. Der Stand mit Bewegung liegt im Branch-Verlauf
   (feat/new-hero-section-variations).
   Damit erledigt sich auch der Motion-Punkt: Ohne Animation gibt es unter
   prefers-reduced-motion nichts mehr abzuschalten (D10).

   Abweichung: DESIGN.md kennt bisher keine Dekorationsebene. Nachtrag Phase 4 offen. */
.hero-aurora {
  position: absolute; inset: 0; z-index: 0;
  /* Reicht um die Höhe der Kopfzeile nach oben und bringt dafür ihr eigenes Weiß mit
     (2026-09-18, Weisung: "the navbar background color overlaps the aurora"). Die Kopfzeile
     steht im Fluss über dem Hero und trug Weiß mit .9 vor dem --paper des body, dadurch stand
     über der Farbe ein weißes Band und die Tönung setzte an der Hero-Kante hart ein. Die
     Kopfzeile ist auf Seiten mit Aurora jetzt durchsichtig (Regel in css/style.css, eigener
     Punkt im PR), die Farbe läuft bis an die Oberkante der Seite durch. */
  top: calc(-1 * var(--header-h));
  background: var(--white);
  overflow: hidden; pointer-events: none;
  /* Nach unten ausblenden, damit keine Kante zur Fläche des Angebots-Stapels entsteht: Der
     liegt seit 2026-09-15 als surface--continued auf derselben weißen Fläche. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 95%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 62%, transparent 95%);
}
.hero-aurora-blob {
  position: absolute; display: block;
  /* Parallaxe: js/bausteine/hero.js setzt --aurora-shift und --aurora-scale auf .hero. Die
     Flächen bleiben beim Scrollen weiter zurück als der Text und gehen dabei auf, der Text
     geht zurück. Das ist die Tiefenstaffelung: Was näher liegt, wird kleiner und schneller,
     was ferner liegt, wird größer und langsamer. Ohne Skript stehen beide Werte auf ihrem
     Ruhewert und hier passiert nichts.
     Verschoben werden nur die Flächen, nicht ihr Kasten: Der trägt das Weiß, das unter der
     durchsichtigen Kopfzeile liegt, und dürfte sich nicht mitbewegen, sonst käme dort das
     --paper des body zum Vorschein. */
  transform: translate3d(0, var(--aurora-shift, 0px), 0) scale(var(--aurora-scale, 1));
}
/* Seiten getauscht am 2026-09-18 ("then swap the colors"): Gelb steht jetzt links, Blau
   rechts. Getauscht sind die Positionen, nicht die Farben der Klassen, damit die Klassennamen
   weiter sagen, welche Farbe sie tragen. */
/* Rechts, das größte Feld */
.hero-aurora-blob--blue {
  left: 54%; top: 4%; width: 58%; height: 92%;
  background: radial-gradient(closest-side, rgba(56, 70, 150, .19), rgba(56, 70, 150, 0) 100%);
}
/* Links oben */
.hero-aurora-blob--yellow {
  left: -14%; top: -22%; width: 66%; height: 100%;
  background: radial-gradient(closest-side, rgba(241, 169, 16, .16), rgba(241, 169, 16, 0) 100%);
}
/* Unten in der Mitte, gibt der Fläche unten Gewicht */
.hero-aurora-blob--deep {
  left: 16%; top: 42%; width: 74%; height: 86%;
  background: radial-gradient(closest-side, rgba(56, 70, 150, .14), rgba(56, 70, 150, 0) 100%);
}
/* Klart die Textspalte wieder auf: Die Schrift steht auf reinem Weiß, die Farbe bleibt außen.
   Das ist die Vorkehrung für das Kontrast-Gate, siehe Kommentar oben. */
.hero-aurora-clear {
  position: absolute; inset: 0; display: block;
  /* Deckt die ganze Textspalte ab, von der Kopfzeile bis unter die Beleg-Zeile: In --muted
     stehen Kicker und Belege, und --muted erreicht auf der getönten Fläche nur 1.7 bis 2.6,
     die Anforderung ist 4.5. Mit der höheren Deckkraft der Flächen musste diese Fläche
     mitwachsen. Die Farbe bleibt damit in den Außenspalten, da steht kein Text. */
  background: radial-gradient(ellipse 40% 54% at 50% 46%,
    rgba(255, 255, 255, 1) 0%,
    rgba(255, 255, 255, 1) 46%,
    rgba(255, 255, 255, .88) 66%,
    rgba(255, 255, 255, 0) 88%);
}
/* Die Spalte ist schmaler als der Container: mittiger Text wird ab etwa 20 Wörtern je Zeile
   unlesbar, und die H1 soll bei 1520 px nicht über die ganze Breite laufen. */
.hero-head { max-width: 1120px; margin: 0 auto; }

/* --------------------------------------------------------------------------
   1b. Eintritt: Reihenfolge und Timing (2026-09-18)
   -------------------------------------------------------------------------- */
/* Weisung Christian Hansmann: "please make the hero enter animation better. It should animate
   the header line by line, then the subtext, then the cta group."

   Vorher trug die ganze H1 eine einzige .reveal-Auszeichnung, der Kopf kam also als ein Block
   herein, und die Abstufung lief über .delay-1 bis .delay-3 aus css/style.css mit 80 ms
   Schritten. Jetzt trägt jede Zeile der H1 ihre eigene Auszeichnung, und die Schritte stehen
   hier als eigene Kette, damit die Reihenfolge an einer Stelle ablesbar ist:

     1  Kicker
     2  erste Zeile der H1
     3  Wechselwort-Zeile
     4  Schlusszeile der H1
     5  erklärender Satz
     6  E-Mail-Feld mit Zusage
     7  Beleg-Zeile

   Zwischen den drei Zeilen der H1 liegen 180 ms. Sie standen bis zum 2026-09-18 auf 100 ms,
   auf Weisung ("we need more delay between the individual hero header lines") sind es jetzt
   180. Die Zeilen kommen damit einzeln an, statt als eine Bewegung gelesen zu werden. Zum
   erklärenden Satz noch einmal 180 ms, danach 160 und 140, damit Feld und Belege nachrücken,
   ohne dass der Eintritt ausfranst. Das letzte Element startet bei 0,96 s, mit 0,85 s Dauer
   steht der Hero also nach rund 1,8 s. Die Bewegung selbst (Deckkraft und translateY) kommt
   weiter aus .reveal in css/style.css, hier nur etwas weiter und etwas langsamer; die Zeilen
   der H1 laufen den längsten Weg, weil sie am größten sind.

   Wichtig dazu die Änderung in js/bausteine/hero.js: Das Skript setzte is-visible bisher
   sofort beim Laufen. Als defer-Skript läuft es vor dem ersten Bild, der Ausgangszustand wurde
   also nie gezeichnet und der Browser hatte nichts zu überblenden. Die Elemente standen damit
   einfach da, die Animation lief nie. Jetzt setzt das Skript die Klasse erst nach zwei
   requestAnimationFrame, dann ist der Ausgangszustand sicher gezeichnet.

   Bewegung nach D10: prefers-reduced-motion wird in css/style.css global behandelt
   (.js .reveal steht dort auf sichtbar). Die Verzögerungen müssen dort mit auf null, sonst
   erscheinen die Teile trotz abgeschalteter Bewegung nacheinander, über 0,8 s verteilt. Das
   steht im Block am Dateiende. */
.js .hero .reveal { transform: translateY(26px); transition-duration: .85s; }
.js .hero .hero-title-line,
.js .hero .hero-band { transform: translateY(34px); }
.js .hero .reveal.is-visible { transform: none; }

/* Die Kette steht bewusst auf .js .hero .hero-step-N und nicht auf .hero-step-N allein.
   Grund (Befund 2026-09-18, nachdem die H1 weiter als Block hereinkam): css/style.css setzt in
   Zeile 411 die Kurzschrift
       .js .reveal { transition: opacity .75s ease, transform .75s var(--ease-reveal); }
   und eine Kurzschrift setzt alle nicht genannten Teile auf ihren Anfangswert zurück, also
   transition-delay auf 0s. Dieser Selektor hat die Gewichtung (0,2,0). Eine Klasse allein hat
   (0,1,0) und verliert, die Verzögerung wurde also auf 0 zurückgesetzt und alle sieben Teile
   liefen gleichzeitig. Mit .js .hero davor sind es (0,3,0), damit greift die Verzögerung.
   Dasselbe gilt für .delay-1 bis .delay-3 in css/style.css: Sie stehen dort ebenfalls mit nur
   einer Klasse und sind damit seit jeher wirkungslos, auf jeder Sektion. Das ist ein Fall für
   einen eigenen PR an der gesperrten Datei, siehe README.md, Offene Punkte. */
.js .hero .hero-step-1 { transition-delay: 0s; }
.js .hero .hero-step-2 { transition-delay: .12s; }
.js .hero .hero-step-3 { transition-delay: .30s; }
.js .hero .hero-step-4 { transition-delay: .48s; }
.js .hero .hero-step-5 { transition-delay: .66s; }
.js .hero .hero-step-6 { transition-delay: .82s; }
.js .hero .hero-step-7 { transition-delay: .96s; }

/* --------------------------------------------------------------------------
   2. Beat 1: Kicker und Claim
   -------------------------------------------------------------------------- */
/* Kicker über der H1, mittig. Er stand hier bis zum 2026-09-18, wanderte mit "Absoluter Claim
   als erstes" kurz in die Beleg-Zeile und steht seit der Weisung vom selben Tag wieder oben. */
.hero-kicker {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  color: var(--muted);
}

/* Drei Zeilen, die mittlere ist das Wechselwort. Rolle seit dem 2026-09-18 display-2 statt
   display-1 ("the hero text is too big, please make the header smaller as of design system"):
   eine Stufe kleiner in der Skala aus D6, 48 bis 82 px statt 54 bis 108 px, keine eigene
   Größe außerhalb der Skala. Zeilenhöhe 1.02 statt .92 aus display-2 (D6): bei drei Zeilen in
   dieser Größe berühren sich sonst Ober- und Unterlängen, derselbe Befund wie am 2026-09-15.
   Abweichung von der Bauvorschrift, Nachtrag Phase 4. */
/* Laufweite -.05em statt der -.065em aus display-2 (Weisung Christian Hansmann, 2026-09-18:
   "please keep it at -.05em, the letter spacing"). Hintergrund: Bis zum selben Tag trug die H1
   display-3, und dessen Laufweite ist -.05em. Mit dem Wechsel auf display-2 wäre sie auf
   -.065em gesprungen, die Schrift also enger gelaufen als vorher. Die Größe der Rolle bleibt,
   nur die Laufweite wird zurückgeholt. Abweichung von D6, Nachtrag Phase 4. */
.hero-title { margin-top: 28px; line-height: 1.02; letter-spacing: -.05em; }
/* Jede Zeile ein eigener Block, damit der Umbruch nicht von der Fensterbreite abhängt und die
   H1 bei allen vier Wechselwörtern gleich hoch bleibt. Nichts darunter springt beim Wechsel. */
.hero-title-line { display: block; text-wrap: balance; }
/* Das feste Wort zwischen den zwei Rotoren (2026-09-28, Weisung mit Screenshot).
   Es traegt das Gelb, das vorher am Wechselwort hing.
   Achtung Gate, unveraendert: --yellow als Text auf Weiss erreicht 1.76, D17
   schliesst Gelb als Text auf Hell und Weiss aus, WCAG 1.4.3 verlangt 4.5.
   Offener Punkt in README.md, jetzt an dieser Stelle statt am Rotor. */
.hero-title-accent { color: var(--yellow); }
/* Das feste Wort zwischen den zwei Rotoren (2026-09-28, Weisung mit Screenshot).
   Es traegt das Gelb, das vorher am Wechselwort hing.
   Achtung Gate, unveraendert: --yellow als Text auf Weiss erreicht 1.76, D17
   schliesst Gelb als Text auf Hell und Weiss aus, WCAG 1.4.3 verlangt 4.5.
   Offener Punkt in README.md, jetzt an dieser Stelle statt am Rotor. */
.hero-title-accent { color: var(--yellow); }
/* Die Schlusszeile trug bis zum 2026-09-18 .soft aus css/style.css und lief damit in 400 statt
   in den 500 der Rolle, dazu mit -.055em statt -.05em. Auf Weisung ("Make the header wir
   liefern sie text weight tha same as the rest of the header") ist die Klasse entfernt, alle
   drei Zeilen laufen jetzt gleich. Damit ist auch die Laufweite der H1 überall dieselbe, der
   kleine Unterschied in der Schlusszeile ist erledigt. Die leichtere Fassung stammte aus der
   Copy vom 2026-09-15, wo die zweite Satzhälfte bewusst zurückgenommen war (D6). */
/* Die Schlusszeile leichter gesetzt über .soft aus style.css (D6), wie schon in der Fassung
   vom 2026-09-15. */

/* Blenden in der H1 (2026-10-07, Weisung: "remove the moving and just fade the texts in
   and out. The animation is now only about visibility, not movement").
   Zeile 1 und Zeile 3 wechseln ihr Wort, dazwischen steht "statt" fest. Was zugleich
   sichtbar ist, ergibt zusammen einen Satz.

   Bis zum 2026-10-07 liefen hier zwei Baender gegeneinander durch die Zeile. Davon ist
   nichts geblieben: kein Track, kein zweiter Satz Woerter, kein --hero-slot, keine
   Randmaske. Zwei Folgen davon sind wichtig genug fuer einen eigenen Absatz:

   1. Die Reihenfolge in Zeile 3 ist wieder die natuerliche. Beim Laufband stand sie
      als B1, B5, B4, B3, B2 im Markup, weil das gegenlaeufige Band seine Liste
      rueckwaerts durchwanderte. Beide Zeilen blenden jetzt vorwaerts durch, also
      steht Zeile 3 als B1..B5. Wer die Woerter aendert, haelt die Paare dadurch
      zusammen, dass Platz n in beiden Zeilen zusammengehoert.

   2. Gleich breite Plaetze braucht es nicht mehr. Die Paarung haengt jetzt allein an
      der Zeit: beide Zeilen tragen dieselbe Dauer und dieselben Verzoegerungen, damit
      schalten sie im Gleichtakt. Die Woerter liegen uebereinander in einer Rasterzelle,
      jedes fuer sich mittig.

   Nacheinander, nicht ueberblendet (Weisung): ein Wort blendet in 450 ms ganz ab, dann
   bleibt die Zeile 300 ms leer, erst dann blendet das naechste in 700 ms auf. Zwei
   Woerter sind nie zugleich zu sehen. Die Pause kam am 2026-10-07 dazu, vorher ging die
   eine Blende unmittelbar in die andere ueber und die Leere war nicht wahrnehmbar.

   Achtung Gate: Die H1 wechselt dauerhaft von selbst und hat auf Weisung keinen
   Anhalter. WCAG 2.2.2 verlangt einen fuer Inhalt, der sich laenger als fuenf Sekunden
   von selbst aendert. Das galt fuer das Laufband und gilt fuer die Blende genauso,
   offener Punkt in README.md. Bei prefers-reduced-motion steht das erste Paar still. */
.hero-band {
  /* Die vier Stellschrauben (Weisung 2026-10-07).
     --hero-auf    Dauer des Aufblendens
     --hero-stand  Zeit, die ein Wort voll sichtbar steht
     --hero-ab     Dauer des Abblendens
     --hero-pause  leere Zeile zwischen dem alten und dem neuen Wort
     Ein Schritt dauert auf, Stand, ab, Pause, eine Runde fuenf Schritte.

     Auf und ab sind absichtlich ungleich lang (Weisung: "das einfaden des naechsten
     wortes ist zu hart"). Beide liefen zuerst 450 ms linear, und doch wirkte nur das
     Aufblenden hart. Der Grund steckt im Ende der Kurve: Beim Abblenden endet sie bei
     Deckkraft 0, dass sie dort abrupt stoppt, sieht niemand. Beim Aufblenden endet
     dieselbe Kurve bei Deckkraft 1, mitten im sichtbaren Wort, und dieses ungebremste
     Ankommen ist das Harte. Deshalb traegt nur das Aufblenden ease-out und mehr Zeit,
     das Abblenden bleibt bei 450 ms linear.

     Die Standzeit stand am selben Tag zuerst auf 9,6 s und wurde auf 4 s gekuerzt.

     Achtung: Die Prozentwerte in @keyframes gehoeren zu genau diesen Werten und rechnen
     sich nicht mit. Wer sie aendert, rechnet neu:
       Ende auf   = auf / runde
       Ende Stand = (auf + stand) / runde
       Ende ab    = (auf + stand + ab) / runde
     Der Rest des Schrittes ist die Pause, dort steht die Deckkraft ohnehin auf 0.
     Heute sind das 0,7 / 27,25 = 2,569 %, 4,7 / 27,25 = 17,248 % und
     5,15 / 27,25 = 18,899 %. */
  --hero-auf: .7s;
  --hero-stand: 4s;
  --hero-ab: .45s;
  --hero-pause: .3s;
  --hero-schritt: calc(var(--hero-auf) + var(--hero-stand) + var(--hero-ab) + var(--hero-pause));  /* 5,45 s */
  --hero-runde: calc(var(--hero-schritt) * 5);                                                     /* 27,25 s */
  display: grid;
  padding: .14em 0 .2em;
  margin: -.14em 0 -.2em;
}
.hero-band-wort {
  /* Alle fuenf Woerter in derselben Rasterzelle, also uebereinander. Die Zeile ist
     dadurch immer gleich hoch, egal welches Wort gerade steht. */
  grid-area: 1 / 1;
  text-align: center;
  white-space: nowrap;
  opacity: 0;
  animation: hero-band-blende var(--hero-runde) linear infinite;
}
/* Rueckfall, falls keine Animation laeuft: das erste Paar steht und ergibt einen Satz.
   Die Animation ueberschreibt das, solange sie laeuft. */
.hero-band-wort:first-child { opacity: 1; }

/* Dieselben Verzoegerungen in beiden Zeilen, daher schalten sie im Gleichtakt. */
.hero-band-wort:nth-child(2) { animation-delay: var(--hero-schritt); }
.hero-band-wort:nth-child(3) { animation-delay: calc(var(--hero-schritt) * 2); }
.hero-band-wort:nth-child(4) { animation-delay: calc(var(--hero-schritt) * 3); }
.hero-band-wort:nth-child(5) { animation-delay: calc(var(--hero-schritt) * 4); }

@keyframes hero-band-blende {
  /* Die Zeitfunktion in einem Keyframe gilt fuer den Abschnitt, der dort beginnt.
     Nur das Aufblenden laeuft deshalb weich aus, alles Weitere bleibt linear. */
  0%                { opacity: 0; animation-timing-function: ease-out; }
  2.569%            { opacity: 1; animation-timing-function: linear; }
  17.248%           { opacity: 1; }
  18.899%, 100%     { opacity: 0; }
}

/* Nur für Screenreader: die vier Wörter als fester Text, damit die H1 nicht wechselt */
.hero-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Wortwalze (work-zone.html, 2026-10-01, Weisung Christian Hansmann: "ein Durchlauf wie im
   Hero von Awesomic.com", Transition "so nahe wie möglich an der Vorlage"). Anders als
   .hero-rotor ohne Skript, die Bewegung ist reines CSS.
   Nachgebaut nach dem Code von awesomic.com (.words-wrapper, .words-inner, @keyframes
   scroll-text): Alle Wörter stehen untereinander in einer Spur, ein Fenster in Wortgröße
   zeigt eins davon. Die Spur rollt nach unten, das nächste Wort kommt also von oben, das
   alte läuft unten hinaus, und beide sind während des Wechsels zugleich zu sehen. Takt wie
   dort: 10 s für vier Wörter, je 2 s Stand und 0,5 s Wechsel, Kurve
   cubic-bezier(.175, .885, .32, 1.275), die über das Ziel hinaus schwingt und zurückfedert.
   Die Spur trägt das erste Wort am Anfang und am Ende, die Wörter stehen in umgekehrter
   Lesefolge. Die Spur endet damit auf demselben Wort, auf dem sie beginnt, und der Sprung
   zurück an den Anfang ist unsichtbar.
   Fenster und Zeile des Worts sind 1.3em hoch statt 1.02em der H1, damit Ober- und
   Unterlängen nicht abgeschnitten werden; die negativen Ränder geben den Überschuss der
   Zeile zurück, die Walze belegt in der H1 also genau eine Zeile. Das Fenster ist so breit
   wie das längste Wort, die Wörter stehen darin mittig (text-align aus .hero). Die Walze
   hat ihre Zeile für sich, so steht jedes Wort in der Mitte der H1, und beim Wechsel
   bewegt sich nichts zur Seite, wie in der Vorlage.
   Am selben Tag zurückgebaut (Weisung: Entferne das "Alle"): Bis dahin stand "Alle" vor
   dem Fenster in derselben Zeile. Damit sie mittig blieb, lief die Fensterbreite im Takt
   mit (gemessen in js/bausteine/hero.js), und bis 640 px stand "Alle" in einer eigenen
   Zeile. Beides ist mit dem Wort entfallen.
   Farbe: das Grau der Vorlage, dort text-gray-400 mit rgb(161, 161, 170), Strichstärke wie
   die übrige H1 (Weisung vom selben Tag: "im gleichen grau wie in der Vorlage"). Kein
   Token der Palette, deshalb hier als Wert.
   Achtung Gate: auf Weiß 2.56:1, WCAG 1.4.3 verlangt für große Schrift 3:1. Auf Weisung so
   gebaut, der Wert steht in DESIGN.md, Farbe. */
/* Unten .2em mehr Fenster (wie padding-bottom in der Vorlage), sonst schneidet der
   Überschwinger die Unterlängen des stehenden Worts ab. Beschnitten wird nur oben und unten:
   clip-path statt overflow, damit die enge Laufweite der H1 (-.05em) beim längsten Wort
   kein Endzeichen seitlich anschneidet. */
.hero-walze {
  display: inline-block; vertical-align: top;
  height: 1.5em; padding-bottom: .2em; margin: -.14em 0 -.34em;
  clip-path: inset(0 -.5em);
  color: #a1a1aa;
}
/* Abstand zwischen den Wörtern wie margin-top: 20px in der Vorlage: Jeder Platz ist .3em
   höher als das Fenster, das Wort steht unten darin, die Spur rückt um die .3em nach oben.
   Der Überschwinger der Kurve (rund .16em) zeigt damit Luft statt der Unterlänge des
   nächsten Worts. */
.hero-walze-spur {
  display: block; margin-top: -.3em;
  transform: translateY(-80%);
  animation: hero-walze 10s cubic-bezier(.175, .885, .32, 1.275) infinite;
}
.hero-walze-wort { display: block; height: 1.6em; padding-top: .3em; line-height: 1.3em; white-space: nowrap; }
/* Fünf Plätze in der Spur, ein Platz sind 20 Prozent ihrer Höhe */
@keyframes hero-walze {
  0%, 20%  { transform: translateY(-80%); }
  25%, 45% { transform: translateY(-60%); }
  50%, 70% { transform: translateY(-40%); }
  75%, 95% { transform: translateY(-20%); }
  100%     { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   3. Beat 2: der erklärende Satz
   -------------------------------------------------------------------------- */
/* .hero-copy ist der Lead des Bausteins "Hero". Dort 650 px, hier 760 px, weil der Satz mit
   114 Zeichen sonst auf vier Zeilen läuft. Abweichung von der Bauvorschrift, Nachtrag Phase 4. */
.hero-copy { margin: 30px auto 0; max-width: 760px; }
/* Kleine Porträts der Ansprechpartner im Satz, 28 px, überlappend mit weißem Rand (D8: Rand
   statt Schatten auf der Fläche). Rein dekorativ. Am 2026-09-18 auf Weisung aus dem Satz über
   dem E-Mail-Feld hierher geholt und mitten in den Satz gesetzt, deshalb Abstand auf beiden
   Seiten wie in der Fassung vom 2026-09-15. */
.hero-avatars { display: inline-flex; vertical-align: middle; margin: -4px 2px 0 6px; }
.hero-avatars img {
  width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--white); margin-left: -8px; background: var(--paper);
}
.hero-avatars img:first-child { margin-left: 0; }

/* --------------------------------------------------------------------------
   4. Beat 3: E-Mail-Feld und Beleg-Zeile
   -------------------------------------------------------------------------- */
.hero-cta { margin-top: 36px; }
/* Ein Rahmen für Feld und Button. Rahmen in --line wie der Divider der Kopfzeile (Weisung
   2026-09-15). Achtung Gate: --line erreicht auf Weiß 1.31, WCAG 1.4.11 verlangt 3.0 für die
   Kontur eines Bedienelements, der Formular-Baustein nennt deshalb --line-strong (3.19).
   --r-sm, Focus-Ring nach D9 auf dem Rahmen, dazu Rahmen auf --ink.
   Feld und Button liegen in einer Zeile, der Button rechts. Wird die Spalte zu schmal für
   beide, bricht der Button innerhalb des Rahmens unter das Feld (flex-wrap), statt das
   Feld auf ein paar Zeichen zu drücken. */
.hero-form { margin: 0 auto; max-width: 440px; }
.hero-field {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 6px;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-sm);
  transition: border-color var(--t);
  text-align: left;
}
.hero-field:focus-within { border-color: var(--ink); outline: 2px solid var(--blue); outline-offset: 3px; }
.hero-field.is-invalid, .hero-field:has(input[aria-invalid="true"]) { border-color: var(--danger); }
.hero-input {
  flex: 1 1 140px; min-width: 0; height: 44px; padding: 0 12px;
  font: inherit; font-size: var(--fs-body); color: var(--ink);
  background: transparent; border: 0; border-radius: var(--r-xs);
}
.hero-input:focus-visible { outline: none; } /* der Ring liegt auf .hero-field */
/* Platzhalter trägt hier das Label. Auf Weisung in --muted-dark (Weisung 2026-09-15, helleres
   Grau), 3.1 auf Weiß. Achtung Gate: Als einziges Label ist er Text, WCAG 1.4.3 verlangt 4.5,
   --muted (4.9) wäre der hellste Ton, der das erfüllt. */
.hero-input::placeholder { color: var(--muted-dark); opacity: 1; }
/* Button 44 px in der 56-px-Zeile */
.hero-form-button {
  flex: 0 0 auto; height: auto; min-height: 44px; padding: 10px 16px;
  gap: 14px; line-height: 1.3; text-align: center;
}
/* Die Zusage unter dem Feld (2026-09-18). Sie trägt, was vorher im Satz mit den Porträts
   stand: kostenlos, Antwort in einem Werktag. Eine Zeile, leises Grau. */
.hero-form-note { margin: 12px 0 0; color: var(--muted); }
.hero-form-status { margin: 10px 0 0; }
.hero-form-status:empty { display: none; }
.hero-form-status.is-error { color: var(--danger); }
.hero-form-status.is-success { color: var(--success); }

/* Beleg-Zeile (2026-09-18): die zwei Kennzahlen nebeneinander, mittig. Sie ersetzt .hero-kpis
   der Fassung vom 2026-09-15 und ist der dritte Beat aus dem Feedback ("Flow: Aufmerksamkeit,
   was machen wir, Proof"). Der Partnerstatus stand hier nur kurz und ist seit derselben
   Weisung wieder Kicker über der H1. Die Kennzahl steht vor ihrer Bezeichnung in derselben
   Zeile, deshalb reicht hier body-m statt einer eigenen Rolle.
   Seit dem 2026-10-01 auf keiner Seite im Einsatz: auf index.html seit dem 2026-09-28 nicht
   mehr, auf work-zone.html auf Weisung entfernt (Christian Hansmann: "Ansprechpartner und
   die 2 kpis im hero entfernen"). Die Regeln bleiben als Variante stehen. */
.hero-proof {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 40px;
  font-size: var(--fs-body-m); line-height: 1.4; color: var(--muted);
}
.hero-proof-item { display: flex; align-items: center; gap: 10px; }
.hero-proof-value { color: var(--ink); font-weight: 500; letter-spacing: -.02em; }
.pixel-dot {
  width: 9px; height: 9px; background: var(--blue);
  box-shadow: 3px 3px 0 var(--yellow); border-radius: 3px; flex: none; /* D17: Gelb übernimmt den Job von Cyan */
}

/* Button-Reihe des Bausteins "Hero" (zwei Buttons). Auf index.html ohne Verwendung, das
   E-Mail-Feld ersetzt die Buttons. Bleibt für die Hero-Varianten der Leistungsseiten, die
   nach docs/site-architecture.md mit Versprechen in einem Satz und Buttons beginnen. */
.hero-actions {
  margin-top: 30px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: var(--gap);
}

/* --------------------------------------------------------------------------
   4a. Leistungsseiten: Zusage unter den Buttons und Ansprechpartner (2026-09-29)
   -------------------------------------------------------------------------- */
/* Gebraucht auf work-zone.html. Der Hero dort trägt nach docs/site-architecture.md Titel,
   Satz, zwei Buttons und die Zusage, ohne Kicker. Ansprechpartner und Belegzeile standen
   bis zum 2026-10-01 darunter und sind auf Weisung entfernt, .hero-person ist seitdem auf
   keiner Seite im Einsatz und bleibt als Variante stehen. Auf index.html ohne Verwendung,
   dort ändert dieser Block nichts.
   Die Zusage "Kostenlose Erstberatung, Antwort innerhalb eines Werktags." steht wie früher
   unter dem E-Mail-Feld (.hero-form-note), hier unter .hero-actions. Eigene Klasse, weil
   die Zeile nicht mehr zu einem Formular gehört. */
.hero-actions-note { margin: 14px 0 0; color: var(--muted); }
/* Ansprechpartner in der Form der Angebotskarten, damit Patrick Schwendemann so erscheint
   wie auf der Work-Zone-Karte der Startseite: Porträt 64 px quadratisch mit --r-md und
   Rahmen --line-card, daneben "Ansprechpartner" in .label und der Name in heading-xs, fett
   über <strong>. Die Zeile steht als Block mittig, der Text darin linksbündig. */
.hero-person {
  display: flex; align-items: center; gap: 16px;
  width: max-content; max-width: 100%;
  margin: 36px auto 0;
  text-align: left;
}
.hero-person-bild {
  width: 64px; height: 64px; flex: none;
  border-radius: var(--r-md);
  border: 1px solid var(--line-card);
  background: var(--paper);
  object-fit: cover;
}
.hero-person-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hero-person-label { color: var(--muted); }
.hero-person-name { color: var(--ink); }

/* --------------------------------------------------------------------------
   5. Logo-Laufband, stillgelegt am 2026-09-18
   -------------------------------------------------------------------------- */
/* "Disable the marquee for now" (Christian Hansmann, 2026-09-18), davor das Feedback "Logos
   rechts am Rand, zu weit weg". Das Markup ist aus index.html entfernt, die Dateien liegen
   weiter unter assets/logo/kunden/ (dort auch die Quellen je Datei). Die Regeln bleiben hier
   stehen, damit das Wiedereinschalten das Markup zurückholen kann und sonst nichts. Wer sie
   wieder benutzt, klärt zwei offene Punkte: die Freigabe je Kunde (docs/freigaben.md, Gate
   vor dem Livegang) und WCAG 2.2.2, Bewegung ohne Anhalter (README.md, Offene Punkte).
   In der mittigen Fassung gehört das Band vollbreit unter die Beleg-Zeile, nicht in eine
   Spalte daneben. Die Regeln unten stehen noch auf dem zweispaltigen Kopf (grid-column 2),
   das ist beim Wiedereinschalten anzupassen. */
.hero-logos {
  --logos-gap: 48px; /* Awesomic: 24 px hohe Logos, rund 48 px Lücke, etwa 17 px je Sekunde */
  grid-column: 2; align-self: start;
  margin: 148px 0 0; min-width: 0;
  display: flex; gap: var(--logos-gap); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.hero-logos-track {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; gap: var(--logos-gap); flex: none;
  animation: hero-logos 95s linear infinite; /* Spur rund 1.620 px, ergibt Awesomic-Tempo */
}
.hero-logos-track li { flex: none; display: flex; }
.hero-logos-track img { display: block; height: 24px; width: auto; }
/* Optisches Gewicht angleichen: die dünne, breite Wortmarke (Porsche) niedriger, die kompakten
   Bildmarken (Herrenknecht, TRUMPF) höher, damit alle ähnlich schwer wirken */
.hero-logos-track img.hero-logo--wide { height: 16px; }
.hero-logos-track img.hero-logo--compact { height: 32px; }
.hero-logos:hover .hero-logos-track,
.hero-logos:focus-within .hero-logos-track { animation-play-state: paused; }
@keyframes hero-logos { to { transform: translateX(calc(-100% - var(--logos-gap))); } }

/* --------------------------------------------------------------------------
   6. Breakpoint 980px
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .hero { padding-top: 60px; padding-bottom: 56px; }
  .hero--edge { padding-bottom: calc(var(--sec-bottom) + var(--r-section)); }
  .hero-proof { margin-top: 44px; gap: 12px 28px; }
  /* Einspaltig gibt es keine leeren Außenspalten mehr, der Text steht fast über die volle
     Breite. Die klarende Fläche wächst deshalb mit, sonst läuft Farbe hinter die Schrift. */
  .hero-aurora-clear {
    background: radial-gradient(ellipse 70% 52% at 50% 44%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 1) 52%,
      rgba(255, 255, 255, .92) 70%,
      rgba(255, 255, 255, 0) 92%);
  }
}

/* --------------------------------------------------------------------------
   6b. Variante mit Bild: Text links, Bild rechts (work-zone.html, seit 2026-10-12)
   -------------------------------------------------------------------------- */
/* Wunsch der Geschäftsführung: ein Bild im Hero, das der Work-Zone-Karte der Startseite
   (werkbank-uebergabe.webp, 2400 × 1022). Der Text steht dafür links bündig, die Spalte
   ist so breit, dass das längste Wechselwort der Walze ("Formularumstellungen") in display-2
   auf eine Zeile passt. Das Bild ist ein Panorama, die Fläche 5:4 schneidet es so zu,
   dass beide Personen und die Akte im Bild bleiben (object-position 90 %; in 4:5 war vom
   Annehmenden nur der Arm zu sehen). Rundung --r-xl und Fläche --paper wie das Bild
   der Problem-Sektion (.principle-bild). Unter 980 px eine Spalte, das Bild unter dem Text
   im Querformat. Die Walze erbt text-align: left, die Wörter stehen damit linksbündig im
   Fenster statt mittig. */
.hero--bild { text-align: left; }
.hero--bild .hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .62fr);
  align-items: center;
  gap: 56px;
}
.hero--bild .hero-head { max-width: none; margin: 0; }
.hero--bild .hero-title { margin-top: 0; }
/* Die Textspalte ist schmaler als die mittige Spalte. In display-2 (bis 82 px) wäre
   "Formularumstellungen" rund 6 Prozent breiter als sie (gemessen 773 zu 730 px bei
   1440 px). Die H1 läuft hier deshalb mit 4,6vw zwischen 44 und 72 px, das Wort braucht
   rund 9,6 em. Unter 980 px gilt wieder die Größe der Rolle, die Spalte ist dann voll. */
@media (min-width: 981px) {
  .hero--bild .hero-title { font-size: clamp(44px, 4.6vw, 72px); }
}
.hero--bild .hero-copy { margin-left: 0; margin-right: 0; max-width: none; }
.hero--bild .hero-actions { justify-content: flex-start; }
.hero-bild {
  margin: 0;
  display: grid;
  aspect-ratio: 5 / 4;
  border-radius: var(--r-xl);
  background: var(--paper);
  overflow: hidden; /* Fallback */
  overflow: clip;   /* beschneidet das Bild an der Rundung, kein Scroll-Container (DESIGN.md, Regel 9) */
}
.hero-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Bilddurchlauf (seit 2026-10-12, Vorlage: Karte mit Fortschrittsbalken). Die Bilder liegen
   übereinander in derselben Rasterzelle, das aktive ist deckend, das nächste blendet in
   .6 s darüber. Oben ein Balken je Bild: 4 px (bis 2026-10-12 3 px), Pille, Spur Weiß .35, Füllung Weiß. Der
   aktive Balken füllt sich in --lauf-dauer (6 s, aus js/bausteine/hero.js gesetzt), die
   vorigen stehen voll, die folgenden leer. Damit Weiß auch auf der hellen Mappe lesbar
   bleibt, liegt oben ein Verlauf aus Ink .6 nach transparent, 96 px hoch. Pause bei Hover. Balken und
   Verlauf erscheinen nur, wenn das Skript den Lauf startet (.is-laeuft). */
.hero-lauf { position: relative; }
.hero-lauf-bild {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity .6s ease;
}
.hero-lauf-bild.is-aktiv { opacity: 1; }
.hero-bild .hero-lauf-bild--uebergabe { object-position: 90% 50%; }
.hero-lauf::before {
  content: "";
  position: absolute; inset: 0 0 auto; z-index: 1;
  height: 96px;
  background: linear-gradient(rgba(16, 17, 19, .6), rgba(16, 17, 19, 0));
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.hero-lauf-balken {
  position: absolute; top: 20px; left: 24px; right: 24px; z-index: 2;
  display: flex; gap: 10px;
  opacity: 0;
  transition: opacity .3s;
}
.hero-lauf.is-laeuft::before,
.hero-lauf.is-laeuft .hero-lauf-balken { opacity: 1; }
.hero-lauf-spur {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .35);
  overflow: hidden;
}
.hero-lauf-fuellung {
  display: block;
  height: 100%;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero-lauf-spur.is-voll .hero-lauf-fuellung { transform: scaleX(1); }
.hero-lauf.is-laeuft .hero-lauf-spur.is-aktiv .hero-lauf-fuellung {
  animation: hero-lauf-fuellen var(--lauf-dauer, 6s) linear forwards;
}
.hero-lauf.is-pausiert .hero-lauf-spur.is-aktiv .hero-lauf-fuellung { animation-play-state: paused; }
@keyframes hero-lauf-fuellen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@media (max-width: 980px) {
  .hero--bild .hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .hero-bild { aspect-ratio: 16 / 9; }
}

/* --------------------------------------------------------------------------
   7. Breakpoint 640px
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .hero { padding-top: 46px; padding-bottom: 50px; }
  .hero--edge { padding-bottom: calc(var(--sec-bottom) + var(--r-section)); }
  /* Kleinere Größe für die H1: display-2 hat 48 px Untergrenze, damit liefe das längste
     Wechselwort über die Zeile. Bei 375 px stehen nach --pad-x (28 px je Seite) 319 px
     zur Verfügung.
     Nachgemessen am 2026-11-09 (DEV-1669, Weisung "Headline im Hero etwas größere
     Schriftgröße im responsive format") mit gerenderter Manrope statt der früheren
     Schätzung über .46 em je Zeichen. Die alte Rechnung galt noch der Copy bis zum
     2026-09-28 ("Wir reden nicht über", 20 Zeichen, und "Automatisierungen"). Heute ist
     die längste Zeile "Projekte mit Ihnen" mit 18 Zeichen, sie misst bei 100 px genau
     758 px. Damit passt sie bei 375 px bis 42 px, die bisherigen 8.5vw (31,9 px) ließen
     also rund ein Viertel Größe liegen.
     10.5vw ergibt 39,4 px bei 375 px und 33,6 px bei 320 px, beide Male rund 95 % der
     verfügbaren Breite, also ein schmaler Rest statt Kante an Kante. Ab 457 px greift die
     Deckelung auf die 48 px der Rolle, der Übergang auf display-2 bei 641 px bleibt
     stufenlos. Abweichung von der Bauvorschrift, Nachtrag Phase 4. */
  .hero-title { font-size: min(48px, 10.5vw); }
  /* Die Wortwalze von work-zone.html trägt längere Wörter als die Bänder der Startseite:
     "Formularumstellungen" misst bei 100 px Größe 960 px, "Projekte mit Ihnen" nur 758.
     Die Walze läuft einzeilig und kann nicht umbrechen, das Wort setzt damit eine harte
     Mindestbreite. Mit den 10.5vw der Startseite brauchte die Seite 405 statt 375 px, der
     Browser zoomte den Hero heraus (DEV-1669, gemeldet am 2026-11-10 mit Screenshot).
     .hero--bild steht nur auf work-zone.html, deshalb bleibt es dort bei den 8.5vw, die
     vor dem 2026-11-09 für beide Seiten galten: 31,9 px bei 375 px Breite, das längste
     Wort braucht davon 306 von 319 px. Bindend ist 320 px, dort sind es 261 von 264.
     Wer die Walze kürzt, kann den Wert angleichen, die Rechnung steht hier. */
  .hero--bild .hero-title { font-size: min(48px, 8.5vw); }
  .hero-copy { margin-top: 24px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-person { margin-top: 28px; }
  .hero-form-button { flex: 1 1 100%; } /* unter dem Feld, volle Breite */
  /* Belege untereinander, wenn die drei Paare nicht in die Zeile passen */
  .hero-proof { margin-top: 36px; gap: 12px 24px; }
  /* Auf dem Handy bleibt nur noch ein schmaler Farbsaum am Rand übrig. Die Deckkraft geht
     deshalb herunter, sonst wirkt die Fläche bunt statt getönt. */
  .hero-aurora { opacity: .7; }
}

/* --------------------------------------------------------------------------
   8. Reduzierte Bewegung: das Wechselwort steht, das Skript schaltet nicht (D10)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  /* Keine Blende. Der Rueckfall aus Abschnitt 5 greift dann von selbst: das erste
     Wort jeder Zeile steht sichtbar, zusammen ergeben sie einen Satz. */
  .hero-band-wort { animation: none; }
  /* Die Walze steht auf dem ersten Wort */
  .hero-walze-spur { animation: none; transform: translateY(-80%); }
  /* css/style.css stellt .reveal hier auf sichtbar und die Dauer auf .01ms, die Verzögerung
     aber nicht. Ohne diese Zeile erschienen die sieben Teile trotzdem nacheinander, verteilt
     über 0,72 s. Sie kommen jetzt alle sofort. */
  .js .hero .hero-step-1, .js .hero .hero-step-2, .js .hero .hero-step-3,
  .js .hero .hero-step-4, .js .hero .hero-step-5, .js .hero .hero-step-6,
  .js .hero .hero-step-7 { transition-delay: 0s; }
  .hero-logos-track { animation: none; }
  /* Die Aurora braucht hier nichts: Sie ist seit dem 2026-09-18 ohne Bewegung. */
}