/* Social-Media-Seite (/social-media) – baut auf web.css auf. Hell, bunt, handylastig. */

.sm-mesh i:nth-child(1) { background: rgba(244, 166, 184, .6); }
.sm-mesh i:nth-child(2) { background: rgba(244, 184, 96, .55); }
.sm-mesh i:nth-child(3) { background: rgba(201, 182, 242, .55); }
.sm-mesh i:nth-child(4) { background: rgba(143, 211, 207, .4); }
.sm-hero { padding-bottom: 0; }

/* „sieht.“ mit gezeichneter Linie, Herzen und Benachrichtigung */
.sm-mark { position: relative; display: inline-block; color: var(--terra); }
.sm-mark__u { position: absolute; left: 0; bottom: -.1em; width: 100%; height: .22em; overflow: visible; }
.sm-mark__u path { fill: none; stroke: #F4B860; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 220; animation: wb-draw .9s .7s var(--ease) forwards; }
.sm-burst { position: absolute; right: -.2em; top: .1em; width: .5em; height: .5em; pointer-events: none; }
.sm-h { position: absolute; left: 0; top: 0; width: .32em; height: .32em; fill: #E5484D; opacity: 0; animation: sm-float 3.6s ease-out infinite; }
.sm-h:nth-child(2) { animation-delay: .5s; width: .24em; height: .24em; --dx: -.5em; }
.sm-h:nth-child(3) { animation-delay: 1.1s; width: .28em; height: .28em; --dx: .4em; }
.sm-h:nth-child(4) { animation-delay: 1.8s; width: .2em; height: .2em; --dx: -.2em; fill: #F4B860; }
.sm-h:nth-child(5) { animation-delay: 2.4s; width: .26em; height: .26em; --dx: .2em; }
@keyframes sm-float { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 15% { opacity: 1; transform: translate(0, -.1em) scale(1); } 100% { opacity: 0; transform: translate(var(--dx, 0), -1.4em) scale(.8) rotate(12deg); } }
.sm-notif { position: absolute; left: 92%; top: -.42em; display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: 99px; background: #fff; box-shadow: 0 16px 34px -16px rgba(60, 28, 12, .45); white-space: nowrap; animation: wb-pop .45s 1.4s var(--spring) both, wb-hover 4.5s 2s ease-in-out infinite; }
.sm-notif i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #E2A23B, #B4582F); }
.sm-notif svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sm-notif b::after { content: attr(data-label); font: 700 14px/1 var(--f-body); letter-spacing: 0; color: var(--ink2); }
@media (max-width: 760px) { .sm-notif { display: none; } }

/* Drei Handys mit Reels */
.sm-stage { position: relative; height: clamp(440px, 46vw, 640px); max-width: 1100px; margin: clamp(30px, 5vw, 60px) auto 0; --pw: clamp(180px, 19vw, 250px); }
.sm-phone { position: relative; width: var(--pw, 240px); aspect-ratio: 9 / 19.5; padding: 7px; border-radius: 40px; background: #111412; box-shadow: 0 50px 90px -40px rgba(60, 28, 12, .6), inset 0 0 0 1.5px rgba(255, 255, 255, .1); }
.sm-phone::before { content: ''; position: absolute; left: 50%; top: 16px; z-index: 3; width: 28%; height: 20px; translate: -50% 0; border-radius: 20px; background: #000; }
.sm-phone__scr { position: relative; height: 100%; overflow: hidden; border-radius: 33px; background: #1A1F1C; }
.sm-phone__v { width: 100%; height: 100%; object-fit: cover; display: block; }
.sm-phone__ui { position: absolute; inset: 0; background: linear-gradient(transparent 62%, rgba(0, 0, 0, .55)); }
.sm-phone__side { position: absolute; right: 12px; bottom: 70px; display: grid; gap: 16px; }
.sm-phone__side svg { width: 24px; height: 24px; fill: none; stroke: #fff; stroke-width: 2; }
.sm-phone__side svg:first-child { fill: #fff; }
.sm-phone__cap { position: absolute; left: 14px; bottom: 18px; right: 50px; color: #fff; font-size: 14px; }
.sm-stage .sm-phone { position: absolute; top: 0; left: 50%; }
.sm-phone--c { z-index: 3; translate: -50% 0; }
.sm-phone--l { z-index: 2; --pw: calc(clamp(180px, 19vw, 250px) * .86); translate: calc(-50% - clamp(150px, 17vw, 230px)) 9%; rotate: -8deg; }
.sm-phone--r { z-index: 2; --pw: calc(clamp(180px, 19vw, 250px) * .86); translate: calc(-50% + clamp(150px, 17vw, 230px)) 9%; rotate: 8deg; }
.sm-stage .sm-phone { animation: sm-rise 1.2s var(--ease) both; }
.sm-phone--l { animation-delay: .25s !important; } .sm-phone--r { animation-delay: .4s !important; }
@keyframes sm-rise { from { opacity: 0; transform: translateY(120px); } }
.sm-pill { position: absolute; z-index: 4; display: flex; align-items: center; gap: 10px; padding: 9px 18px 9px 9px; border-radius: 99px; background: #fff; color: var(--ink2); font: 700 15px/1 var(--f-body); white-space: nowrap; box-shadow: 0 20px 40px -20px rgba(60, 28, 12, .5); animation: wb-pop .5s var(--spring) both, wb-hover 5s ease-in-out infinite; }
.sm-pill i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.sm-pill svg { width: 16px; height: 16px; fill: #fff; }
.sm-pill--1 { left: 8%; top: 22%; animation-delay: 1.2s, 1.7s; }
.sm-pill--2 { right: 6%; top: 36%; animation-delay: 1.5s, 2.1s; }
.sm-pill--3 { left: 12%; top: 64%; animation-delay: 1.8s, 2.5s; }
@media (max-width: 760px) {
  .sm-stage { --pw: 170px; height: 420px; }
  .sm-phone--l, .sm-phone--r { --pw: 140px; }
  .sm-phone--l { translate: calc(-50% - 105px) 12%; } .sm-phone--r { translate: calc(-50% + 105px) 12%; }
  .sm-pill { font-size: 13px; } .sm-pill--1 { left: 0; top: 4%; } .sm-pill--2 { right: 0; top: 70%; } .sm-pill--3 { display: none; }
}

/* Bento: Chat, Redaktionsplan, Plattformen */
.sm-bento-sec { position: relative; z-index: 2; margin-top: clamp(30px, 4vw, 60px); padding-bottom: clamp(60px, 7vw, 100px); }
.sm-bento { margin-top: 0; }
.sm-chat { display: flex; flex-direction: column; gap: 8px; width: 100%; max-width: 300px; margin-top: 26px; }
.sm-msg { max-width: 85%; padding: 10px 14px; border-radius: 18px; font-size: 14px; line-height: 1.35; text-align: left; opacity: 0; transform: translateY(14px) scale(.96); transition: opacity .5s var(--ease), transform .6s var(--spring); transition-delay: calc(.4s + var(--i) * .6s); }
.sm-msg--du { align-self: flex-start; border-bottom-left-radius: 4px; background: rgba(251, 246, 238, .14); color: var(--cream); }
.sm-msg--wir { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--terra); color: #fff; }
.sm-chat-box.is-in .sm-msg { opacity: 1; transform: none; }
.sm-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; width: 100%; max-width: 270px; margin: 24px 0 18px; }
.sm-cal b { font: 700 11px/1 var(--f-body); color: var(--muted); }
.sm-cal span { aspect-ratio: 1; border-radius: 7px; background: #F1ECE4; transition: background .4s, transform .5s var(--spring); transition-delay: calc(.3s + var(--i) * .04s); }
.wb-box.is-in .sm-cal .is-p1 { background: var(--terra); } .wb-box.is-in .sm-cal .is-p2 { background: #F4B860; } .wb-box.is-in .sm-cal .is-p3 { background: #2FA7A3; }
.wb-box.is-in .sm-cal span[class^="is-p"] { transform: scale(1.06); }
.sm-plat-box:not(.is-in) .wb-pills span { opacity: 0; }
.sm-plat-box.is-in .wb-pills span { animation: wb-fall 1.1s cubic-bezier(.3, .7, .4, 1) both; animation-delay: calc(.3s + var(--i) * .12s); }

/* Reel-Leiste */
.sm-reels { padding: clamp(60px, 7vw, 100px) 0 clamp(70px, 8vw, 110px); overflow: hidden; }
.sm-reels__head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.sm-reels__strip { --side: max(20px, (100vw - var(--wrap)) / 2); display: flex; gap: 22px; overflow-x: auto; padding: 10px var(--side) 30px; scroll-snap-type: x mandatory; scroll-padding-inline: var(--side); scrollbar-width: none; }
.sm-reels__strip::-webkit-scrollbar { display: none; }
.sm-reel { flex: none; margin: 0; scroll-snap-align: start; --pw: clamp(200px, 20vw, 250px); }
.sm-reel:nth-child(even) { margin-top: 40px; }
.sm-reel figcaption { margin-top: 16px; font-size: 14px; color: var(--muted); }
.sm-reel figcaption b { display: block; font: 700 18px/1.3 var(--f-display); color: var(--ink2); }

.page-social .wb-svc { background: #fff; }

@media (prefers-reduced-motion: reduce) {
  .sm-h, .sm-notif, .sm-pill, .sm-stage .sm-phone { animation: none !important; }
  .sm-h { display: none; }
  .sm-mark__u path { stroke-dashoffset: 0; animation: none; }
  .sm-msg { opacity: 1; transform: none; }
  .sm-plat-box .wb-pills span { opacity: 1 !important; animation: none !important; }
}