/* Social-Bereich „FOLG DEM ARCHIV.“ in Bewegung (06.10.2026). Gehört zu social-motion.js, wird nach extras.css geladen.
   Alles hängt an .sm-ready (setzt das Skript): ohne Skript bleibt der ruhige Stand aus extras.css Abschnitt 2.
   Zustände an .social-strip: sm-armed (Auftritt steht bevor) → sm-copy-in / sm-phone-in (Auftritt läuft) → sm-copy-done /
   sm-phone-done (Auftritt vorbei, keine Masken mehr) · sm-on (Handy an, Story läuft) · sm-live (im Bild, Dauer-Animationen laufen). */

@property --sm-spray { syntax: "<percentage>"; inherits: true; initial-value: 135%; }
@property --sm-drip { syntax: "<percentage>"; inherits: true; initial-value: 135%; }
@property --sm-turn { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* ---------- Heller Modus: der Block bleibt ein dunkles Ding wie Fernseher und Handy. Vorher standen dunkle Buchstaben auf der dunklen Textur. ---------- */
:root[data-theme="light"] .social-strip {
  --black: #0b0b0b;
  --paper: #ecebe6;
  --muted: #9c9b96;
  --line: rgba(236, 235, 230, .2);
  color: var(--paper);
  box-shadow: 0 34px 70px -38px rgba(0, 0, 0, .55);
}
:root[data-theme="light"] .social-strip ::selection { color: #0b0b0b; background: #ecebe6; }
/* styles.css dreht das Logo im hellen Modus auf Schwarz; hier steht es auf Dunkel und bleibt hell. */
:root[data-theme="light"] .gallery-section .social-strip img[src*="27-archive-logo"] { filter: none; }

/* ---------- Grundgerüst: Text · Live-Spalte · Handy. Bis 1299 px steht die Live-Spalte unter dem Text, am Handy unter dem Telefon. ---------- */
.social-strip.sm-ready { --sm-gap: clamp(30px, 7vw, 110px); position: relative; isolation: isolate; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); grid-template-rows: auto auto; grid-template-areas: "copy phone" "feed phone"; row-gap: clamp(26px, 3vw, 40px); }
.sm-ready .social-copy { position: relative; z-index: 1; grid-area: copy; align-self: end; }
.sm-ready .social-phone { z-index: 1; grid-area: phone; }
@media (min-width: 1300px) {
  .social-strip.sm-ready { --sm-gap: clamp(26px, 3vw, 48px); grid-template-columns: minmax(0, 1fr) 250px minmax(260px, 300px); grid-template-rows: auto; grid-template-areas: "copy feed phone"; column-gap: var(--sm-gap); }
  .sm-ready .social-copy { align-self: center; }
}
@media (max-width: 860px) {
  .social-strip.sm-ready { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "phone" "feed"; }
}
/* Laptop (06.10.2026, Michas „Bereich soll auf eine Laptopgröße passen“): der ganze Block passt unter der Kopfleiste (88 px) ins
   Fenster. Das Handy nimmt seine Höhe aus dem Platz (höchstens so groß wie vorher, 593 px), die Überschrift richtet sich auch nach
   der Fensterhöhe, auf niedrigen Schirmen zeigt die Live-Spalte zwei statt drei Mitteilungen, wenn sie unter dem Text steht. */
@media (min-width: 861px) {
  .social-strip { --sm-pad: clamp(22px, 3.2vh, 54px); --sm-room: calc(100vh - 88px - 28px); padding-top: var(--sm-pad); padding-bottom: var(--sm-pad); }
  @supports (height: 100svh) {
    .social-strip { --sm-pad: clamp(22px, 3.2svh, 54px); --sm-room: calc(100svh - 88px - 28px); }
  }
  .social-phone { width: auto; height: clamp(420px, calc(var(--sm-room) - 2 * var(--sm-pad)), 593px); }
  .social-title { font-size: clamp(46px, min(6.2vw, 11.5vh), 96px); }
  .social-strip.sm-ready { row-gap: clamp(18px, min(3vw, 3.4vh), 40px); }
}
@media (min-width: 861px) and (max-width: 1299px) and (max-height: 900px) {
  .social-strip .sm-feed { --sm-feed-max: 2; }
}

/* Hintergrund liegt absolut im Block. Vorher war er ein normales Rasterelement und legte unter allem eine leere Zeile samt Abstand an. */
.sm-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
/* Fester, ruhiger Rand (kein Licht, folgt nichts): die Textur wird zu den Kanten hin etwas dunkler. Darüber fällt der Schnee. */
.sm-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 85% at 62% 48%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .42) 100%); }
.sm-snow { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; }

/* Halbton-Sendung (ersetzt die Funkringe): social-motion.js malt das Bild aus dem Handy als Punktraster um das Handy. */
.sm-dots { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Sucher: vier Ecken und Timecode wie im Kamerabild. */
.sm-finder { position: absolute; z-index: 2; inset: clamp(8px, 1.2vw, 14px); pointer-events: none; }
.sm-corner { position: absolute; width: 18px; height: 18px; border: 0 solid rgba(236, 235, 230, .55); }
.sm-tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; --cx: -14px; --cy: -14px; }
.sm-tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; --cx: 14px; --cy: -14px; }
.sm-bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; --cx: -14px; --cy: 14px; }
.sm-br { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; --cx: 14px; --cy: 14px; }
.sm-tc { position: absolute; bottom: 4px; left: 28px; color: rgba(236, 235, 230, .42); font: 9px/1 var(--mono); letter-spacing: .16em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* REC-Punkt hinter „27 ARCHIVE / ONLINE“ */
.sm-rec { display: inline-block; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #ff3b30; animation: sm-rec 1.6s ease-out infinite; animation-play-state: paused; }
.sm-live .sm-rec { animation-play-state: running; }
@keyframes sm-rec { 0% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .6); opacity: 1; } 45% { opacity: .35; } 70% { box-shadow: 0 0 0 7px rgba(255, 59, 48, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, 0); opacity: 1; } }

/* ---------- Überschrift: Buchstaben (eigene Tags, damit `.social-title span` nicht greift) ---------- */
.social-title sm-src { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.social-title sm-vis { display: inline-block; }
.social-title sm-c { display: inline-block; white-space: pre; }

/* ---------- Knöpfe ---------- */
.sm-ready .social-link { position: relative; isolation: isolate; overflow: hidden; translate: var(--sm-lx, 0px) var(--sm-ly, 0px); transition: color .25s, border-color .25s, transform .25s var(--ease), translate .5s cubic-bezier(.2, .8, .2, 1); }
.sm-ready .social-link::before { position: absolute; z-index: -1; inset: 0; background: var(--paper); content: ""; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s cubic-bezier(.7, 0, .2, 1); }
.sm-ready .social-link[href]:hover { background: transparent; }
.sm-ready .social-link[href]:hover::before { transform: scaleX(1); transform-origin: 0 50%; }
.sm-ready .social-link:not([href]):hover { border-color: rgba(236, 235, 230, .5); }
.sm-ready .social-link svg { overflow: visible; }
.sm-ready .social-link[data-social="instagram"]:hover svg rect,
.sm-ready .social-link[data-social="instagram"]:hover svg circle:not(.social-dot) { transform-box: fill-box; transform-origin: center; animation: sm-shutter .6s cubic-bezier(.3, 1.6, .5, 1); }
.sm-ready .social-link[data-social="instagram"]:hover .social-dot { animation: sm-blink .6s steps(2) 2; }
.sm-ready .social-link[data-social="tiktok"]:hover svg { animation: sm-tiktok .42s steps(1) infinite; }
@keyframes sm-shutter { 0% { transform: scale(1); } 35% { transform: scale(.72) rotate(-12deg); } 100% { transform: none; } }
@keyframes sm-blink { 50% { opacity: 0; } }
@keyframes sm-tiktok {
  0% { filter: drop-shadow(-2px 0 0 #1fe5ee) drop-shadow(2px 0 0 #ff2b3d); transform: translate(0, 0); }
  25% { filter: drop-shadow(2px -1px 0 #1fe5ee) drop-shadow(-2px 1px 0 #ff2b3d); transform: translate(1px, -1px); }
  50% { filter: drop-shadow(-1px 1px 0 #1fe5ee) drop-shadow(1px 0 0 #ff2b3d); transform: translate(-1px, 0); }
  75% { filter: drop-shadow(1px 0 0 #1fe5ee) drop-shadow(-2px -1px 0 #ff2b3d); transform: translate(0, 1px); }
}
/* „BALD“ glänzt, solange noch kein Name im Dashboard steht. */
.sm-ready .social-link:not([href]) .social-handle { background: linear-gradient(100deg, var(--muted) 38%, var(--paper) 50%, var(--muted) 62%) 100% 0 / 320% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sm-shimmer 3.4s linear infinite; animation-play-state: paused; }
.sm-live .social-link:not([href]) .social-handle { animation-play-state: running; }
@keyframes sm-shimmer { to { background-position: -220% 0; } }

/* ---------- Handy: Lage aus dem Skript (Kippen zur Maus, Schweben), Spiegelung auf dem Glas ---------- */
.social-strip.sm-ready .social-phone { transform: perspective(1100px) translateY(var(--sm-ty, 0px)) rotateX(var(--sm-rx, 0deg)) rotateY(var(--sm-ry, 0deg)) rotate(var(--sm-rz, 3deg)); transition: none; will-change: transform; }
.sm-glare { position: absolute; z-index: 3; inset: 9px; border-radius: 32px; background: linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, .03) 52%, rgba(255, 255, 255, 0) 62%) var(--sm-gx, 50%) var(--sm-gy, 50%) / 260% 260%; pointer-events: none; mix-blend-mode: screen; }

/* ---------- Story-Player im Schirm ---------- */
.sm-ready .social-screen { position: relative; z-index: 1; padding: 0; background: #050505; }
.sm-ready .social-profile,
.sm-ready .social-grid { display: none; }
.sm-reel { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; color: #f4f3ee; font-family: var(--sans); cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sm-slides { position: absolute; inset: 0; }
/* Wechsel wie beim Wischen durch Stories (Runde 5, Michas Wunsch): der neue Beitrag kommt von rechts, der alte wird nach links
   hinausgeschoben. Beim Zurück (linkes Drittel, Klick auf ältere Mitteilung) spiegelverkehrt: .is-back am Player, .sm-from-left als Start. */
.sm-slide { position: absolute; inset: 0; margin: 0; overflow: hidden; visibility: hidden; background: #0b0b0b; transform: translateX(100%); transition: none; }
.sm-slide.sm-from-left { transform: translateX(-100%); }
.sm-slide img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% var(--frame-y, 50%); }
.sm-slide.is-current { z-index: 2; visibility: visible; transform: none; transition: transform .75s cubic-bezier(.65, 0, .2, 1); }
.sm-slide.is-current.sm-instant { transition: none; }
.sm-slide.is-prev { z-index: 1; visibility: visible; filter: brightness(.55); transform: translateX(-100%); transition: transform .75s cubic-bezier(.65, 0, .2, 1), filter .75s ease; }
.sm-reel.is-back .sm-slide.is-prev { transform: translateX(100%); }
.sm-slide.is-current img,
.sm-slide.is-prev img { animation: sm-kenburns 7.5s linear both; }
.sm-ready:not(.sm-live) .sm-slide img,
.sm-reel.is-holding .sm-slide img { animation-play-state: paused; }
.sm-slide video { display: block; width: 100%; height: 100%; object-fit: cover; background: #050505; }
/* Das Poster bewegt sich kaum und zoomt zur oberen Mitte, damit das Logo unter der Kopfzeile bleibt. */
.sm-slide.sm-still img { --kb: 0%; --kb-y: 0%; --kb-s: 1.05; transform-origin: 50% 40%; }
.sm-mono img, img.sm-mono { filter: grayscale(1) contrast(1.05); }
@keyframes sm-kenburns { from { transform: scale(1.03); } to { transform: scale(var(--kb-s, 1.17)) translate(var(--kb, 2.5%), var(--kb-y, -2%)); } }

/* TikTok-Störung: zwei eingefärbte Kopien des Fotos springen in Streifen gegeneinander. */
.sm-slide::before,
.sm-slide::after { position: absolute; z-index: 1; inset: 0; background: var(--sm-src) 50% var(--frame-y, 50%) / cover no-repeat; background-blend-mode: multiply; content: ""; opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.sm-slide::before { background-color: #00e1ff; }
.sm-slide::after { background-color: #ff1f1f; }
.sm-reel.is-glitch .sm-slide.is-current::before { animation: sm-glitch-a .5s steps(1) both; }
.sm-reel.is-glitch .sm-slide.is-current::after { animation: sm-glitch-b .5s steps(1) both; }
.sm-reel.is-glitch .sm-slides { animation: sm-glitch-shift .5s steps(1); }
@keyframes sm-glitch-a {
  0% { opacity: .55; transform: translateX(-6px); clip-path: inset(12% 0 79% 0); }
  20% { transform: translateX(5px); clip-path: inset(47% 0 45% 0); }
  40% { transform: translateX(-3px); clip-path: inset(70% 0 22% 0); }
  60% { opacity: .5; transform: translateX(7px); clip-path: inset(28% 0 66% 0); }
  80% { transform: translateX(-4px); clip-path: inset(84% 0 9% 0); }
  100% { opacity: 0; }
}
@keyframes sm-glitch-b {
  0% { opacity: .5; transform: translateX(5px); clip-path: inset(58% 0 33% 0); }
  20% { transform: translateX(-7px); clip-path: inset(18% 0 74% 0); }
  40% { transform: translateX(4px); clip-path: inset(36% 0 57% 0); }
  60% { opacity: .45; transform: translateX(-5px); clip-path: inset(77% 0 15% 0); }
  80% { transform: translateX(3px); clip-path: inset(4% 0 90% 0); }
  100% { opacity: 0; }
}
@keyframes sm-glitch-shift { 0% { translate: 3px 0; filter: contrast(1.35) saturate(1.4); } 25% { translate: -4px 1px; } 50% { translate: 2px 0; filter: contrast(1.2); } 75% { translate: -1px 0; } 100% { translate: 0 0; filter: none; } }

/* Schatten oben und unten, damit die weiße Schrift lesbar bleibt. Auf dem hellen Poster entfällt der obere, die Schrift oben wird dunkel. */
.sm-reel { --ui: #f4f3ee; }
.sm-reel.is-light { --ui: #151514; }
.sm-shade { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.sm-shade::before,
.sm-shade::after { position: absolute; right: 0; left: 0; content: ""; transition: opacity .6s ease; }
.sm-shade::before { top: 0; height: 26%; background: linear-gradient(180deg, rgba(0, 0, 0, .58), rgba(0, 0, 0, 0)); }
.sm-shade::after { bottom: 0; height: 48%; background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, .78)); }
.sm-reel.is-light .sm-shade::before { opacity: 0; }
.sm-reel.is-light .sm-shade::after { opacity: .85; }

/* Statusleiste links und rechts der Kerbe */
.sm-status { position: absolute; z-index: 4; top: 11px; right: 17px; left: 22px; display: flex; align-items: center; justify-content: space-between; color: var(--ui); font: 600 10px/1 var(--sans); letter-spacing: .01em; transition: color .5s ease; }
.sm-sys { display: flex; align-items: flex-end; gap: 1.6px; }
.sm-sys i { width: 2.4px; border-radius: 1px; background: var(--ui); transition: background-color .5s ease; }
.sm-sys i:nth-child(1) { height: 3px; } .sm-sys i:nth-child(2) { height: 4.6px; } .sm-sys i:nth-child(3) { height: 6.2px; } .sm-sys i:nth-child(4) { height: 7.8px; }
.sm-sys svg { width: 19px; height: 9.5px; margin-left: 4px; fill: none; stroke: var(--ui); stroke-width: 1; opacity: .7; }
.sm-sys .sm-charge { fill: var(--ui); stroke: none; }

/* Fortschrittsbalken wie bei Stories */
.sm-bars { position: absolute; z-index: 4; top: 37px; right: 10px; left: 10px; display: flex; gap: 2.5px; }
.sm-bars i { flex: 1; height: 2px; overflow: hidden; border-radius: 2px; background: color-mix(in srgb, var(--ui) 30%, transparent); }
.sm-bars b { display: block; height: 100%; background: var(--ui); transform: scaleX(0); transform-origin: 0 50%; }

.sm-head { position: absolute; z-index: 4; top: 46px; right: 10px; left: 10px; display: flex; align-items: center; gap: 8px; color: var(--ui); transition: color .5s ease; }
.sm-avatar { width: 29px; height: 29px; flex: 0 0 29px; padding: 2px; border-radius: 50%; background: conic-gradient(from var(--sm-turn), #ffffff, #7d8185, #f4f3ee, #3f4245, #ffffff); animation: sm-turn 4s linear infinite; animation-play-state: paused; }
.sm-live .sm-avatar { animation-play-state: running; }
.sm-avatar img { display: block; box-sizing: border-box; width: 100%; height: 100%; padding: 5px 3px; border: 2px solid #050505; border-radius: 50%; background: #151515; object-fit: contain; }
@keyframes sm-turn { to { --sm-turn: 360deg; } }
.sm-who { display: flex; min-width: 0; align-items: baseline; gap: 6px; }
.sm-who b { overflow: hidden; font: 700 10.5px/1 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.sm-who small { color: var(--ui); font: 9.5px/1 var(--sans); opacity: .66; }
.sm-more { display: flex; gap: 2.5px; margin-left: auto; }
.sm-more i { width: 3px; height: 3px; border-radius: 50%; background: var(--ui); }
.sm-reel.is-light .sm-avatar img { border-color: #e6e4de; }

/* Leiste rechts */
.sm-rail { position: absolute; z-index: 4; right: 9px; bottom: 84px; display: grid; gap: 15px; justify-items: center; }
.sm-act svg { display: block; width: 21px; height: 21px; fill: none; stroke: #f8f7f2; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .55)); }
.sm-like.is-liked svg { fill: #ff3040; stroke: #ff3040; animation: sm-like .5s cubic-bezier(.2, 1.7, .4, 1); }
@keyframes sm-like { 0% { transform: scale(.4); } 100% { transform: none; } }

/* Text unten */
.sm-foot { position: absolute; z-index: 4; right: 46px; bottom: 15px; left: 12px; }
.sm-foot p { margin: 0; }
.sm-by { display: flex; align-items: center; gap: 7px; }
.sm-by b { overflow: hidden; font: 700 10.5px/1.2 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.sm-follow { flex: 0 0 auto; padding: 3px 7px; border: 1px solid rgba(255, 255, 255, .72); border-radius: 6px; font: 600 8.5px/1.2 var(--sans); font-style: normal; }
.sm-follow.is-pulse { animation: sm-follow .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes sm-follow { 0% { color: #0b0b0b; background: #f4f3ee; transform: scale(.86); } 100% { transform: none; } }
.sm-cap { margin-top: 7px !important; font: 8.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.sm-cap.is-new { animation: sm-cap .7s cubic-bezier(.2, .8, .2, 1) backwards; }
@keyframes sm-cap { from { opacity: 0; transform: translateY(8px); } }
.sm-tags { margin-top: 4px !important; color: rgba(244, 243, 238, .62); font: 8.5px/1.3 var(--sans); }

/* Herz beim „Doppeltippen“ */
.sm-heart { position: absolute; z-index: 6; top: 45%; left: 50%; width: 86px; height: 86px; margin: -43px 0 0 -43px; opacity: 0; pointer-events: none; }
.sm-heart svg { width: 100%; height: 100%; fill: #fff; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .45)); }
.sm-heart i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fff; opacity: 0; }
.sm-heart.is-pop { animation: sm-heart 1.05s cubic-bezier(.2, .9, .3, 1) both; }
.sm-heart.is-pop i { animation: sm-spark .75s .06s ease-out both; }
@keyframes sm-heart { 0% { opacity: 0; transform: scale(0) rotate(-14deg); } 16% { opacity: 1; transform: scale(1.22) rotate(4deg); } 30% { transform: scale(.94) rotate(-2deg); } 44% { transform: scale(1.04) rotate(0); } 72% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translateY(-34px) scale(1.06); } }
@keyframes sm-spark { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-26px) scale(1); } 100% { opacity: 0; transform: rotate(var(--a)) translateY(-66px) scale(.2); } }

/* Einschalten wie der Röhrenfernseher: Punkt, Linie, Bild */
.sm-power { position: absolute; z-index: 8; inset: 0; display: none; background: #000; }
.sm-power::before { position: absolute; top: 50%; right: 0; left: 0; height: 2px; margin-top: -1px; background: #fff; box-shadow: 0 0 14px 3px rgba(255, 255, 255, .75); content: ""; opacity: 0; transform: scale(0, 1); }
.sm-armed:not(.sm-on) .sm-power { display: block; }
.sm-phone-in .sm-power { animation: sm-power-bg .55s 1.3s ease-out both; }
.sm-phone-in .sm-power::before { animation: sm-power-line .95s .85s cubic-bezier(.5, 0, .2, 1) both; }
.sm-phone-in:not(.sm-phone-done) .sm-slides { animation: sm-screen-on 1s 1.3s ease-out backwards; }
@keyframes sm-power-line { 0% { opacity: 0; transform: scale(0, 1); } 10% { opacity: 1; transform: scale(.03, 1); } 36% { opacity: 1; transform: scale(1, 1); } 62% { opacity: .9; transform: scale(1, 70); } 100% { opacity: 0; transform: scale(1, 280); } }
@keyframes sm-power-bg { to { background-color: rgba(0, 0, 0, 0); } }
@keyframes sm-screen-on { from { filter: brightness(2.4) contrast(1.4) blur(1.5px); transform: scaleY(.6); } }

/* ---------- Live aus dem Archiv: jeder Beitrag aus dem Handy kommt hier an, neuester oben, höchstens drei ---------- */
.sm-feed { --sm-feed-max: 3; --sm-row: 70px; position: relative; z-index: 1; grid-area: feed; align-self: start; width: min(100%, 340px); transition: opacity .9s ease; }
.sm-armed:not(.sm-on) .sm-feed { opacity: 0; }
.sm-feed-head { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--muted); font: 9px/1.4 var(--mono); letter-spacing: .15em; }
.sm-feed-head span { display: block; width: 20px; height: 1px; background: var(--paper); }
.sm-feed-head b { font-weight: 400; }
.sm-feed-list { position: relative; height: calc(var(--sm-feed-max) * var(--sm-row) - 10px); }
/* Eine Zeile = Bild, Titel mit Zeit, eine kurze Zeile. Die neueste hat einen hellen Rand, ältere treten zurück. */
.sm-entry { position: absolute; top: 0; right: 0; left: 0; display: flex; box-sizing: border-box; height: 60px; align-items: center; gap: 12px; padding: 0 14px 0 8px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; color: #f4f3ee; background: rgba(20, 21, 22, .92); box-shadow: 0 14px 30px rgba(0, 0, 0, .38); opacity: calc(1 - var(--slot, 0) * .24); transform: translateY(calc(var(--slot, 0) * var(--sm-row))); transition: transform .7s cubic-bezier(.2, .8, .2, 1), opacity .6s ease, border-color .4s, background-color .25s; animation: sm-entry-in .6s cubic-bezier(.2, .8, .2, 1) backwards; }
.sm-entry.is-new { border-color: rgba(255, 255, 255, .28); }
.sm-entry.is-gone { opacity: 0; pointer-events: none; }
@keyframes sm-entry-in { from { opacity: 0; translate: var(--sm-in-x, 28px) var(--sm-in-y, 0px); } }
@media (hover: hover) and (pointer: fine) {
  .sm-entry.is-link { cursor: pointer; }
  .sm-entry.is-link:hover { border-color: rgba(255, 255, 255, .4); background: rgba(32, 33, 34, .95); }
}
.sm-entry-media { display: grid; width: 44px; height: 44px; flex: 0 0 44px; overflow: hidden; place-items: center; border-radius: 10px; background: #0e0e0e; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.sm-entry-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sm-entry-media svg { width: 20px; height: 20px; fill: none; stroke: #f4f3ee; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.sm-entry-text { display: grid; min-width: 0; flex: 1; gap: 5px; }
.sm-entry-row { display: flex; min-width: 0; align-items: baseline; justify-content: space-between; gap: 10px; }
.sm-entry-title { overflow: hidden; font: 700 12px/1.2 var(--sans); text-overflow: ellipsis; white-space: nowrap; }
.sm-entry-row small { flex: 0 0 auto; color: rgba(244, 243, 238, .48); font: 8px/1 var(--mono); letter-spacing: .1em; }
.sm-entry-body { overflow: hidden; color: rgba(244, 243, 238, .66); font: 8.5px/1.2 var(--mono); letter-spacing: .06em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
/* Neben dem Handy (drei Spalten): eine Linie mit Lichtpunkt läuft vom Handy zur neuen Mitteilung. */
@media (min-width: 1300px) {
  .sm-feed { align-self: center; width: 100%; }
  .sm-feed::before,
  .sm-feed::after { position: absolute; top: 57px; right: calc(-1 * var(--sm-gap)); content: ""; opacity: 0; pointer-events: none; }
  .sm-feed::after { width: var(--sm-gap); height: 1px; background: linear-gradient(90deg, rgba(236, 235, 230, .45), rgba(236, 235, 230, .08)); transform-origin: 100% 50%; }
  .sm-feed::before { width: 5px; height: 5px; margin-top: -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 2px rgba(255, 255, 255, .55); }
  .sm-feed.is-sending::after { animation: sm-send-line .8s ease-out; }
  .sm-feed.is-sending::before { animation: sm-send-dot .55s cubic-bezier(.5, 0, .3, 1); }
}
@keyframes sm-send-line { 0% { opacity: 0; transform: scaleX(0); } 35% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
@keyframes sm-send-dot { 0% { opacity: 0; transform: translateX(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(calc(-1 * var(--sm-gap))); } }
@media (max-width: 860px) {
  .sm-feed { --sm-in-x: 0px; --sm-in-y: -16px; justify-self: center; }
}

/* ---------- Auftritt (nur mit Bewegung) ---------- */
.sm-armed:not(.sm-copy-in) :is(.social-copy .eyebrow, .social-note, .social-link, .social-title > span, .sm-finder) { opacity: 0; }
.sm-armed:not(.sm-copy-in) .social-title sm-c { transform: translateY(110%); }
.sm-armed:not(.sm-phone-in) .social-phone { opacity: 0; }
.sm-copy-in:not(.sm-copy-done) .social-copy .eyebrow { animation: sm-rise .7s .05s var(--ease) backwards; }
.sm-copy-in:not(.sm-copy-done) .social-title sm-vis { clip-path: inset(-40% -12% -3% -12%); }
.sm-copy-in:not(.sm-copy-done) .social-title sm-c { animation: sm-letter .85s calc(.15s + var(--i) * 48ms) cubic-bezier(.2, .9, .25, 1.12) backwards; }
@keyframes sm-letter { from { transform: translateY(110%) rotate(8deg); } }
/* ARCHIV. wird von links gesprüht, danach laufen die Tropfen nach unten aus. Das Polster hält die Tropfen in der Maske. */
.sm-copy-in:not(.sm-copy-done) .social-title > span {
  margin: -.04em -.06em -.34em;
  padding: .1em .06em .34em;
  -webkit-mask: linear-gradient(90deg, #000 calc(var(--sm-spray) - 14%), transparent var(--sm-spray)), linear-gradient(180deg, #000 var(--sm-drip), transparent calc(var(--sm-drip) + 5%));
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, #000 calc(var(--sm-spray) - 14%), transparent var(--sm-spray)), linear-gradient(180deg, #000 var(--sm-drip), transparent calc(var(--sm-drip) + 5%));
  mask-composite: intersect;
  animation: sm-spray 1s .6s cubic-bezier(.45, .05, .35, 1) backwards, sm-drip 1.5s 1.3s cubic-bezier(.35, 0, .25, 1) backwards, sm-spray-in .01s .6s backwards;
}
@keyframes sm-spray { from { --sm-spray: 0%; } to { --sm-spray: 135%; } }
@keyframes sm-drip { from { --sm-drip: 66%; } to { --sm-drip: 135%; } }
@keyframes sm-spray-in { from { opacity: 0; } }
.sm-copy-in:not(.sm-copy-done) .social-note { animation: sm-rise .8s 1.25s var(--ease) backwards; }
.sm-copy-in:not(.sm-copy-done) .social-link { animation: sm-rise .8s calc(1.45s + var(--n, 0) * .13s) var(--ease) backwards; }
.sm-copy-in:not(.sm-copy-done) .sm-corner { animation: sm-corner 1s .1s cubic-bezier(.2, .9, .2, 1) backwards; }
.sm-copy-in:not(.sm-copy-done) .sm-tc { animation: sm-rise .6s .5s ease-out backwards; }
@keyframes sm-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes sm-corner { from { opacity: 0; transform: translate(var(--cx), var(--cy)); } }
/* Das Handy fliegt über die Einzel-Eigenschaften ein, damit transform frei fürs Kippen bleibt. */
.sm-phone-in:not(.sm-phone-done) .social-phone { animation: sm-phone 1.3s .1s cubic-bezier(.16, .9, .24, 1) backwards; }
@keyframes sm-phone { from { opacity: 0; translate: 0 120px; rotate: 13deg; scale: .86; } 45% { opacity: 1; } to { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; } }

/* ---------- Handy-Breite ---------- */
@media (max-width: 860px) {
  .sm-tc { left: 26px; }
}

/* ---------- Weniger Bewegung: Standbild, kein Staub, keine Wellen ---------- */
@media (prefers-reduced-motion: reduce) {
  .sm-snow, .sm-dots, .sm-feed::before, .sm-feed::after { display: none; }
  .sm-entry { animation: none; transition: none; }
  .sm-rec, .sm-avatar, .sm-ready .social-link:not([href]) .social-handle { animation: none; }
  .sm-slide.is-current, .sm-slide.is-prev { transition: none; }
  .sm-slide img { animation: none !important; }
  .sm-heart, .sm-glare { display: none; }
}