/* SocialRena – Startseite v1.19: farbiger, mit Live-Screens, Video & Link in Bio */

/* Hero: lebendiger Hintergrund */
.hero { overflow: hidden; }
.hero::before { content: ''; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; background: radial-gradient(40% 40% at 15% 20%, rgb(0 180 238 / 20%), transparent 70%), radial-gradient(35% 35% at 85% 15%, rgb(204 56 239 / 18%), transparent 70%), radial-gradient(40% 40% at 70% 85%, rgb(87 66 245 / 16%), transparent 70%); animation: hm-aurora 16s ease-in-out infinite alternate; }
@keyframes hm-aurora { to { transform: translate3d(3%, 4%, 0) rotate(4deg) scale(1.05); } }

/* Hero-Visual: echtes Kabinett im Browserrahmen */
.hv-app { min-height: 520px; perspective: 1600px; }
.hv-glow { position: absolute; inset: 8% 4% 0 10%; border-radius: 40px; background: linear-gradient(120deg, #00b4ee, #5742f5 55%, #cc38ef); filter: blur(70px); opacity: .35; animation: hm-pulse 6s ease-in-out infinite alternate; }
@keyframes hm-pulse { to { opacity: .55; transform: scale(1.04); } }
.hv-browser { position: relative; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 50px 100px -30px rgb(28 40 110 / 45%), 0 0 0 1px rgb(16 20 58 / 8%); transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg); transform-origin: 30% 50%; transition: transform .8s cubic-bezier(.22, 1, .36, 1); width: 118%; }
.hv-app:hover .hv-browser { transform: rotateY(-6deg) rotateX(3deg); }
.hv-bar { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; background: #f3f5fa; border-bottom: 1px solid #e6ebf3; }
.hv-bar > i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; } .hv-bar > i:nth-child(2) { background: #febc2e; } .hv-bar > i:nth-child(3) { background: #28c840; }
.hv-bar span { margin-left: 12px; padding: 4px 14px; border-radius: 8px; background: #fff; font-size: 12px; color: #707891; border: 1px solid #e6ebf3; }
.hv-browser img { display: block; width: 100%; height: auto; }
.hv-browser::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgb(255 255 255 / 35%) 50%, transparent 60%); background-size: 300% 100%; animation: hm-shine 6s ease-in-out 1.5s infinite; pointer-events: none; }
@keyframes hm-shine { 0% { background-position: 120% 0; } 40%, 100% { background-position: -60% 0; } }
.hv-phone { position: absolute; right: -6%; bottom: -40px; width: 190px; aspect-ratio: 9 / 19; border-radius: 34px; padding: 7px; background: #11141c; box-shadow: 0 40px 80px -24px rgb(0 0 0 / 50%), inset 0 0 0 1.5px #39404f; overflow: hidden; animation: hm-float 6s ease-in-out infinite; z-index: 3; }
.hv-phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 28px; display: block; }
.hv-isl { position: absolute; top: 14px; left: 50%; width: 56px; height: 16px; margin-left: -28px; border-radius: 10px; background: #000; z-index: 2; }
@keyframes hm-float { 50% { transform: translateY(-14px) rotate(1.5deg); } }
.hv-app .float-sched { left: -6%; top: 58%; bottom: auto; z-index: 4; animation: hm-float 7s ease-in-out .6s infinite; }
.hv-app .float-team { right: auto; left: 20%; top: -26px; z-index: 4; animation: hm-float 8s ease-in-out 1.2s infinite; }
.hv-ai { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; color: #fff; font-size: 18px; background: linear-gradient(135deg, #00b4ee, #5742f5, #cc38ef); }

/* Video */
.vid-section { position: relative; background: #0a0e2e; color: #fff; overflow: hidden; }
.vid-bg i { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .5; }
.vid-bg i:nth-child(1) { width: 600px; height: 600px; left: -150px; top: -150px; background: #00b4ee; animation: hm-drift 18s ease-in-out infinite alternate; }
.vid-bg i:nth-child(2) { width: 560px; height: 560px; right: -120px; top: 20%; background: #cc38ef; animation: hm-drift 22s ease-in-out infinite alternate-reverse; }
.vid-bg i:nth-child(3) { width: 520px; height: 520px; left: 35%; bottom: -260px; background: #5742f5; animation: hm-drift 20s ease-in-out infinite alternate; }
@keyframes hm-drift { to { transform: translate(80px, 60px) scale(1.15); } }
.vid-section .wrap { position: relative; }
.section-head-light h2 { color: #fff; } .section-head-light .lead { color: #c3cbef; } .section-head-light .eyebrow { color: #9fb0ff; }
.vid-frame { position: relative; max-width: 1040px; margin: 0 auto; border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 60px 120px -40px rgb(0 0 0 / 80%), 0 0 0 1px rgb(255 255 255 / 14%), 0 0 120px -30px rgb(87 66 245 / 70%); }
.vid-frame video { width: 100%; height: 100%; display: block; object-fit: cover; }
.vid-play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; border: 0; cursor: pointer; background: radial-gradient(circle at center, rgb(10 14 46 / 10%), rgb(10 14 46 / 45%)); color: #fff; font: inherit; transition: background .3s; }
.vid-play span { width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #00b4ee, #5742f5 55%, #cc38ef); box-shadow: 0 20px 50px -10px rgb(87 66 245 / 80%), 0 0 0 0 rgb(255 255 255 / 40%); animation: hm-ring 2.2s ease-out infinite; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.vid-play span svg { width: 42px; height: 42px; margin-left: 6px; }
.vid-play b { font-size: 17px; font-weight: 700; padding: 8px 18px; border-radius: 99px; background: rgb(255 255 255 / 14%); backdrop-filter: blur(8px); }
.vid-play:hover span { transform: scale(1.08); }
@keyframes hm-ring { 0% { box-shadow: 0 20px 50px -10px rgb(87 66 245 / 80%), 0 0 0 0 rgb(255 255 255 / 45%); } 100% { box-shadow: 0 20px 50px -10px rgb(87 66 245 / 80%), 0 0 0 26px rgb(255 255 255 / 0%); } }
.vid-frame.playing .vid-play { opacity: 0; pointer-events: none; }
.stats-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 1040px; margin: 48px auto 0; }
.stats-band > div { padding: 24px; border-radius: 22px; background: rgb(255 255 255 / 7%); border: 1px solid rgb(255 255 255 / 12%); text-align: center; backdrop-filter: blur(10px); }
.stats-band b { display: block; font-family: var(--sr-font-display); font-size: 44px; font-weight: 600; letter-spacing: -.04em; background: linear-gradient(100deg, #26c6ff, #a594ff 50%, #e15cff); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stats-band small { color: #c3cbef; font-size: 14.5px; }

/* Produkt-Tour */
.tour { display: grid; grid-template-columns: 340px 1fr; gap: 40px; align-items: center; margin: 0 auto 96px; max-width: 1240px; }
.tour-tabs { display: grid; gap: 8px; }
.tour-tab { position: relative; overflow: hidden; text-align: left; border: 1px solid transparent; background: none; border-radius: 18px; padding: 16px 20px; cursor: pointer; font: inherit; color: var(--sr-text); transition: background .3s, border-color .3s, box-shadow .3s; }
.tour-tab b { display: block; font-size: 17px; font-weight: 700; } .tour-tab small { display: block; margin-top: 4px; color: var(--sr-text-secondary); font-size: 14px; line-height: 1.5; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s, opacity .4s; }
.tour-tab:hover { background: #f5f7fc; }
.tour-tab.on { background: #fff; border-color: #e3e9f3; box-shadow: 0 16px 40px -18px rgb(28 59 110 / 30%); }
.tour-tab.on b { background: linear-gradient(100deg, #087bfa, #5742f5 60%, #cc38ef); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tour-tab.on small { max-height: 80px; opacity: 1; }
.tour-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, #00b4ee, #5742f5, #cc38ef); }
.tour-tab.on .tour-prog { animation: tour-p var(--tour-ms, 5200ms) linear forwards; }
.tour.paused .tour-tab.on .tour-prog { animation-play-state: paused; }
@keyframes tour-p { to { width: 100%; } }
.tour-stage { perspective: 1800px; }
.tour-browser { width: 100%; transform: rotateY(-8deg) rotateX(4deg); }
.tour:hover .tour-browser { transform: rotateY(-3deg) rotateX(2deg); }
.tour-imgs { position: relative; aspect-ratio: 16 / 10; background: #f5f7fc; }
.tour-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.04) translateY(10px); transition: opacity .6s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.tour-img.on { opacity: 1; transform: none; }
.tour-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 12px; font-weight: 700; color: #167449; }
.tour-live i { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; animation: hm-blink 1.6s infinite; }
@keyframes hm-blink { 50% { opacity: .3; } }

/* Feature „Neu“ */
.f-new { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 9px; border-radius: 99px; font-style: normal; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; color: #fff; background: linear-gradient(100deg, #0a8cf5, #5742f5 55%, #cc38ef); }
.eyebrow .f-new { margin: 0 6px 0 0; }
.feature { transition: transform .4s cubic-bezier(.22, 1, .36, 1), box-shadow .4s; }
.feature:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -24px rgb(28 59 110 / 30%); }
.feature .f-ic { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); } .feature:hover .f-ic { transform: rotate(-8deg) scale(1.1); }

/* Link in Bio */
.lib-section { overflow: hidden; background: linear-gradient(180deg, #fff, #f6f3ff); }
.lib { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.lib-copy .checks b { color: var(--sr-text); }
.lib-phones { position: relative; height: 600px; }
.lib-ph { position: absolute; top: 50%; left: 50%; width: 250px; aspect-ratio: 9 / 19; margin: -265px 0 0 -125px; border-radius: 40px; padding: 9px; background: #11141c; box-shadow: 0 50px 90px -30px rgb(40 20 90 / 55%), inset 0 0 0 1.5px #39404f; overflow: hidden; transition: transform .8s cubic-bezier(.22, 1, .36, 1); }
.lib-ph img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 32px; display: block; }
.lib-ph .hv-isl { top: 18px; width: 70px; margin-left: -35px; height: 20px; }
.lib-ph.p1 { transform: translateX(-62%) rotate(-10deg) scale(.88); z-index: 1; }
.lib-ph.p3 { transform: translateX(62%) rotate(10deg) scale(.88); z-index: 1; }
.lib-ph.p2 { z-index: 2; animation: hm-float 6s ease-in-out infinite; }
.lib-phones:hover .p1 { transform: translateX(-78%) rotate(-14deg) scale(.9); } .lib-phones:hover .p3 { transform: translateX(78%) rotate(14deg) scale(.9); }
.lib-phones.rv:not(.in) .p1, .lib-phones.rv:not(.in) .p3 { transform: translateX(0) rotate(0) scale(.8); }

@media (max-width: 1100px) {
  .tour { grid-template-columns: 1fr; } .tour-tabs { grid-template-columns: repeat(3, 1fr); } .tour-tab small { display: none; }
  .hv-browser { width: 100%; }
}
@media (max-width: 900px) {
  .lib { grid-template-columns: 1fr; } .lib-phones { height: 520px; }
  .stats-band { grid-template-columns: repeat(2, 1fr); }
  .hv-app { min-height: 0; margin-top: 30px; } .hv-phone { width: 130px; right: -2%; bottom: -24px; } .hv-app .float-team { display: none; }
}
@media (max-width: 560px) { .tour-tabs { grid-template-columns: repeat(2, 1fr); } .tour-tab { padding: 12px; } .tour-tab b { font-size: 14.5px; } .lib-ph { width: 200px; margin: -212px 0 0 -100px; } .lib-phones { height: 460px; } .vid-play span { width: 76px; height: 76px; } }
@media (prefers-reduced-motion: reduce) { .hero::before, .hv-glow, .hv-phone, .vid-bg i, .lib-ph, .hv-browser::after { animation: none !important; } }
/* Funktionsseiten: echte Screens & Telefone */
.shot-frame { perspective: 1600px; padding: 10px; }
.shot-frame .hv-browser { width: 100%; transform: rotateY(-8deg) rotateX(4deg); }
.shot-frame:hover .hv-browser { transform: rotateY(-2deg) rotateX(1deg); }
.split-left .shot-frame .hv-browser { transform: rotateY(8deg) rotateX(4deg); }
.lib-phones-sm { height: 520px; }
.lib-phones-sm .lib-ph { width: 220px; margin: -232px 0 0 -110px; }
/* Hero: Emotion – Person mit Reaktionen */
.hv-person { position: absolute; left: -9%; bottom: -70px; width: 250px; aspect-ratio: 1; z-index: 3; animation: hm-float 7s ease-in-out .3s infinite; }
.hv-person > img { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; border: 6px solid #fff; box-shadow: 0 40px 80px -24px rgb(40 30 110 / 50%); transform: rotate(-4deg); }
.hv-person::before { content: ''; position: absolute; inset: -14px; border-radius: 44px; background: linear-gradient(135deg, #00b4ee, #5742f5 55%, #cc38ef); transform: rotate(-4deg); z-index: -1; opacity: .9; filter: blur(.5px); }
.hv-like { position: absolute; right: -40px; bottom: 120px; display: flex; align-items: center; gap: 8px; padding: 10px 16px 10px 10px; border-radius: 99px; background: #fff; box-shadow: 0 18px 40px -14px rgb(28 40 110 / 45%); font-family: var(--sr-font); animation: hm-pop 1s cubic-bezier(.34, 1.56, .64, 1) 1.2s both; }
.hv-like i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #ffe4ec; font-style: normal; font-size: 17px; animation: hm-beat 1.4s ease-in-out 2s infinite; }
.hv-like b { font-size: 18px; color: #10143a; } .hv-like small { color: #707891; font-size: 13px; font-weight: 600; }
@keyframes hm-pop { from { opacity: 0; transform: scale(.4) translateY(20px); } }
@keyframes hm-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.25); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
.hv-react { position: absolute; font-size: 26px; opacity: 0; animation: hm-up 4.5s ease-out infinite; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 18%)); pointer-events: none; }
.hv-react.r1 { left: 70%; bottom: 60%; animation-delay: .4s; } .hv-react.r2 { left: 18%; bottom: 80%; animation-delay: 1.3s; } .hv-react.r3 { left: 85%; bottom: 35%; animation-delay: 2.2s; font-size: 30px; } .hv-react.r4 { left: 45%; bottom: 92%; animation-delay: 3s; } .hv-react.r5 { left: 5%; bottom: 50%; animation-delay: 3.8s; font-size: 22px; }
@keyframes hm-up { 0% { opacity: 0; transform: translateY(20px) scale(.6) rotate(-10deg); } 15% { opacity: 1; transform: translateY(0) scale(1.1) rotate(0); } 70% { opacity: .9; } 100% { opacity: 0; transform: translateY(-120px) scale(.9) rotate(12deg); } }
.hv-app .float-sched { left: 14%; top: auto; bottom: -96px; }
@media (max-width: 900px) { .hv-person { width: 150px; left: -2%; bottom: -40px; } .hv-like { right: -20px; padding: 6px 12px 6px 6px; } .hv-like i { width: 26px; height: 26px; } .hv-app .float-sched { display: none; } .hv-react { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .hv-person, .hv-react, .hv-like i { animation: none !important; } .hv-react { display: none; } }
.hero { position: relative; }
.hm-trail { position: absolute; z-index: 30; pointer-events: none; line-height: 1; transform: translate(-50%, -50%); animation: hm-trail 1.3s cubic-bezier(.22, 1, .36, 1) forwards; will-change: transform, opacity; filter: drop-shadow(0 4px 8px rgb(200 40 120 / 25%)); }
@keyframes hm-trail { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 15% { opacity: 1; transform: translate(-50%, -60%) scale(1.15); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), -260%) scale(.8) rotate(var(--rot)); } }

/* Hero-Szene (Foto rechts) */
.hero:has(.hv-scene) .hero-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.hv-scene { position: relative; min-height: 520px; }
.hvs-photo { position: absolute; inset: -40px -12vw -120px -60px; z-index: 1; }
.hvs-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; display: block; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%, #000 100%), linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 22%), linear-gradient(180deg, transparent 0, #000 12%, #000 84%, transparent 100%); mask-composite: intersect; animation: hvs-in 1.1s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes hvs-in { from { opacity: 0; transform: scale(1.04); } }
.hv-scene .hv-like { position: absolute; z-index: 4; right: auto; left: 8%; bottom: auto; top: 12%; }
.hv-scene .hv-react { z-index: 4; bottom: auto; }
.hv-scene .r1 { left: 46%; top: 62%; } .hv-scene .r2 { left: 60%; top: 4%; } .hv-scene .r3 { left: 82%; top: 20%; } .hv-scene .r4 { left: 30%; top: 8%; } .hv-scene .r5 { left: 72%; top: 46%; }
.hv-scene .float-card { z-index: 5; }
.hv-scene .float-sched { left: -4%; right: auto; top: auto; bottom: 4%; }
.hv-scene .float-team { left: auto; right: -2%; top: -6%; bottom: auto; }
.hero:has(.hv-scene) .hero-copy { position: relative; z-index: 6; }
@media (max-width: 900px) {
  .hero:has(.hv-scene) .hero-grid { grid-template-columns: 1fr; }
  .hv-scene { min-height: 340px; margin: 10px -16px 0; }
  .hvs-photo { inset: 0; }
  .hvs-photo img { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent); mask-image: linear-gradient(180deg, transparent 0, #000 16%, #000 86%, transparent); }
  .hv-scene .float-team { right: 12px; top: 8px; } .hv-scene .float-sched { left: 12px; bottom: 6px; } .hv-scene .hv-like { left: 12px; top: 22%; }
}

/* KI-Fotoverbesserung */
.aif-section { position: relative; overflow: hidden; background: radial-gradient(120% 90% at 0% 0%, #1b1f5e 0%, #10143a 55%, #0b0e2b 100%); color: #e9ecff; }
.aif-section .lead, .aif-section .hint { color: #b8bfe6; }
.aif-section h2 { color: #fff; }
.aif-section .eyebrow-plain { color: #c9c2ff; }
.aif-glow i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; pointer-events: none; }
.aif-glow i:nth-child(1) { width: 520px; height: 520px; left: -120px; top: 10%; background: #3b5bff; animation: aif-drift 14s ease-in-out infinite alternate; }
.aif-glow i:nth-child(2) { width: 460px; height: 460px; right: -80px; bottom: -120px; background: #c13cf0; animation: aif-drift 18s ease-in-out -6s infinite alternate; }
@keyframes aif-drift { to { transform: translate(60px, -40px) scale(1.1); } }
.aif { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.aif-visual { position: relative; height: 600px; display: grid; place-items: center; }
.aif-card { position: relative; width: min(420px, 82%); aspect-ratio: 580 / 700; border-radius: 28px; overflow: hidden; box-shadow: 0 40px 90px -30px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 10%); transform: rotate(-2deg); }
.aif-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.aif-a { clip-path: inset(0 0 0 50%); animation: aif-wipe 6s cubic-bezier(.65, 0, .35, 1) infinite; }
.aif-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1.5px; background: #fff; box-shadow: 0 0 18px rgb(255 255 255 / 80%); animation: aif-line 6s cubic-bezier(.65, 0, .35, 1) infinite; }
.aif-line span { position: absolute; top: 50%; left: 50%; width: 42px; height: 42px; margin: -21px; border-radius: 50%; background: #fff; color: #5742f5; display: grid; place-items: center; font-weight: 800; box-shadow: 0 10px 24px -8px rgb(0 0 0 / 50%); }
@keyframes aif-wipe { 0%, 8% { clip-path: inset(0 0 0 88%); } 45%, 55% { clip-path: inset(0 0 0 12%); } 92%, 100% { clip-path: inset(0 0 0 88%); } }
@keyframes aif-line { 0%, 8% { left: 88%; } 45%, 55% { left: 12%; } 92%, 100% { left: 88%; } }
.aif-tag { position: absolute; top: 14px; padding: 5px 11px; border-radius: 99px; background: rgb(10 14 40 / 60%); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); }
.aif-tag.l { left: 14px; } .aif-tag.r { right: 14px; }
.aif-scan { position: absolute; left: 0; right: 0; height: 30%; top: -30%; background: linear-gradient(180deg, transparent, rgb(140 120 255 / 28%), transparent); animation: aif-scan 6s linear infinite; mix-blend-mode: screen; }
@keyframes aif-scan { 0%, 40% { top: -30%; } 70%, 100% { top: 110%; } }
.aif-chip { position: absolute; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 10px; border-radius: 99px; background: #fff; color: #10143a; font-weight: 700; font-size: 14px; box-shadow: 0 20px 40px -18px rgb(0 0 0 / 60%); animation: hm-float 6s ease-in-out infinite; }
.aif-chip span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f1efff; }
.aif-chip.c1 { left: 0; top: 34%; }
.aif-chip.c2 { right: 2%; top: 6%; animation-delay: -3s; }
.aif-chat { position: absolute; right: 0; bottom: 8%; display: grid; gap: 8px; justify-items: end; width: 270px; }
.aif-msg { padding: 10px 14px; border-radius: 16px; font-size: 14px; font-weight: 600; box-shadow: 0 18px 36px -18px rgb(0 0 0 / 60%); }
.aif-msg.me { background: linear-gradient(135deg, #2b7bff, #5742f5); color: #fff; border-bottom-right-radius: 4px; display: inline-flex; align-items: center; min-height: 20px; }
.aif-msg.bot { background: #fff; color: #10143a; border-bottom-left-radius: 4px; justify-self: start; display: inline-flex; gap: 8px; align-items: center; animation: aif-pop 6s ease infinite; }
.aif-caret { width: 2px; height: 16px; background: #fff; margin-left: 2px; animation: aif-blink 1s steps(1) infinite; }
@keyframes aif-blink { 50% { opacity: 0; } }
@keyframes aif-pop { 0%, 40% { opacity: 0; transform: translateY(10px) scale(.9); } 50%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.aif-spark { position: absolute; color: #c9b8ff; font-size: 22px; text-shadow: 0 0 14px #9d7bff; animation: aif-tw 3s ease-in-out infinite; }
.aif-spark.s1 { left: 12%; bottom: 18%; } .aif-spark.s2 { right: 18%; top: 30%; animation-delay: -1s; font-size: 16px; } .aif-spark.s3 { left: 46%; top: 2%; animation-delay: -2s; }
@keyframes aif-tw { 0%, 100% { opacity: .2; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.2) rotate(45deg); } }
.aif-steps { display: grid; gap: 12px; margin: 22px 0 14px; }
.aif-steps > div { display: grid; grid-template-columns: 46px 1fr; column-gap: 14px; align-items: center; padding: 14px; border-radius: 18px; background: rgb(255 255 255 / 6%); border: 1px solid rgb(255 255 255 / 10%); transition: background .2s, transform .2s; }
.aif-steps > div:hover { background: rgb(255 255 255 / 10%); transform: translateX(4px); }
.aif-steps b { color: #fff; } .aif-steps small { grid-column: 2; color: #aab2dc; font-size: 13.5px; }
.aif-ic { grid-row: span 2; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; }
.aif-ic.i1 { background: linear-gradient(135deg, #1f6bff55, #00b4ee44); } .aif-ic.i2 { background: linear-gradient(135deg, #ffb35555, #ff5fa244); } .aif-ic.i3 { background: linear-gradient(135deg, #8a6bff55, #cc38ef44); }
.aif-note { margin-bottom: 18px; }
@media (max-width: 960px) { .aif { grid-template-columns: 1fr; gap: 24px; } .aif-visual { height: 520px; order: 2; } .aif-chat { width: 230px; } }
@media (prefers-reduced-motion: reduce) { .aif-a { clip-path: inset(0 0 0 50%); } .aif-line { left: 50%; } }
.aif-light { height: 540px; width: 100%; }
.aif-light .aif-spark { color: #8b6bff; text-shadow: none; }
.aif-light .aif-chip, .aif-light .aif-msg.bot { box-shadow: 0 18px 40px -18px rgb(28 40 110 / 45%), 0 0 0 1px rgb(16 20 58 / 5%); }
.aif-light .aif-card { box-shadow: 0 40px 80px -30px rgb(28 40 110 / 45%); }

/* KI-Foto-Szene: Sneaker → Produktfoto auf Podest */
.aifs .aifs-card { position: relative; width: min(430px, 86%); aspect-ratio: 4 / 5; border-radius: 30px; overflow: hidden; clip-path: inset(0 round 30px); will-change: transform; box-shadow: 0 40px 90px -30px rgb(0 0 0 / 70%), 0 0 0 1px rgb(255 255 255 / 10%); isolation: isolate; }
.aifs-bg { position: absolute; inset: 0; transition: opacity .9s ease; }
.aifs-bg i { position: absolute; display: block; }
.aifs-bg.b .wall { inset: 0 0 34% 0; background: linear-gradient(180deg, #b9b2a6, #a49c8f); }
.aifs-bg.b .wall::after { content: ""; position: absolute; right: 12%; top: 14%; width: 26%; height: 34%; border-radius: 4px; background: linear-gradient(160deg, #cfc8bb, #bdb5a8); box-shadow: inset 0 0 0 6px #988f82; opacity: .7; filter: blur(1.5px); }
.aifs-bg.b .floor { left: 0; right: 0; bottom: 0; height: 34%; background: repeating-linear-gradient(90deg, #8a6f57 0 22%, #7d634c 22% 23%, #92765d 23% 46%, #7d634c 46% 47%), #8a6f57; box-shadow: inset 0 14px 18px -10px rgb(0 0 0 / 45%); }
.aifs-bg.b .box { left: 6%; bottom: 26%; width: 22%; height: 16%; background: linear-gradient(170deg, #b48d62, #9a744c); border-radius: 3px; filter: blur(2px); opacity: .8; transform: rotate(-4deg); }
.aifs-bg.b::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 90% at 40% 40%, transparent 40%, rgb(30 20 10 / 45%)); }
.aifs-bg.a { opacity: 0; background: radial-gradient(90% 70% at 50% 30%, #fff6ee 0%, #ffe3d4 40%, #f1d4ff 100%); }
.aifs-bg.a .halo { left: 50%; top: 18%; width: 78%; aspect-ratio: 1; transform: translateX(-50%) scale(.6); border-radius: 50%; background: radial-gradient(circle, rgb(255 255 255 / 95%), rgb(255 255 255 / 0) 65%); transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.aifs-ped { position: absolute; left: 50%; bottom: -40%; width: 62%; height: 24%; transform: translateX(-50%); border-radius: 0 0 14px 14px; background: linear-gradient(90deg, #ddd2ea 0%, #fbf9fe 42%, #ffffff 52%, #e4dbef 100%); box-shadow: 0 30px 50px -20px rgb(90 60 140 / 45%); transition: bottom 1s cubic-bezier(.2, .9, .25, 1.15) .15s; }
.aifs-ped i { position: absolute; left: 0; right: 0; top: -14%; height: 28%; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #ffffff, #efe8f6 70%, #e2d8ee); box-shadow: inset 0 -3px 6px rgb(120 90 170 / 18%); }
.aifs-shoe { position: absolute; left: 50%; bottom: 15%; width: 72%; height: auto; transform: translateX(-50%) rotate(-9deg); transform-origin: 50% 80%; filter: brightness(.78) contrast(.82) sepia(.25) blur(.7px) drop-shadow(0 8px 5px rgb(0 0 0 / 45%)); transition: transform 1.1s cubic-bezier(.2, .9, .25, 1.1) .25s, bottom 1.1s cubic-bezier(.2, .9, .25, 1.1) .25s, filter .9s ease .3s, width 1.1s ease .25s; z-index: 2; }
.aifs-shadow { position: absolute; left: 50%; bottom: 32%; width: 52%; height: 5%; transform: translateX(-50%) scale(.4); border-radius: 50%; background: radial-gradient(ellipse, rgb(70 40 110 / 38%), transparent 70%); opacity: 0; transition: opacity .6s ease .9s, transform .8s ease .9s; z-index: 1; }
.aifs-scan { position: absolute; left: 0; right: 0; height: 34%; top: -34%; background: linear-gradient(180deg, transparent, rgb(150 120 255 / 40%), transparent); opacity: 0; z-index: 3; }
.aifs-tag { position: absolute; top: 14px; left: 14px; padding: 5px 11px; border-radius: 99px; background: rgb(10 14 40 / 62%); color: #fff; font-size: 12px; font-weight: 700; backdrop-filter: blur(6px); z-index: 4; transition: opacity .4s; }
.aifs-tag.ta { opacity: 0; background: linear-gradient(135deg, #2b7bff, #8b3cf7); }
.aifs-sp { position: absolute; z-index: 4; color: #9b6bff; font-size: 20px; text-shadow: 0 0 10px #fff, 0 0 18px #c9a8ff; opacity: 0; transform: scale(.3); transition: opacity .4s ease 1.2s, transform .6s cubic-bezier(.2, .9, .3, 1.6) 1.2s; }
.aifs-sp.p1 { left: 18%; top: 30%; } .aifs-sp.p2 { right: 16%; top: 22%; font-size: 26px; transition-delay: 1.35s; } .aifs-sp.p3 { right: 26%; bottom: 44%; font-size: 14px; transition-delay: 1.5s; }
.aifs-chat { position: absolute; right: -2%; bottom: -1%; display: grid; gap: 8px; justify-items: end; width: 300px; z-index: 5; }
.aifs-chat .aif-msg.me { max-width: 280px; line-height: 1.35; opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; }
.aifs-chat .aif-msg.bot { animation: none; opacity: 0; transform: translateY(10px) scale(.95); transition: opacity .3s, transform .3s; }
.aifs-chat .aif-msg.bot .d { display: none; }
.aifs .aif-chip { opacity: 0; transition: opacity .5s; }
/* Ablauf */
.aifs[data-st="1"] .aif-msg.me, .aifs[data-st="2"] .aif-msg.me, .aifs[data-st="3"] .aif-msg.me { opacity: 1; transform: none; }
.aifs[data-st="2"] .aif-msg.bot, .aifs[data-st="3"] .aif-msg.bot { opacity: 1; transform: none; }
.aifs[data-st="2"] .aifs-scan { opacity: 1; animation: aifs-scan 1.4s linear infinite; }
@keyframes aifs-scan { from { top: -34%; } to { top: 110%; } }
.aifs[data-st="2"] .aifs-shoe { filter: brightness(.88) contrast(.9) sepia(.12) blur(.3px) drop-shadow(0 8px 5px rgb(0 0 0 / 35%)); }
.aifs[data-st="3"] .aif-msg.bot .w { display: none; } .aifs[data-st="3"] .aif-msg.bot .d { display: inline; }
.aifs[data-st="3"] .aif-caret { display: none; }
.aifs[data-st="3"] .aifs-bg.b { opacity: 0; }
.aifs[data-st="3"] .aifs-bg.a { opacity: 1; }
.aifs[data-st="3"] .aifs-bg.a .halo { transform: translateX(-50%) scale(1); }
.aifs[data-st="3"] .aifs-ped { bottom: 10%; }
.aifs[data-st="3"] .aifs-shoe { bottom: 33%; width: 70%; transform: translateX(-50%) rotate(-3deg); filter: brightness(1.15) contrast(1.12) drop-shadow(0 18px 16px rgb(60 30 110 / 35%)); }
.aifs[data-st="3"] .aifs-shadow { opacity: 1; transform: translateX(-50%) scale(1); }
.aifs[data-st="3"] .aifs-tag.tb { opacity: 0; } .aifs[data-st="3"] .aifs-tag.ta { opacity: 1; }
.aifs[data-st="3"] .aifs-sp { opacity: 1; transform: scale(1); animation: aif-tw 2.4s ease-in-out 1.8s infinite; }
.aifs[data-st="3"] .aif-chip.c2 { opacity: 1; }
.aifs[data-st="0"] .aif-chip.c1 { opacity: 1; }
.aifs-card { animation: aifs-float 7s ease-in-out infinite; }
@keyframes aifs-float { 50% { transform: translateY(-8px) rotate(.4deg); } }
@media (max-width: 960px) { .aifs-chat { width: 250px; } .aifs-chat .aif-msg.me { max-width: 240px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .aifs-card { animation: none; } .aifs * { transition: none !important; } }

/* Ergebnis als echtes KI-Foto */
.aifs .aifs-card { aspect-ratio: 1 / 1; width: min(460px, 90%); }
.aifs-after { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); filter: blur(8px) brightness(1.3); transition: opacity 1s ease .2s, transform 2.2s cubic-bezier(.2, .8, .2, 1) .2s, filter 1.2s ease .2s; z-index: 1; }
.aifs .aifs-shoe { width: 82%; bottom: 20%; }
.aifs[data-st="3"] .aifs-after { opacity: 1; transform: none; filter: none; }
.aifs[data-st="3"] .aifs-shoe { opacity: 0; bottom: 28%; width: 86%; transform: translateX(-50%) rotate(0deg); filter: brightness(1.2) blur(4px); transition: opacity .7s ease .25s, transform .9s ease, bottom .9s ease, width .9s ease, filter .7s ease; }
.aifs[data-st="3"] .aifs-bg.a { opacity: 0; }
.aifs-ped, .aifs-shadow { display: none; }
.aifs .aifs-sp { color: #ffd98a; text-shadow: 0 0 12px rgb(255 200 120 / 90%); }

.aifs-before { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transition: opacity .9s ease .2s, filter .9s ease, transform 1.2s ease; }
.aifs-bg.b { display: none; }
.aifs[data-st="2"] .aifs-before { filter: brightness(1.04) saturate(.9); }
.aifs[data-st="3"] .aifs-before { opacity: 0; transform: scale(1.04); filter: blur(6px); }
.aifs[data-st="3"] .aifs-after { z-index: 2; }