.noti-container {
      max-width: 100%;
      margin-top: 10px;
  }

  .noti-card {
      background: #fff;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      padding: 15px;
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      border-left: 5px solid #cbd5e1;
  }

  .noti-unread {
      background: #f8fafc;
      border-left-color: #3b82f6;
  }

  .noti-icon {
      width: 40px;
      height: 40px;
      border-radius: 8px;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;
      font-size: 1.2rem;
      flex-shrink: 0;
  }

  .noti-body {
      flex-grow: 1;
      margin-right: 15px;
  }

  .noti-message {
      display: block;
      color: #1e293b;
      font-weight: 500;
      text-decoration: none !important;
  }

  .noti-message a {
      color: #3b82f6;
      text-decoration: underline;
  }

  .noti-date {
      font-size: 0.75rem;
      color: #94a3b8;
      display: block;
      margin-top: 4px;
  }

  /* Löschen Button Styling */
  .btn-delete-noti {
      opacity: 0.6;
      transition: opacity 0.2s, color 0.2s;
      color: #64748b;
      padding: 5px 10px;
  }

  .btn-delete-noti:hover {
      opacity: 1;
      color: #dc3545;
      background: #fff5f5;
      border-radius: 5px;
  }

  .type-transfer {
      border-left-color: #10b981;
  }

  .type-match {
      border-left-color: #6366f1;
  }

  .type-error {
      border-left-color: #ef4444;
  }



  /* --- Glocke & Brief OPTIK --- */
  /* Wir stylen die Links so, dass sie wie Buttons aussehen */
  .ows-action-btn {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: #f1f5f9;
      border-radius: 8px;
      color: #64748b !important;
      text-decoration: none !important;
      position: relative;
      vertical-align: middle;
      margin-top: 5px;
      margin-left: 5px;
  }

  .ows-action-btn i {
      font-size: 1.1rem;
  }

  /* Rote Glocke/Brief bei Aktivität */
  .icon-active {
      color: #ef4444 !important;
  }

  /* Die roten Zahlen (Badges) */
  .ows-action-btn .badge-count {
      position: absolute;
      top: -5px;
      right: -5px;
      background: #ef4444 !important;
      color: white !important;
      font-size: 0.65rem !important;
      padding: 2px 5px !important;
      border-radius: 10px !important;
      border: 2px solid white;
      line-height: 1;
      font-weight: bold;
  }