/* DYNAMIS 321-Stil: Startbild KI-Assistent (Werte wie beim KI-Copilot-Hero von 321med) */
.vo-hero { padding: 140px 0 60px; text-align: center; overflow: hidden; background: radial-gradient(60% 45% at 50% 0%, #fff4cf, rgba(255,255,255,0) 70%), radial-gradient(70% 40% at 50% 100%, rgba(186,176,154,.22), rgba(255,255,255,0) 70%), #fff; }
.vo-hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 1.4rem + 2.6vw, 54px); line-height: 1.12; letter-spacing: -.02em; margin: 22px auto 16px; }
.vo-hero h1 b { font-weight: 760; }
.vo-body { max-width: 640px; margin: 0 auto 22px; font-size: 16px; line-height: 1.7; color: var(--soft); }
.vo-hero .hero__cta { justify-content: center; margin-top: 0; }

.vo-scene { position: relative; width: 900px; max-width: none; height: 460px; left: 50%; margin: 18px 0 0 -450px; transform-origin: center top; }
.vo-waves { position: absolute; left: 50%; top: 50%; width: min(96%, 860px); height: 230px; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; gap: 8px; z-index: 0; opacity: .9; pointer-events: none; }
.vo-waves::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient(90deg, rgba(245,197,24,0), rgba(245,197,24,.55) 15%, rgba(245,197,24,.55) 85%, rgba(245,197,24,0)); box-shadow: 0 0 20px rgba(245,197,24,.25); }
.vo-waves span { position: relative; z-index: 1; display: block; flex: 0 0 4px; width: 4px; height: var(--bar-h, 40px); border-radius: 999px; background: linear-gradient(#ffe48a 0%, #ffcf3a 42%, #F5C518 72%, #D4A500 100%); box-shadow: 0 0 12px rgba(255,207,58,.3), 0 0 10px rgba(245,197,24,.22); animation: vo-bar var(--bar-dur, 1.6s) ease-in-out var(--bar-delay, 0s) infinite; }
.vo-waves span:nth-child(3n) { width: 5px; flex-basis: 5px; }
.vo-lines { position: absolute; left: 50%; top: 50%; width: 350px; height: 350px; transform: translate(-50%, -50%); z-index: 1; pointer-events: none; }
.vo-lines span { position: absolute; inset: 0; border: 1px dashed rgba(186,176,154,.35); border-radius: 50%; }
.vo-lines span:nth-child(2) { inset: 24px; }
.vo-lines span:nth-child(3) { inset: 48px; }
.vo-ring { position: absolute; left: 50%; top: 50%; width: 350px; height: 350px; transform: translate(-50%, -50%); z-index: 2; animation: vo-spin 28s linear infinite; }
.vo-item { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(var(--angle)) translate(172px); }
.vo-item__in { width: 44px; height: 44px; border-radius: 30%; background: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; color: #8a7a5a; transform: rotate(calc(-1 * var(--angle))); animation: vo-spin-rev 28s linear infinite; }
.vo-item__in svg { width: 40%; height: 40%; }

.vo-orb { position: absolute; left: 50%; top: 50%; width: 230px; height: 230px; transform: translate(-50%, -50%); z-index: 4; pointer-events: none; }
.vo-clouds { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; transform: translate(-50%, -50%); opacity: .78; z-index: 0; }
.vo-clouds i { position: absolute; left: 50%; top: 50%; border-radius: 50%; filter: blur(18px); opacity: .75; transform: translate(-50%, -50%); }
.vo-clouds .c1 { width: 180px; height: 180px; background: radial-gradient(circle at 30% 30%, rgba(245,197,24,.9) 0%, rgba(255,207,58,.7) 38%, rgba(255,140,40,.5) 62%, transparent 85%); animation: vo-cloud-mid 2.2s ease-in-out infinite; }
.vo-clouds .c2 { width: 230px; height: 230px; background: radial-gradient(circle at 70% 35%, rgba(255,207,58,.55) 0%, rgba(245,197,24,.65) 35%, rgba(201,150,0,.45) 60%, transparent 85%); animation: vo-cloud-soft 3.1s ease-in-out -.4s infinite; }
.vo-clouds .c3 { width: 150px; height: 150px; background: radial-gradient(circle at 40% 60%, rgba(255,140,40,.6) 0%, rgba(245,197,24,.6) 38%, rgba(255,207,58,.5) 62%, transparent 85%); animation: vo-cloud-strong 1.9s ease-in-out -.2s infinite; }
.vo-clouds .c4 { width: 260px; height: 260px; background: radial-gradient(circle at 55% 25%, rgba(255,214,90,.45) 0%, rgba(245,197,24,.55) 32%, rgba(255,150,60,.4) 56%, rgba(255,207,58,.35) 74%, transparent 88%); animation: vo-cloud-soft 2.6s ease-in-out -1s infinite; }
.vo-core-wrap { position: absolute; left: 50%; top: 50%; width: 190px; height: 190px; transform: translate(-50%, -50%); z-index: 2; }
.vo-core-wrap::before, .vo-core-wrap::after { content: ""; position: absolute; left: 50%; top: 50%; z-index: 3; border-radius: 50%; transform: translate(-50%, -50%); animation: vo-ring-pulse 3s ease-in-out infinite; }
.vo-core-wrap::before { width: 158px; height: 158px; border: 2px solid rgba(245,197,24,.18); }
.vo-core-wrap::after { width: 184px; height: 184px; border: 1px solid rgba(201,150,0,.1); animation-delay: .5s; }
.vo-core { position: absolute; left: 50%; top: 50%; z-index: 6; width: 140px; height: 140px; border-radius: 50%; display: flex; align-items: center; justify-content: center; overflow: hidden; background: #fff; box-shadow: 0 0 0 10px rgba(245,197,24,.18), 0 16px 32px rgba(245,197,24,.22); transform: translate(-50%, -50%); animation: vo-core 1.4s ease-in-out infinite; }
.vo-core::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(92% 70% at 50% 100%, rgba(245,197,24,.14) 0%, transparent 74%); }
.vo-core img { position: relative; z-index: 1; width: 58%; height: 58%; filter: drop-shadow(0 2px 4px rgba(30,34,39,.16)); }

.vo-ov { position: absolute; z-index: 5; width: 170px; aspect-ratio: 1; border-radius: 26px; background: #f3f4f2 center / cover; box-shadow: 0 0 0 10px rgba(186,176,154,.3), 0 0 0 10px rgba(255,255,255,.34), 0 18px 40px rgba(0,0,0,.14); isolation: isolate; }
.vo-ov::before { content: ""; position: absolute; left: 50%; top: 62%; width: 170%; height: 140%; transform: translate(-50%, -50%); z-index: -2; background: radial-gradient(rgba(186,176,154,.56) 0%, rgba(186,176,154,.24) 44%, rgba(186,176,154,0) 78%); filter: blur(28px); pointer-events: none; }
.vo-ov::after { content: ""; position: absolute; left: 50%; top: 56%; width: 132%; height: 118%; transform: translate(-50%, -50%); z-index: -1; background: radial-gradient(rgba(255,255,255,.52) 0%, rgba(255,255,255,.12) 48%, rgba(255,255,255,0) 82%); filter: blur(20px); pointer-events: none; }
.vo-ov--l { left: 4%; top: 14%; background-position: 70% 50%; }
.vo-ov--r { right: 4%; bottom: 8%; background-position: 70% 50%; }
.vo-pill { position: absolute; top: 12px; z-index: 7; display: inline-flex; align-items: center; width: max-content; padding: 7px 12px; border-radius: 999px; background: #fff; border: 5px solid rgba(255,255,255,.96); box-shadow: 0 18px 36px rgba(30,34,39,.22), 0 8px 22px rgba(30,34,39,.16), 0 0 0 5px rgba(255,255,255,.52); font-size: 10px; font-weight: 700; line-height: 1.1; white-space: nowrap; color: var(--ink); }
.vo-pill--l { left: 108px; }
.vo-pill--r { right: 108px; }

@keyframes vo-bar { 0%, 100% { transform: scaleY(.42); opacity: .55; } 45% { transform: scaleY(1.02); opacity: 1; } 70% { transform: scaleY(.76); opacity: .82; } }
@keyframes vo-spin { from { transform: translate(-50%, -50%) rotate(0deg); } to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes vo-spin-rev { from { transform: rotate(calc(-1 * var(--angle))) rotate(360deg); } to { transform: rotate(calc(-1 * var(--angle))) rotate(0deg); } }
@keyframes vo-ring-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .4; } 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; } }
@keyframes vo-core { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } }
@keyframes vo-cloud-soft { 0%, 100% { transform: translate(-50%, -50%) scale(.86); opacity: .22; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: .92; } }
@keyframes vo-cloud-mid { 0%, 100% { transform: translate(-50%, -50%) scale(.82); opacity: .2; } 50% { transform: translate(-50%, -50%) scale(1.14); opacity: 1; } }
@keyframes vo-cloud-strong { 0%, 100% { transform: translate(-50%, -50%) scale(.78); opacity: .18; } 50% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .vo-waves span, .vo-ring, .vo-item__in, .vo-core-wrap::before, .vo-core-wrap::after, .vo-core, .vo-clouds i { animation: none; } }
@media (max-width: 960px) { .vo-hero { padding-top: 120px; } }