/* Startseite dynamisch */
/* Wechselndes Wort im Titel */
.dx-rotor { position: relative; display: grid; overflow: hidden; padding-bottom: .08em; }
.dx-word { grid-area: 1 / 1; justify-self: start; display: inline-block; max-width: 100%; background: linear-gradient(100deg, #f1d6a8, #e7b878 40%, #9fd9c9 90%); -webkit-background-clip: text; background-clip: text; color: transparent; transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .6s; }
.dx-word.dx-enter { transform: translateY(70%); opacity: 0; }
.dx-word.dx-leave { transform: translateY(-70%); opacity: 0; }

/* Leuchtende Aurora im Einstieg */
.dx-home .hs-hero { position: relative; isolation: isolate; }
.dx-home .hs-hero::after { content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none; background: radial-gradient(40% 50% at 20% 30%, #2f7a6d55, transparent 70%), radial-gradient(35% 45% at 80% 20%, #c99a5b40, transparent 70%), radial-gradient(30% 40% at 60% 80%, #6aa7c740, transparent 70%); filter: blur(30px); animation: dx-aurora 16s ease-in-out infinite alternate; }
@keyframes dx-aurora { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4%, -3%, 0) scale(1.08); } 100% { transform: translate3d(-3%, 2%, 0) scale(1.02); } }
.dx-home .hs-hero-facts b { font-variant-numeric: tabular-nums; }

/* Einblenden beim Scrollen */
.dx-reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1); }
.dx-reveal.dx-in { opacity: 1; transform: none; }
.dx-in .sp-feature-grid article, .dx-in .sp-industry, .dx-in .hg-quick > * { animation: dx-pop .6s both cubic-bezier(.2, .8, .2, 1); }
.dx-in :is(.sp-feature-grid article, .sp-industry):nth-child(2) { animation-delay: .05s; }
.dx-in :is(.sp-feature-grid article, .sp-industry):nth-child(3) { animation-delay: .1s; }
.dx-in :is(.sp-feature-grid article, .sp-industry):nth-child(4) { animation-delay: .15s; }
.dx-in :is(.sp-feature-grid article, .sp-industry):nth-child(5) { animation-delay: .2s; }
.dx-in :is(.sp-feature-grid article, .sp-industry):nth-child(6) { animation-delay: .25s; }
.dx-in :is(.sp-feature-grid article, .sp-industry):nth-child(n+7) { animation-delay: .3s; }
@keyframes dx-pop { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }

/* Lichtschein unter dem Mauszeiger */
#creatorHome :is(.hg-quick button, .sp-feature-grid article, .sp-industry, .dx-tile) { position: relative; }
#creatorHome :is(.hg-quick button, .sp-feature-grid article, .sp-industry, .dx-tile)::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), #ffffff4d, transparent 60%); }
#creatorHome :is(.hg-quick button, .sp-feature-grid article, .sp-industry, .dx-tile):hover::before { opacity: 1; }
#creatorHome .sp-feature-grid article { transition: transform .3s, box-shadow .3s; }
#creatorHome .sp-feature-grid article:hover { transform: translateY(-4px); box-shadow: 0 18px 40px #14323a1f; }

/* Design-Laufband */
.dx-designs { overflow: hidden; }
.dx-designs .hs-section-heading h2 { font-family: Manrope, "Segoe UI", system-ui, sans-serif; }
.dx-num { background: linear-gradient(100deg, #1d5c55, #2f7a6d 50%, #c99a5b); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.dx-all { height: 44px; padding: 0 18px; border-radius: 12px; border: 0; background: linear-gradient(120deg, #2f7a6d, #1d5c55 45%, #14323a); color: #fff; font: 800 14px Manrope, "Segoe UI", system-ui, sans-serif; cursor: pointer; box-shadow: 0 8px 20px #14323a33; white-space: nowrap; }
.dx-all:hover { transform: translateY(-1px); }
.dx-marquee { display: grid; gap: 16px; margin: 22px -40px 0; padding: 6px 0 10px; -webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.dx-row { display: flex; gap: 16px; width: max-content; animation: dx-scroll 90s linear infinite; }
.dx-row.dx-rev { animation-direction: reverse; animation-duration: 110s; }
.dx-marquee:hover .dx-row, .dx-marquee:focus-within .dx-row { animation-play-state: paused; }
@keyframes dx-scroll { to { transform: translateX(-50%); } }
.dx-tile { flex: none; width: 250px; padding: 0; border: 1px solid #e1e7e4; border-radius: 16px; background: var(--bg); overflow: hidden; cursor: pointer; text-align: left; box-shadow: 0 8px 22px #14323a14; transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s; font: inherit; color: inherit; }
.dx-tile:hover, .dx-tile:focus-visible { transform: translateY(-6px) scale(1.02); box-shadow: 0 22px 44px #14323a2e; outline: none; }
.dx-shot { position: relative; display: block; height: 150px; background: linear-gradient(135deg, var(--c), #14323a); overflow: hidden; }
.dx-shot img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s; }
.dx-tile:hover .dx-shot img { transform: scale(1.07); }
.dx-shot i { position: absolute; inset: auto 0 0; height: 5px; background: var(--c); }
.dx-meta { display: grid; gap: 3px; padding: 11px 14px 13px; }
.dx-meta b { font-size: 16px; font-weight: 700; color: var(--c); filter: brightness(.8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-meta small { font: 600 12px Manrope, "Segoe UI", system-ui, sans-serif; color: #66777d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 760px) {
  .dx-rotor { font-size: .8em; white-space: nowrap; }
  .dx-designs .hs-section-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dx-marquee { margin: 18px -16px 0; }
  .dx-tile { width: 200px; }
  .dx-shot { height: 118px; }
}
@media (prefers-reduced-motion: reduce) {
  .dx-row { animation: none; width: auto; overflow-x: auto; padding-bottom: 6px; }
  .dx-home .hs-hero::after { animation: none; }
  .dx-word { transition: none; }
  .dx-in :is(.sp-feature-grid article, .sp-industry, .hg-quick > *) { animation: none; }
}