/* ==========================================================================
   Live-Overlay „Fein" — Feed-Livekarte + Watch (Zuschauer), Web/PWA.
   Verbindlich: docs/design/LIVE-OVERLAY-FEIN.md (gleiche Werte in iOS/Android).
   Greift nur unter html.wb-fein (Schalter: /js/wb-fein.js).

   Spezifität: Die Bestandsregeln arbeiten mit !important und ID-Selektoren
   (watch-zonen.css: `html body.watch-page.watch-feed-portrait #id` = 1,2,2;
   waveblue-new-standard.css: `.feed-action-btn` !important). Jede Regel hier
   trägt deshalb `html.wb-fein body.<seite>` vorn und !important, damit sie
   sicher gewinnt. Inline gesetzte Zustände (Folgen-Knopf grün) werden nur
   dort überschrieben, wo die Spec es ausdrücklich will.
   ========================================================================== */

html.wb-fein {
  --wbf-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif;
  --wbf-accent: #5E55F0;
  --wbf-accent-text: #C4BFFF;
  --wbf-live: #FF3B5C;
  --wbf-text2: rgba(255,255,255,.65);
  --wbf-text3: rgba(255,255,255,.45);
  --wbf-glass: rgba(10,8,22,.50);
  --wbf-hair: rgba(255,255,255,.16);
  --wbf-shadow: 0 1px 6px rgba(0,0,0,.5);
  --wbf-shadow-chat: 0 1px 5px rgba(0,0,0,.6);
  /* Akzentkreis Ø30 mittig in einer 44er-Fläche, ohne Zusatzelement */
  --wbf-dot30: radial-gradient(circle at center, var(--wbf-accent) 0 14.6px, transparent 15.2px);
}

/* ---------- FEED ---------------------------------------------------------- */

html.wb-fein body.feed-page .feed-nav,
html.wb-fein body.feed-page .feed-live-rail,
html.wb-fein body.feed-page .feed-bottom,
html.wb-fein body.feed-page .feed-actions,
html.wb-fein body.feed-page .feed-app-nav,
html.wb-fein body.feed-page .feed-comment-dock,
html.wb-fein body.feed-page .feed-time-badge {
  font-family: var(--wbf-font) !important;
}

/* Verläufe: unten 55 % → 0 über 38 %, oben 32 % → 0 über 14 % */
html.wb-fein body.feed-page .feed-overlay {
  background:
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 38%),
    linear-gradient(to bottom, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 14%) !important;
}
html.wb-fein body.feed-page .feed-live-preview::after {
  background: linear-gradient(to top, rgba(0,0,0,.35), rgba(0,0,0,0) 40%) !important;
}

/* Kopfzeile: Kästen weg, Symbole 18, „+" als Akzentkreis */
html.wb-fein body.feed-page .feed-nav {
  background: linear-gradient(to bottom, rgba(0,0,0,.32), rgba(0,0,0,0)) !important;
  min-height: 0 !important;
}
html.wb-fein body.feed-page .feed-nav-logo,
html.wb-fein body.feed-page .feed-nav-search {
  width: 40px !important; height: 44px !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: #fff !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
html.wb-fein body.feed-page .feed-nav-logo svg,
html.wb-fein body.feed-page .feed-nav-search svg {
  width: 18px !important; height: 18px !important;
}
html.wb-fein body.feed-page .feed-nav-logo svg *,
html.wb-fein body.feed-page .feed-nav-search svg * { stroke-width: 1.4 !important; }
html.wb-fein body.feed-page .feed-mode-select {
  min-height: 30px !important; height: 30px !important;
  font-family: var(--wbf-font) !important;
  font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  background: var(--wbf-glass) !important;
  border: .5px solid var(--wbf-hair) !important;
  box-shadow: none !important;
}
html.wb-fein body.feed-page .feed-mode-select-wrap::after {
  font-size: 9px !important; font-weight: 400 !important; color: var(--wbf-text2) !important;
}
html.wb-fein body.feed-page .feed-nav-upload {
  position: relative !important;
  width: 44px !important; height: 44px !important;
  min-width: 44px !important; min-height: 44px !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: var(--wbf-dot30) !important;
  box-shadow: none !important;
  font-size: 0 !important; color: #fff !important;
}
html.wb-fein body.feed-page .feed-nav-upload::before {
  content: '' !important;
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px;
  transform: translate(-50%,-50%);
  background:
    linear-gradient(#fff,#fff) center / 12px 1.6px no-repeat,
    linear-gradient(#fff,#fff) center / 1.6px 12px no-repeat;
}
html.wb-fein body.feed-page .feed-nav-upload > *:not(svg) { display: none !important; }
html.wb-fein body.feed-page .feed-nav-upload svg { width: 14px !important; height: 14px !important; display: none !important; }

/* Schnellchips unter der Kopfzeile */
html.wb-fein body.feed-page .feed-live-chip {
  min-height: 24px !important; height: 24px !important;
  padding: 0 9px !important; border-radius: 12px !important;
  font-family: var(--wbf-font) !important;
  font-size: 10.5px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  background: var(--wbf-glass) !important;
  border: .5px solid var(--wbf-hair) !important;
  box-shadow: none !important; color: #fff !important;
}
html.wb-fein body.feed-page .feed-live-chip.download { background: var(--wbf-glass) !important; border-color: var(--wbf-hair) !important; }
html.wb-fein body.feed-page .feed-live-rail { gap: 5px !important; }
html.wb-fein body.feed-page .feed-live-dot {
  width: 5px !important; height: 5px !important;
  background: var(--wbf-live) !important; box-shadow: 0 0 0 2.5px rgba(255,59,92,.22) !important;
}

/* Infoblock unten links */
html.wb-fein body.feed-page .feed-bottom {
  left: max(16px, env(safe-area-inset-left, 0px)) !important;
  right: 64px !important;
  text-shadow: var(--wbf-shadow) !important;
}
html.wb-fein body.feed-page .feed-item[data-type="live_stream"] .feed-bottom {
  bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important;
}
html.wb-fein body.feed-page .feed-user { gap: 8px !important; margin-bottom: 5px !important; }
html.wb-fein body.feed-page .feed-avatar,
html.wb-fein body.feed-page .feed-avatar-fallback {
  width: 26px !important; height: 26px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: none !important;
  font-size: 10px !important; font-weight: 500 !important;
}
/* Live: Verlaufsring Akzent → Cyan, 1,5 Spalt */
html.wb-fein body.feed-page .feed-item[data-type="live_stream"] .feed-avatar,
html.wb-fein body.feed-page .feed-item[data-type="live_stream"] .feed-avatar-fallback {
  padding: 1.5px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(#0b0a12,#0b0a12) padding-box,
    conic-gradient(#5E55F0, #3EE0FF, #5E55F0) border-box !important;
  background-clip: padding-box, border-box !important;
}
html.wb-fein body.feed-page .feed-item[data-type="live_stream"] .feed-avatar { object-fit: cover; border-radius: 50% !important; }
html.wb-fein body.feed-page .feed-username {
  font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  max-width: 46vw !important;
}
html.wb-fein body.feed-page .feed-follow-btn {
  position: relative !important;
  height: 20px !important; min-height: 20px !important;
  padding: 0 9px !important; margin-left: 0 !important;
  border: 0 !important; border-radius: 10px !important;
  background: var(--wbf-accent) !important;
  font-family: var(--wbf-font) !important;
  font-size: 10.5px !important; font-weight: 500 !important; line-height: 20px !important;
  box-shadow: none !important; text-shadow: none !important;
}
html.wb-fein body.feed-page .feed-follow-btn::after {  /* Trefffläche 44 hoch */
  content: ''; position: absolute; left: -4px; right: -4px; top: -12px; bottom: -12px;
}
html.wb-fein body.feed-page .feed-caption {
  font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important;
  color: rgba(255,255,255,.88) !important;
  margin-bottom: 5px !important; max-height: 2.8em !important;
}
html.wb-fein body.feed-page .feed-tag {
  color: rgba(255,255,255,.55) !important;
  font-size: 11px !important; font-weight: 400 !important;
  text-shadow: var(--wbf-shadow) !important;
}
html.wb-fein body.feed-page .feed-created-by { font-size: 10px !important; font-weight: 400 !important; color: var(--wbf-text2) !important; }

/* Aktionsleiste: nach RECHTS (wie iOS/Android), Symbole 18, nur Zahlen */
html.wb-fein body.feed-page .feed-actions {
  left: auto !important;
  right: max(6px, env(safe-area-inset-right, 0px)) !important;
  gap: 0 !important;
}
html.wb-fein body.feed-page .feed-item[data-type="live_stream"] .feed-actions {
  bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
}
html.wb-fein body.feed-page .feed-action {
  width: 48px !important; min-height: 48px !important;
  justify-content: center !important; gap: 2px !important;
}
html.wb-fein body.feed-page .feed-action-btn {
  width: 48px !important; height: 26px !important;
  min-width: 0 !important; min-height: 0 !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  color: #fff !important;
  font-size: 18px !important; font-weight: 300 !important; line-height: 1 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;  /* keine Fläche hinter Symbolen (Spec §1.5) */
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
html.wb-fein body.feed-page .feed-action-btn svg { width: 18px !important; height: 18px !important; }
html.wb-fein body.feed-page .feed-action-btn svg * { stroke-width: 1.3 !important; }
html.wb-fein body.feed-page .feed-action-btn.liked,
html.wb-fein body.feed-page .feed-action-btn.saved { color: #fff !important; }
html.wb-fein body.feed-page .feed-action-btn.reposted { background: none !important; color: var(--wbf-accent-text) !important; }
html.wb-fein body.feed-page .feed-action-count {
  font-family: var(--wbf-font) !important;
  font-size: 9px !important; font-weight: 400 !important;
  font-variant-numeric: tabular-nums !important;
  color: rgba(255,255,255,.75) !important;
  text-shadow: var(--wbf-shadow) !important;
}
/* Beschriftungen ohne Zahl (Live, Folgen, Melden, Sichern) ausblenden */
html.wb-fein body.feed-page .feed-action-count:not([id]),
html.wb-fein body.feed-page .feed-action-count[id^="save-count"],
html.wb-fein body.feed-page .feed-action-count[id^="post-save"] {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
/* Live: erste Aktion „Ansehen" als Akzentkreis */
html.wb-fein body.feed-page .feed-item[data-type="live_stream"] .feed-action:first-child .feed-action-btn {
  height: 48px !important;
  background: var(--wbf-dot30) !important;
  filter: none !important;
}
html.wb-fein body.feed-page .feed-item[data-type="live_stream"] .feed-action:first-child .feed-action-btn svg {
  width: 12px !important; height: 12px !important; fill: #fff !important;
}
/* Melden leiser */
html.wb-fein body.feed-page .feed-action[onclick^="openReportModal"] { opacity: .5 !important; }
html.wb-fein body.feed-page .feed-action[onclick^="openReportModal"] svg { width: 15px !important; height: 15px !important; }
/* Avatar in der Leiste (Clips) */
html.wb-fein body.feed-page .feed-action-avatar {
  width: 30px !important; height: 30px !important;
  border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: none !important; font-size: 11px !important; font-weight: 500 !important;
}

/* Kommentarzeile (Clips) wie die Eingabe */
html.wb-fein body.feed-page .feed-comment-dock {
  height: 36px !important; border-radius: 18px !important;
  background: rgba(0,0,0,.22) !important;
  border: .5px solid rgba(255,255,255,.24) !important;
  font-size: 13px !important; font-weight: 400 !important; color: rgba(255,255,255,.5) !important;
}
html.wb-fein body.feed-page .feed-own-avatar { width: 24px !important; height: 24px !important; font-weight: 500 !important; }
html.wb-fein body.feed-page .feed-time-badge {
  height: 22px !important; min-width: 0 !important; padding: 0 8px !important; border-radius: 11px !important;
  background: var(--wbf-glass) !important; border: .5px solid var(--wbf-hair) !important;
  font-size: 10px !important; font-weight: 400 !important;
}

/* App-Navigation unten */
html.wb-fein body.feed-page .feed-app-nav a {
  font-size: 10px !important; font-weight: 500 !important; color: rgba(255,255,255,.55) !important;
}
html.wb-fein body.feed-page .feed-app-nav a.active { color: #fff !important; }
html.wb-fein body.feed-page .feed-app-nav b { font-size: 17px !important; font-weight: 400 !important; }

/* ---------- WATCH (Feed-/Portrait-Zuschauer) ------------------------------- */
/* Gilt nur, wo watch-zonen.css gilt (body.watch-feed-portrait) — die
   Gegnerhälfte der Apps (?mode=battle) trägt diese Klasse nicht. */

html.wb-fein body.watch-page.watch-feed-portrait {
  font-family: var(--wbf-font) !important;
}

/* Kopf: Absenderzeile nach OBEN links, Kennzahlen als Metazeile darunter */
html.wb-fein body.watch-page.watch-feed-portrait .stream-header {
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 100%) !important;
}
html.wb-fein body.watch-page.watch-feed-portrait:not(.battle-stage) #wb-absender {
  top: calc(env(safe-area-inset-top, 0px) + 10px) !important;
  bottom: auto !important;
  left: max(14px, env(safe-area-inset-left, 0px)) !important;
  right: 56px !important;
  gap: 8px !important;
  align-items: flex-start !important;
  min-height: 28px !important;
  z-index: 9540 !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender-avatar {
  width: 28px !important; height: 28px !important; flex: 0 0 28px !important;
  box-sizing: border-box !important;
  padding: 1.5px !important;
  border: 1px solid transparent !important;
  background:
    linear-gradient(#0b0a12,#0b0a12) padding-box,
    conic-gradient(#5E55F0, #3EE0FF, #5E55F0) border-box !important;
  box-shadow: none !important;
  font-size: 11px !important; font-weight: 500 !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender-avatar img { border-radius: 50% !important; }
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender-name {
  font-size: 12.5px !important; font-weight: 500 !important; line-height: 15px !important;
  margin-top: 0 !important;
  text-shadow: var(--wbf-shadow) !important;
  max-width: 52vw !important;
}
/* Folgen-Kreis Ø22 mit Plus; gefolgt → verschwindet (Spec 5) */
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender #btn-follow-host:not(.following) {
  position: relative !important;
  width: 22px !important; height: 22px !important; min-width: 22px !important;
  padding: 0 !important; margin: 3px 0 0 2px !important;
  border: 0 !important; border-radius: 50% !important;
  background: var(--wbf-accent) !important;
  box-shadow: none !important;
  font-size: 0 !important; color: transparent !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender #btn-follow-host:not(.following) > * { display: none !important; }
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender #btn-follow-host:not(.following)::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px;
  transform: translate(-50%,-50%);
  background:
    linear-gradient(#fff,#fff) center / 11px 1.8px no-repeat,
    linear-gradient(#fff,#fff) center / 1.8px 11px no-repeat;
}
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender #btn-follow-host:not(.following)::after {
  content: ''; position: absolute; inset: -11px;      /* Trefffläche 44 */
}
/* Gefolgt: leise Pille „✓ Gefolgt" (Text setzt updateFollowButtonState) — bleibt
   antippbar zum Entfolgen, wie in der Android-App. Inline-Grün wird neutralisiert. */
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender #btn-follow-host.following {
  height: 20px !important; min-height: 20px !important; width: auto !important;
  padding: 0 8px !important; margin: 4px 0 0 2px !important;
  border: .5px solid var(--wbf-hair) !important; border-radius: 10px !important;
  background: rgba(255,255,255,.12) !important; box-shadow: none !important;
  font-family: var(--wbf-font) !important; font-size: 10px !important; font-weight: 400 !important;
  color: var(--wbf-text2) !important; position: relative !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender #btn-follow-host.following svg { display: none !important; }
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender #btn-follow-host.following::after { content: ''; position: absolute; inset: -12px -4px; }

/* Kennzahlen: keine Pille, keine Emojis — „● 1.248 · 12,4K" */
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar {
  background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  height: 16px !important; min-height: 16px !important;
  padding: 0 !important;
}
html.wb-fein body.watch-page.watch-feed-portrait:not(.battle-stage):has(#wb-absender:not([hidden])) #stream-stats-bar {
  top: calc(env(safe-area-inset-top, 0px) + 10px + 15px) !important;
  left: calc(max(14px, env(safe-area-inset-left, 0px)) + 36px) !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar .watch-mobile-stats-row {
  gap: 0 !important; padding: 0 !important; height: 16px !important; align-items: center !important;
}
/* 05.10.: fünf Kennzahlen statt zwei — ohne Symbol wären die Zahlen nicht zu
   unterscheiden, deshalb ein kleines Zeichen vor Funken/Runen/Coins (nicht vor Zuschauer/Likes). */
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar .stats-viewers .watch-stat-icon,
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar .stats-likes .watch-stat-icon { display: none !important; }
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar .watch-stat-icon {
  font-size: 8.5px !important; line-height: 1 !important; margin-right: 2px !important;
  width: auto !important; height: auto !important; background: none !important; padding: 0 !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar .stats-credits { order: 5; }
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar .watch-stat-chip {
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; min-width: 0 !important; height: 16px !important;
  font-family: var(--wbf-font) !important;
  font-size: 9.5px !important; font-weight: 400 !important; letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--wbf-text2) !important;
  text-shadow: var(--wbf-shadow) !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar .watch-stat-value {
  font-size: 9.5px !important; font-weight: 400 !important; color: inherit !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar .watch-stat-chip:not(.stats-viewers)::before {
  content: '·'; margin: 0 5px; color: var(--wbf-text3);
}
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar .watch-live-dot {
  width: 4px !important; height: 4px !important; margin-right: 5px !important;
  background: var(--wbf-live) !important; box-shadow: 0 0 0 2px rgba(255,59,92,.22) !important;
}

/* Schließen: X 16, ohne Fläche, Trefffläche 44 */
html.wb-fein body.watch-page.watch-feed-portrait #watch-exit-x {
  top: calc(env(safe-area-inset-top, 0px) + 2px) !important;
  right: max(4px, env(safe-area-inset-right, 0px)) !important;
  width: 44px !important; height: 44px !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-size: 0 !important; color: transparent !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #watch-exit-x::before,
html.wb-fein body.watch-page.watch-feed-portrait #watch-exit-x::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 17px; height: 1.4px; border-radius: 1px; background: #fff;
  box-shadow: 0 0 4px rgba(0,0,0,.45);
}
html.wb-fein body.watch-page.watch-feed-portrait #watch-exit-x::before { transform: translate(-50%,-50%) rotate(45deg); }
html.wb-fein body.watch-page.watch-feed-portrait #watch-exit-x::after  { transform: translate(-50%,-50%) rotate(-45deg); }

/* Hype-Leiste als Kapsel oben mittig */
html.wb-fein body.watch-page.watch-feed-portrait #hype-bar {
  top: calc(env(safe-area-inset-top, 0px) + 54px) !important;
  height: 26px !important; min-height: 26px !important;
  padding: 0 11px !important; gap: 8px !important;
  border-radius: 13px !important;
  background: var(--wbf-glass) !important;
  border: .5px solid var(--wbf-hair) !important;
  box-shadow: none !important;
  width: auto !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #hype-bar .hype-bar-label {
  font-size: 0 !important; height: auto !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #hype-bar .hype-bar-label::after {
  content: 'HYPE';
  font-family: var(--wbf-font); font-size: 10px; font-weight: 500; letter-spacing: .1em; color: #fff;
}
html.wb-fein body.watch-page.watch-feed-portrait #hype-bar .hype-bar-track {
  width: 72px !important; height: 2px !important; border-radius: 1px !important;
  background: rgba(255,255,255,.18) !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #hype-bar .hype-bar-fill {
  background: var(--wbf-accent-text) !important; box-shadow: none !important;
}

/* Rechte Leiste: Symbole 18, keine Fläche, keine Beschriftung, Raster 44 */
html.wb-fein body.watch-page.watch-feed-portrait #watch-mobile-action-rail {
  right: max(4px, env(safe-area-inset-right, 0px)) !important;
  gap: 0 !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #watch-mobile-action-rail .watch-action-btn {
  width: 44px !important; height: 44px !important;
  min-width: 44px !important; min-height: 44px !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)) !important;
  color: #fff !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #watch-mobile-action-rail .watch-action-btn svg {
  width: 18px !important; height: 18px !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #watch-mobile-action-rail .watch-action-btn svg * { stroke-width: 1.3 !important; }
html.wb-fein body.watch-page.watch-feed-portrait #watch-mobile-action-rail .watch-action-btn > span:not(:has(svg)) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #watch-mobile-action-rail .watch-action-btn.is-active {
  background: var(--wbf-dot30) !important;
  border-radius: 0 !important;
  filter: none !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #watch-mobile-action-rail .watch-action-btn.is-active svg {
  width: 15px !important; height: 15px !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #watch-mobile-action-rail .watch-action-btn.is-active svg * { stroke-width: 1.5 !important; }

/* Chat: ohne Blasen, ohne Avatare, ältere Zeilen blasser */
html.wb-fein body.watch-page.watch-feed-portrait:not(.battle-stage) #chat-overlay { right: 56px !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages {
  display: flex !important; flex-direction: column !important; justify-content: flex-end !important;
  gap: 5px !important;
  font-family: var(--wbf-font) !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-msg {
  display: block !important;
  margin: 0 !important; padding: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-size: 12px !important; line-height: 1.35 !important;
  text-shadow: var(--wbf-shadow-chat) !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-msg:nth-last-child(2) { opacity: .65 !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-msg:nth-last-child(n+3) { opacity: .4 !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-avatar,
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-follow-btn,
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-msg-time { display: none !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-bubble {
  display: block !important; max-width: none !important;
  padding: 0 !important; margin: 0 !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-msg-header {
  display: inline !important; margin: 0 !important; padding: 0 !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-msg-name {
  font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  color: var(--wbf-text2) !important;
  margin-right: 6px !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-msg-text {
  display: inline !important;
  font-size: 12px !important; font-weight: 400 !important; line-height: 1.35 !important;
  color: #fff !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-msg-badges,
html.wb-fein body.watch-page.watch-feed-portrait #chat-overlay .chat-msg-badges {
  display: inline-flex !important; vertical-align: 1px; margin-right: 4px !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-overlay .chat-msg-badges > * {
  font-size: 9px !important; font-weight: 400 !important;
  padding: 1px 4px !important; border-radius: 3px !important;
  background: rgba(94,85,240,.2) !important; color: #D4D1FF !important;
  border: 0 !important; box-shadow: none !important;
}
/* Vorschau-Blase über der Eingabe (doppelt die neueste Zeile) — leise */
html.wb-fein body.watch-page.watch-feed-portrait #chat-preview-bubble {
  background: none !important; border: 0 !important; box-shadow: none !important;
  font-size: 12px !important; font-weight: 400 !important; color: var(--wbf-text2) !important;
  text-shadow: var(--wbf-shadow-chat) !important;
}

/* Eingabezeile: Feld 36, Senden IM Feld (nur mit Text), Geschenk Akzentkreis */
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub.watch-chat-actions {
  gap: 0 !important;
  padding-left: max(10px, env(safe-area-inset-left, 0px)) !important;
  padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
  background: linear-gradient(0deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 100%) !important;
  align-items: center !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-input {
  order: 1 !important;
  height: 36px !important; min-height: 36px !important;
  padding: 0 14px !important; border-radius: 18px !important;
  background: rgba(0,0,0,.22) !important;
  border: .5px solid rgba(255,255,255,.24) !important;
  box-shadow: none !important;
  font-family: var(--wbf-font) !important;
  font-size: 13px !important; font-weight: 400 !important; color: #fff !important;
  margin-right: 0 !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-input::placeholder { color: rgba(255,255,255,.5) !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub:has(.wave-input:not(:placeholder-shown)) .wave-input { padding-right: 40px !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-gift-btn,
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-like-btn,
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-send-btn {
  width: 44px !important; height: 44px !important;
  min-width: 44px !important; min-height: 44px !important;
  padding: 0 !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; color: #fff !important;
  background: none !important;
  flex: 0 0 44px !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-send-btn {
  order: 2 !important; margin-left: -42px !important;
  background: radial-gradient(circle at center, var(--wbf-accent) 0 13.6px, transparent 14.2px) !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub:has(.wave-input:placeholder-shown) .wave-send-btn { display: none !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-gift-btn {
  order: 3 !important;
  background: var(--wbf-dot30) !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-like-btn { order: 4 !important; filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); }
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-like-btn svg { width: 18px !important; height: 18px !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-gift-btn svg { width: 15px !important; height: 15px !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-send-btn svg { width: 14px !important; height: 14px !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-gift-btn svg,
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-gift-btn svg *,
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-send-btn svg,
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-send-btn svg * { color: #fff !important; stroke: #fff !important; }
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-like-btn svg * { stroke-width: 1.3 !important; }

/* Zierwelle unten zurücknehmen */
html.wb-fein body.watch-page.watch-feed-portrait #engagement-wave { opacity: .35 !important; }

/* ---------- Ergänzungen (Bildprüfung 1) ----------------------------------- */

/* LIVE-Hinweis oben links auf der Feed-Livekarte — ohne Schalter unsichtbar */
.wbf-live-tag { display: none; }
html.wb-fein body.feed-page .wbf-live-tag {   /* im Infoblock über dem Namen — wie iOS/Android */
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 6px;
  font-family: var(--wbf-font); font-size: 10px; font-weight: 500; letter-spacing: .1em; color: #fff;
  text-shadow: var(--wbf-shadow); pointer-events: none;
}
html.wb-fein body.feed-page .wbf-live-tag i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--wbf-live); box-shadow: 0 0 0 2.5px rgba(255,59,92,.22);
}
html.wb-fein body.feed-page .wbf-live-tag span {
  font-weight: 400; letter-spacing: 0; font-variant-numeric: tabular-nums; color: var(--wbf-text2);
}

/* Vorschau-Blase doppelt die neueste Chatzeile, solange der Chat offen ist */
html.wb-fein body.watch-page.watch-feed-portrait:has(.watch-action-chat.is-active) #chat-preview-bubble { display: none !important; }

/* ---------- Ergänzungen (Bildprüfung 2) ----------------------------------- */
/* Folgen-Kreis: .orb/.orb-sm bringt eigene Mindestmaße mit */
html.wb-fein body.watch-page.watch-feed-portrait #wb-absender #btn-follow-host:not(.following) {
  min-height: 22px !important; max-height: 22px !important;
  max-width: 22px !important; flex: 0 0 22px !important;
  line-height: 0 !important; align-self: flex-start !important;
  overflow: visible !important;
}
/* Live-Punkt der Metazeile exakt rund */
html.wb-fein body.watch-page.watch-feed-portrait #stream-stats-bar .watch-live-dot {
  flex: 0 0 4px !important; min-width: 4px !important; min-height: 4px !important;
  max-width: 4px !important; max-height: 4px !important;
  padding: 0 !important; border: 0 !important; border-radius: 50% !important;
}
/* Herz als Linie (Spec 4: gefüllt nur als Zustand) */
html.wb-fein body.watch-page.watch-feed-portrait #watch-mobile-action-rail .watch-action-like svg,
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-like-btn svg { opacity: 1 !important; }
html.wb-fein body.watch-page.watch-feed-portrait #watch-mobile-action-rail .watch-action-like svg path,
html.wb-fein body.watch-page.watch-feed-portrait #chat-stub .wave-like-btn svg path {
  fill: none !important; stroke: currentColor !important; stroke-width: 1.3 !important;
  stroke-linejoin: round !important; stroke-linecap: round !important;
}

/* Kopf: nur Zuschauer + Likes (Spec 7). watch-zonen.css blendet die übrigen
   schon aus — hier ausdrücklich, damit es nicht an fremden Regeln hängt
   (Codex-Review 05.10., nachgemessen: vorher schon unsichtbar). */
/* 05.10.2026: Funken/Runen/Coins des Hosts wieder im Kopf — die frühere
   Ausblendung „nur Zuschauer + Likes“ (Spec 7) stand hier. */

/* ---------- CLIP-/BILD-KARTE (Spec §9, 05.10.2026) --------------------------
   Gleiche Bausteine wie die Livekarte, nur Markup-neutral per CSS: die
   Klick-Handler (Like/Sichern/Teilen …) bleiben unangetastet. */
html.wb-fein body.feed-page .feed-item:is([data-type="clip"],[data-type="creator_post"]) .feed-created-by { display: none !important; }

/* Folgen genau einmal (Pille unten links): Avatar + Plus in der Leiste raus */
html.wb-fein body.feed-page .feed-item:is([data-type="clip"],[data-type="creator_post"]) .feed-actions > .feed-action:has(.feed-action-avatar),
html.wb-fein body.feed-page .feed-item:is([data-type="clip"],[data-type="creator_post"]) .feed-actions > .feed-action[onclick^="followUser"] {
  display: none !important;
}

/* Reihenfolge: Like · Kommentar · Teilen · Sichern · (Repost/Offline) · Melden */
html.wb-fein body.feed-page .feed-item:is([data-type="clip"],[data-type="creator_post"]) .feed-actions { display: flex !important; flex-direction: column !important; }
html.wb-fein body.feed-page .feed-item:is([data-type="clip"],[data-type="creator_post"]) .feed-actions > .feed-action { order: 5; }
html.wb-fein body.feed-page .feed-item:is([data-type="clip"],[data-type="creator_post"]) .feed-actions > .feed-action:has([id*="like-btn"]) { order: 1; }
html.wb-fein body.feed-page .feed-item:is([data-type="clip"],[data-type="creator_post"]) .feed-actions > .feed-action:has([id*="comment-count"]) { order: 2; }
html.wb-fein body.feed-page .feed-item:is([data-type="clip"],[data-type="creator_post"]) .feed-actions > .feed-action:has([id*="share-count"]) { order: 3; }
html.wb-fein body.feed-page .feed-item:is([data-type="clip"],[data-type="creator_post"]) .feed-actions > .feed-action:has([id*="save-btn"]) { order: 4; }
html.wb-fein body.feed-page .feed-item:is([data-type="clip"],[data-type="creator_post"]) .feed-actions > .feed-action[onclick^="openReportModal"] { order: 9; }

/* Like: Textzeichen ♥/♡ → Linien-Herz 18 (gegeben = gefüllt Weiß). Der Zustand
   kommt weiter aus .liked, das die Like-Handler setzen. */
html.wb-fein body.feed-page .feed-action-btn[id*="like-btn"] {
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 0 !important; color: transparent !important;
}
html.wb-fein body.feed-page .feed-action-btn[id*="like-btn"]::before {
  content: ''; display: block; width: 18px; height: 18px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9-8.8C1.6 8 3.3 4.6 6.6 4.3c2-.2 3.4.8 4.2 2.1L12 8l1.2-1.6c.8-1.3 2.2-2.3 4.2-2.1 3.3.3 5 3.7 3.6 6.9C19 15.6 12 20 12 20z'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9-8.8C1.6 8 3.3 4.6 6.6 4.3c2-.2 3.4.8 4.2 2.1L12 8l1.2-1.6c.8-1.3 2.2-2.3 4.2-2.1 3.3.3 5 3.7 3.6 6.9C19 15.6 12 20 12 20z'/%3E%3C/svg%3E") center / 18px no-repeat;
}
html.wb-fein body.feed-page .feed-action-btn[id*="like-btn"].liked::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 20s-7-4.4-9-8.8C1.6 8 3.3 4.6 6.6 4.3c2-.2 3.4.8 4.2 2.1L12 8l1.2-1.6c.8-1.3 2.2-2.3 4.2-2.1 3.3.3 5 3.7 3.6 6.9C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 20s-7-4.4-9-8.8C1.6 8 3.3 4.6 6.6 4.3c2-.2 3.4.8 4.2 2.1L12 8l1.2-1.6c.8-1.3 2.2-2.3 4.2-2.1 3.3.3 5 3.7 3.6 6.9C19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
}

/* Karussell: Zähler als Kapsel, Punkte Ø5, Pfeile ohne Fläche */
html.wb-fein body.feed-page .feed-carousel-counter {
  height: 22px !important; min-width: 0 !important; padding: 0 8px !important; border-radius: 11px !important;
  background: var(--wbf-glass) !important; border: .5px solid var(--wbf-hair) !important;
  box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font-family: var(--wbf-font) !important; font-size: 10px !important; font-weight: 400 !important;
}
html.wb-fein body.feed-page .feed-carousel-dots {
  gap: 4px !important; padding: 0 !important; background: none !important; border: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.5));
}
html.wb-fein body.feed-page .feed-carousel-dot { width: 5px !important; height: 5px !important; background: rgba(255,255,255,.4) !important; }
html.wb-fein body.feed-page .feed-carousel-dot.active { width: 5px !important; background: #fff !important; }
html.wb-fein body.feed-page .feed-carousel-arrow {
  width: 44px !important; height: 44px !important;
  background: none !important; border: 0 !important; border-radius: 0 !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  font-size: 26px !important; font-weight: 300 !important; text-shadow: var(--wbf-shadow) !important;
}

/* Video-Fortschritt: 2 hoch, Weiß 85 % auf Weiß 15 % */
html.wb-fein body.feed-page .feed-progress { background: rgba(255,255,255,.15) !important; }
html.wb-fein body.feed-page .feed-progress-bar { background: rgba(255,255,255,.85) !important; }

/* ---------- CLIPS-SEITE (clips.html, Spec §9 Clips-Reiter) ---------------- */
html.wb-fein .clip-item { font-family: var(--wbf-font) !important; }
html.wb-fein .clip-item::after {           /* Verläufe unten 55 %→0 über 38 %, oben 32 %→0 über 14 % */
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 38%),
    linear-gradient(to bottom, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 14%);
}
html.wb-fein .clip-item .clip-actions {
  right: max(6px, env(safe-area-inset-right, 0px)) !important; bottom: 88px !important;
  gap: 0 !important;
}
html.wb-fein .clip-item .clip-action-btn {
  width: 48px !important; min-height: 48px !important; justify-content: center !important; gap: 2px !important; padding: 0 !important;
}
html.wb-fein .clip-item .clip-action-icon {
  width: 48px !important; height: 26px !important; border-radius: 0 !important;
  background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  color: #fff !important; font-size: 18px !important;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.45));
}
html.wb-fein .clip-item .clip-action-btn:hover .clip-action-icon { background: none !important; opacity: .85; }
html.wb-fein .clip-item .clip-action-label {
  font-size: 9px !important; font-weight: 400 !important; font-variant-numeric: tabular-nums !important;
  color: rgba(255,255,255,.75) !important; text-shadow: var(--wbf-shadow) !important;
}
/* Nur Zahlen sichtbar, Beschriftungen nur für Bedienhilfen */
html.wb-fein .clip-item .clip-action-label:not([id^="like-count-"]) {
  position: absolute !important; width: 1px !important; height: 1px !important;
  overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important;
}
html.wb-fein .clip-item .clip-action-report { opacity: .5 !important; }
html.wb-fein .clip-item .clip-action-report svg { width: 15px !important; height: 15px !important; }

/* Infoblock unten links */
html.wb-fein .clip-item .clip-info {
  left: max(16px, env(safe-area-inset-left, 0px)) !important; right: 64px !important; bottom: 28px !important;
  text-shadow: var(--wbf-shadow) !important; z-index: 4 !important;
}
html.wb-fein .clip-item .clip-creator { gap: 8px !important; margin-bottom: 5px !important; }
html.wb-fein .clip-item .clip-av {
  width: 26px !important; height: 26px !important; border: 1px solid rgba(255,255,255,.85) !important;
  box-shadow: none !important; font-size: 10px !important; font-weight: 500 !important;
}
html.wb-fein .clip-item .clip-username { font-size: 12.5px !important; font-weight: 500 !important; }
html.wb-fein .clip-item .clip-title {
  font-size: 12px !important; font-weight: 400 !important; line-height: 1.4 !important;
  color: rgba(255,255,255,.88) !important; max-height: 2.8em !important; overflow: hidden !important; margin-bottom: 5px;
}
html.wb-fein .clip-item .clip-views {
  font-size: 11px !important; font-weight: 400 !important; color: rgba(255,255,255,.55) !important; margin-top: 0 !important;
  font-variant-numeric: tabular-nums !important;
}
/* Folgen-Pille (genau einmal; gefolgt → verschwindet) */
.clip-follow-pill {
  position: relative; height: 20px; padding: 0 9px; border: 0; border-radius: 10px;
  background: #5E55F0; color: #fff; cursor: pointer;
  font: 500 10.5px/20px -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif;
}
.clip-follow-pill::after { content: ''; position: absolute; left: -4px; right: -4px; top: -12px; bottom: -12px; }
.clip-follow-pill.is-following { background: rgba(255,255,255,.12); color: rgba(255,255,255,.65); font-weight: 400; }
/* Fortschritt 2 hoch, Weiß 85 % auf 15 % */
html.wb-fein .clip-item .clip-progress { background: rgba(255,255,255,.15) !important; z-index: 4 !important; }
html.wb-fein .clip-item .clip-progress-fill { background: rgba(255,255,255,.85) !important; }
/* Pille: Seitenweite Knopfregeln (Höhe/Innenabstand) übersteuern */
html.wb-fein .clip-item .clip-follow-pill {
  height: 20px !important; min-height: 20px !important; min-width: 0 !important;
  padding: 0 9px !important; border-radius: 10px !important; line-height: 20px !important;
  font-size: 10.5px !important; font-weight: 500 !important; box-shadow: none !important; text-shadow: none !important;
}
/* Kopf + Hochladen wie im Feed: ruhig, Akzent nur für die Handlung */
html.wb-fein .clip-header-tab { font-family: var(--wbf-font) !important; font-size: 13px !important; font-weight: 500 !important; }
html.wb-fein .clip-studio-link {
  background: var(--wbf-glass) !important; color: #fff !important; border: .5px solid var(--wbf-hair) !important;
  font-family: var(--wbf-font) !important; font-size: 12px !important; font-weight: 500 !important; padding: 5px 11px !important;
}
html.wb-fein .clip-upload-fab {
  width: 44px !important; height: 44px !important; right: max(8px, env(safe-area-inset-right, 0px)) !important; bottom: 24px !important;
  background: var(--wbf-accent) !important; box-shadow: none !important;
}
html.wb-fein .clip-upload-fab svg { width: 18px !important; height: 18px !important; }

/* Gefolgt-Zustand überall gleich (05.10.): leise Pille „Gefolgt", Tippen entfolgt */
html.wb-fein body.feed-page .feed-follow-btn.is-following,
html.wb-fein .clip-item .clip-follow-pill.is-following {
  display: inline-block !important;
  background: rgba(255,255,255,.12) !important;
  border: .5px solid var(--wbf-hair) !important;
  color: var(--wbf-text2) !important;
  font-size: 10px !important; font-weight: 400 !important;
  padding: 0 8px !important;
}
html.wb-fein body.feed-page .feed-action-btn.is-following { color: var(--wbf-accent-text) !important; }

/* Doppeltipp-Herz (Spec §10): gefülltes weißes Herz 72 statt rotem Emoji */
html.wb-fein body.feed-page .tap-burst,
html.wb-fein .clip-item .clip-like-burst { font-size: 0 !important; color: transparent !important; }
html.wb-fein body.feed-page .tap-burst::before,
html.wb-fein .clip-item .clip-like-burst::before {
  content: ''; display: block; width: 72px; height: 72px; background: #fff;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 20s-7-4.4-9-8.8C1.6 8 3.3 4.6 6.6 4.3c2-.2 3.4.8 4.2 2.1L12 8l1.2-1.6c.8-1.3 2.2-2.3 4.2-2.1 3.3.3 5 3.7 3.6 6.9C19 15.6 12 20 12 20z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 20s-7-4.4-9-8.8C1.6 8 3.3 4.6 6.6 4.3c2-.2 3.4.8 4.2 2.1L12 8l1.2-1.6c.8-1.3 2.2-2.3 4.2-2.1 3.3.3 5 3.7 3.6 6.9C19 15.6 12 20 12 20z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Clips-Seite: Like gegeben = gefülltes Herz */
html.wb-fein .clip-item .clip-action-btn.liked svg path { fill: #fff !important; }
/* Clips-Seite: Pause-Symbol 18 ohne Fläche, solange pausiert (Spec §10) */
.clip-item.wb-pausiert::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; z-index: 6;
  pointer-events: none; background: #fff; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E") center / 18px no-repeat;
}

/* ---------- PWA (mobile.html) Clip-/Bild-Karte — Spec §9/§10 -----------------
   Eigene Markup-Klassen (wbf-*), deshalb ohne html.wb-fein-Schalter gültig. */
.wbf-karte { --wbf-unten: calc(96px + var(--safe-bottom, env(safe-area-inset-bottom, 0px))); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Roboto, "Segoe UI", system-ui, sans-serif; }
.wbf-karte .wbf-verlauf {
  background: linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 38%),
              linear-gradient(to bottom, rgba(0,0,0,.32) 0%, rgba(0,0,0,0) 14%) !important;
}
.wbf-info { position: absolute; z-index: 6; left: 16px; right: 64px; bottom: calc(var(--wbf-unten) + 48px); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.wbf-zeile1 { display: flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 0; }
.wbf-creator { display: flex; align-items: center; gap: 8px; min-width: 0; color: #fff; text-decoration: none; }
.wbf-creator .wb-avatar { width: 26px !important; height: 26px !important; min-width: 26px; border: 1px solid rgba(255,255,255,.85) !important; box-shadow: none !important; font-size: 10px !important; font-weight: 500 !important; }
.wbf-name { font-size: 12.5px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
.wbf-folgen { position: relative; height: 20px !important; min-height: 20px !important; min-width: 0 !important; padding: 0 9px !important; border: 0; border-radius: 10px !important; background: #5E55F0; color: #fff; font-family: inherit !important; font-size: 10.5px !important; font-weight: 500 !important; line-height: 20px !important; cursor: pointer; flex: 0 0 auto; box-shadow: none !important; }
.wbf-folgen::after { content: ''; position: absolute; left: -4px; right: -4px; top: -12px; bottom: -12px; }
.wbf-folgen.is-following { background: rgba(255,255,255,.12); border: .5px solid rgba(255,255,255,.16); color: rgba(255,255,255,.65); font-weight: 400; font-size: 10px; padding: 0 8px; }
.wbf-caption { font-size: 12px; line-height: 1.4; font-weight: 400; color: rgba(255,255,255,.88); max-height: 2.8em; overflow: hidden; margin-top: 1px; }
.wbf-leiste { position: absolute; z-index: 6; right: 6px; bottom: calc(var(--wbf-unten) + 48px); display: flex; flex-direction: column; align-items: center; }
.wbf-knopf { width: 48px; min-height: 48px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; text-decoration: none; filter: drop-shadow(0 1px 4px rgba(0,0,0,.45)); -webkit-tap-highlight-color: transparent; }
.wbf-knopf svg { width: 18px; height: 18px; }
.wbf-zahl { font-size: 9px; font-weight: 400; font-variant-numeric: tabular-nums; color: rgba(255,255,255,.75); line-height: 1; min-height: 9px; }
.wbf-melden { opacity: .5; }
.wbf-melden svg { width: 15px; height: 15px; }
.wbf-eingabe.wb-feed-comment-row { position: absolute; z-index: 6; left: 16px; right: 16px; bottom: var(--wbf-unten); width: auto; min-height: 36px; height: 36px; padding: 0 4px 0 14px; grid-template-columns: minmax(0,1fr) 28px; gap: 6px; border: .5px solid rgba(255,255,255,.24); border-radius: 18px; background: rgba(0,0,0,.22); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.wbf-eingabe .wb-feed-comment-input { height: 34px; line-height: 34px; padding: 0; font-size: 13px; font-weight: 400; }
.wbf-eingabe .wb-feed-comment-input::placeholder { color: rgba(255,255,255,.5); }
.wbf-eingabe .wb-feed-comment-send { width: 28px; height: 28px; padding: 0; border-radius: 50%; background: #5E55F0; color: #fff; opacity: 0; pointer-events: none; transition: opacity .15s; }
.wbf-eingabe .wb-feed-comment-send svg { width: 14px; height: 14px; }
.wbf-eingabe:focus-within .wb-feed-comment-send { opacity: 1; pointer-events: auto; }
.wbf-herz-burst { position: absolute; left: 50%; top: 45%; width: 72px; height: 72px; margin: -36px 0 0 -36px; z-index: 7; pointer-events: none; opacity: 0; background: #fff; filter: drop-shadow(0 6px 18px rgba(0,0,0,.45));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 20s-7-4.4-9-8.8C1.6 8 3.3 4.6 6.6 4.3c2-.2 3.4.8 4.2 2.1L12 8l1.2-1.6c.8-1.3 2.2-2.3 4.2-2.1 3.3.3 5 3.7 3.6 6.9C19 15.6 12 20 12 20z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 20s-7-4.4-9-8.8C1.6 8 3.3 4.6 6.6 4.3c2-.2 3.4.8 4.2 2.1L12 8l1.2-1.6c.8-1.3 2.2-2.3 4.2-2.1 3.3.3 5 3.7 3.6 6.9C19 15.6 12 20 12 20z'/%3E%3C/svg%3E") center / contain no-repeat; }
.wbf-herz-burst.an { animation: wbfHerz .6s ease-out forwards; }
@keyframes wbfHerz { 0% { opacity: 0; transform: scale(.6); } 25% { opacity: 1; transform: scale(1.05); } 60% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }
.wbf-pause { position: absolute; left: 50%; top: 45%; width: 36px; height: 36px; margin: -18px 0 0 -18px; z-index: 7; pointer-events: none; display: none; background: #fff; filter: drop-shadow(0 1px 6px rgba(0,0,0,.5));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E") center / 18px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M9 6v12M15 6v12'/%3E%3C/svg%3E") center / 18px no-repeat; }
.wbf-karte.wbf-pausiert .wbf-pause { display: block; }
/* Live-Karte der PWA: Ton-Knopf ruhig (Spec §6) */
html.wb-fein .wb-feed-sound { background: rgba(10,8,22,.50) !important; border: .5px solid rgba(255,255,255,.16) !important; box-shadow: none !important; font: 500 11px/1 -apple-system, BlinkMacSystemFont, Roboto, system-ui, sans-serif !important; border-radius: 13px !important; height: 26px !important; padding: 0 10px !important; }

/* 10.10.2026 — Zuschauer-Chat wie Host (host.html .mob-chat-float): jede Nachricht
   höchstens 5 Zeilen, Rest mit „…“. Umbruch an Wortgrenzen (word-break:normal); nur
   überlange Einzelwörter/Links dürfen mitten im Wort brechen (overflow-wrap:anywhere).
   Ohne html.wb-fein, damit es auch ohne Fein-Schalter gilt.
   a) Normal (Desktop-Seitenleiste, Querformat): .chat-msg-text ist ein eigener Block. */
body.watch-page #chat-messages .chat-msg-text {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
/* b) Feed-Hochformat: Name und Text stehen inline in EINER Zeile (.chat-msg-text inline,
   s. oben). Dort zählt die ganze Blase — Name + Text zusammen max. 5 Zeilen. */
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-msg .chat-bubble {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
html.wb-fein body.watch-page.watch-feed-portrait #chat-messages .chat-msg-text {
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}