/* Hero der Startseite: Aurora im Hintergrund, Überschrift in zwei Zeilen, das Wechselwort in Bernstein mit Fallblatt-Effekt und Lichtschein.
 * Baut auf /kacheln.css (.aurora) auf. Alle Bewegung ist abschaltbar (prefers-reduced-motion). */
.hero-wow { position: relative; isolation: isolate; }
.hero-wow .aurora { z-index: -1; inset: -30% -25% -20%; opacity: .9; }
.hero-wow h1 { display: flex; flex-direction: column; gap: .02em; }
.hero-wow .h1-fix { display: block; }
.wechsel { display: block; position: relative; min-height: 1em; white-space: nowrap; color: var(--amber);
  text-shadow: 0 0 34px rgba(245, 185, 66, .38), 0 0 90px rgba(245, 185, 66, .2); }
.zelle { display: inline-block; text-align: center; transform-origin: 50% 70%; backface-visibility: hidden; }
.zelle.mess { position: absolute; visibility: hidden; white-space: pre; }
.zelle.dreht { color: #ffe6ad; opacity: .85; }
.zelle.landet { animation: klapp .38s cubic-bezier(.2, .8, .2, 1); }
@keyframes klapp {
  0% { transform: perspective(520px) rotateX(-82deg); opacity: .25; }
  62% { transform: perspective(520px) rotateX(11deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
/* Lichtschein: ein heller Streifen zieht einmal von links nach rechts über das Wort */
.wechsel::after { content: ""; position: absolute; inset: -4% -2%; pointer-events: none; opacity: 0; mix-blend-mode: plus-lighter;
  background: linear-gradient(100deg, transparent 38%, rgba(255, 244, 214, .55) 50%, transparent 62%) -120% 0 / 60% 100% no-repeat; }
.wechsel.schein::after { animation: schein 1.5s ease-out 1 both; }
@keyframes schein { 0% { opacity: 1; background-position: -120% 0; } 100% { opacity: 0; background-position: 220% 0; } }
@media (prefers-reduced-motion: reduce) {
  .zelle.landet, .wechsel.schein::after { animation: none; }
  .hero-wow .aurora { animation: none; }
}

/* Die Aurora ragt über den Rand: kein horizontaler Scrollbalken */
html, body { overflow-x: hidden; overflow-x: clip; }
/* Auf kleinen Handys darf das längste Wort („im besten Licht.“) nicht über den Rand laufen */
@media (max-width: 520px) { .hero-wow h1 { font-size: clamp(40px, 12.2vw, 60px); } }