@layer utilities{
  /* ===================================================================== */
  /* =====================  MOBILE-ONLY OVERRIDES  ======================= */
  /* ===================================================================== */
  @media (max-width: 768px){

    /* A) NUR der Layer unter den Textzeilen dichter (82%) */
    .youzer-wall-post .yz-post-inner,
    .activity-item .yz-post-inner {
      background: rgba(255, 255, 255, 0.82) !important;
      background-color: rgba(255, 255, 255, 0.82) !important;
      background-image: none !important; /* falls halbtransp. Gradients dazwischenfunken */
      opacity: 1 !important;
    }

    /* B) Text-Container selbst transparent halten (Bubbles bleiben sichtbar) */
    .youzer-wall-post .activity-inner,
    .activity-item .activity-inner {
      background: transparent !important;
      background-image: none !important;
    }

    /* C) Outer-Container NUR mobil ohne runde Ecken */
    .youzer-wall-post,
    .activity-item,
    #youzify .activity-item,
    #youzify .youzer-wall-post {
      border-radius: 0 !important;
    }

    /* D) OUTER CONTAINER – Mobile Opacity Control
          1.0 = 100% dicht (opaque), .82 = 82% usw.  */
    :root { --luca-mobile-outer-opacity: 0.82; } /* Default: 82% dicht */

    #youzify .activity-item,
    #youzify .youzer-wall-post,
    .youzer-wall-post,
    .activity-item {
      background: rgba(255, 255, 255, var(--luca-mobile-outer-opacity, 0.82)) !important;
      background-image: none !important; /* Safety gegen Gradients */
    }

    /* E) HEADER: Name + Status – nur Shadow verstärken (Name-Größe bleibt original) */
    #youzify .activity-header p,
    #buddypress .activity-header p,
    .youzify .activity-header p {
      color: #fff !important;
      /* ~15% dunkler als Desktop-Version */
      text-shadow:
        0 2px 6px  rgba(0, 0, 0, 0.483),
        0 0 12px   rgba(0, 0, 0, 0.414),
        0 0 22px   rgba(0, 0, 0, 0.345) !important;
    }

    /* F) Status-TEXT auf die Name-Größe „runterziehen“.
          Ziel: Name unverändert lassen, NUR Status kleiner machen.
          (Timestamp bleibt separat geregelt, siehe G) */
    /* Häufig ist der Status in einem <span> – zuerst gezielt spannen: */
    #youzify .activity-header p span:not(.activity-time-since),
    #buddypress .activity-header p span:not(.activity-time-since),
    .youzify .activity-header p span:not(.activity-time-since) {
      font-size: 0.88em !important; /* ~14/16: an Name-Größe angeglichen */
      line-height: 1.3 !important;
    }
    /* Fallback: alle direkten Kindelemente außer dem ersten Link (Name) und dem Timestamp kleiner setzen.
       (Falls der Status nicht in einem <span> steckt.) */
    #youzify .activity-header p > :not(a:first-child):not(.activity-time-since),
    #buddypress .activity-header p > :not(a:first-child):not(.activity-time-since),
    .youzify .activity-header p > :not(a:first-child):not(.activity-time-since) {
      font-size: 0.88em !important;
      line-height: 1.3 !important;
    }

    /* G) Timestamp bewusst kleiner + dunkel lassen (wie vorher) */
    #youzify .activity-header .activity-time-since,
    #buddypress .activity-header .activity-time-since,
    .youzify .activity-header .activity-time-since,
    .activity-header a.activity-time-since,
    .activity-header .time-since {
      font-size: 0.88em !important;
      color: rgba(0, 0, 0, 0.70) !important;
      text-shadow: none !important;
    }
  }
}