/* 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%; }
}